react-native#Slider TypeScript Examples
The following examples show how to use
react-native#Slider.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AudioPlayer.tsx From companion-kit with MIT License | 5 votes |
|
render() {
const { alternativeStyle, style } = this.props;
const { isLoaded, elapsed, duration, timeLeftFormated, progressFormated, onRewinding, isPlaying } = this.model;
const timeProgress = progressFormated || '00:00';
const timeLeft = timeLeftFormated ? '- ' + timeLeftFormated : '00:00';
const thumbAndActivityColor = alternativeStyle ? Colors.audioPlayerAltColor : Colors.audioPlayerThumbAndActivityColor;
const sliderMinTrack = alternativeStyle ? Colors.audioPlayerAltColor : Colors.audioPlayerSliderMinTrack;
const sliderMaxTrack = Colors.borderColor;
return (
<View style={[styles.container, style]}>
<View style={[styles.sliderWrap, alternativeStyle ? styles.altSlider : null]}>
<Text style={[TextStyles.p4, styles.timeProgress, alternativeStyle ? {...styles.altTimeProgress, color: Colors.audioPlayerAltColor} : null, !isLoaded && styles.disabled]}>{timeProgress}</Text>
<Slider
style={styles.slider}
minimumTrackTintColor={sliderMinTrack}
maximumTrackTintColor={sliderMaxTrack}
minimumValue={0}
maximumValue={duration || 0}
thumbImage={alternativeStyle ? Images.altAudioThumb : Images.audioThumb}
thumbTintColor={Platform.OS === 'ios' ? null : thumbAndActivityColor}
onSlidingComplete={onRewinding}
disabled={!isLoaded}
value={elapsed || 0}
/>
<Text style={[TextStyles.p4, styles.timeLeft, alternativeStyle ? { color: Colors.audioPlayerAltColor } : null, !isLoaded && styles.disabled]}>{timeLeft}</Text>
</View>
{!isLoaded && <ActivityIndicator style={[styles.controlsWrap, alternativeStyle ? styles.altControls : null]} size="small" color={thumbAndActivityColor} />}
{/* CONTROLS ======== */}
{isLoaded && <View style={[styles.controlsWrap, alternativeStyle ? styles.altControls : null]}>
{!isPlaying ?
<TouchableOpacity
disabled={!isLoaded}
onPress={() => this.model.startPlayAsync()}
style={alternativeStyle ? styles.altControl : null}
>
<View style={[styles.triangle, alternativeStyle ? styles.altTriangle : null]} />
</TouchableOpacity>
:
<TouchableOpacity
onPress={() => this.model.pausePlayAsync()}
style={[styles.rectWrap, alternativeStyle ? styles.altControl : null]}
>
<View style={[styles.rect, alternativeStyle ? styles.altRect : null, styles.rectLeft]} />
<View style={[styles.rect, alternativeStyle ? styles.altRect : null]} />
</TouchableOpacity>
}
</View>
}
</View>
);
}
Example #2
| Source File: MoodSlider.tsx From companion-kit with MIT License | 5 votes |
|
render() {
const { style } = this.props;
const isIos = Platform.OS === 'ios';
const mood = this.model.currentMood;
const title = Moods.getTitle(mood) || 'Select your mood';
const CurrentIcon = mood ? MoodImages[mood] : MoodImages[Moods.Positive];
if (!CurrentIcon) {
throw new Error(`Mood icon was not set for the following mood: ${mood} (${title})`);
}
const sliderValue = this.model.value != null
? this.model.value
: this.model.minValue + (this.model.maxValue - this.model.minValue) / 2;
return (
<View style={[styles.container, style]}>
<View style={styles.moodWrap}>
<CurrentIcon
style={styles.moodIcon}
width={43}
height={43}
/>
<Text style={[TextStyles.h2, styles.mood]}>{title}</Text>
</View>
<Slider
style={styles.slider}
minimumValue={this.model.minValue}
maximumValue={this.model.maxValue}
minimumTrackTintColor={Colors.borderColor}
maximumTrackTintColor={Colors.borderColor}
step={0.01}
thumbTintColor={Colors.moodSlider.thumbTintColor}
onValueChange={this._onChange}
value={sliderValue}
/>
<View style={styles.sliderScale}>
<Text style={[TextStyles.p2, { textTransform: 'capitalize' }]}>{Moods.getTitle(Moods.Min)}</Text>
<Text style={[TextStyles.p2, { textTransform: 'capitalize' }]}>{Moods.getTitle(Moods.Max)}</Text>
</View>
</View>
);
}
Example #3
| Source File: CreateScreen.tsx From lets-fork-native with MIT License | 4 votes |
|
CreateScreen = React.memo((props: Props): React.ReactElement => {
const locale = getLocale()
const countries = ['LR', 'MM', 'US']
const system = countries.includes(locale.substring(3)) ? 'imperial' : 'metric'
const units = UNITS.units[system]
const conversion = UNITS.conversion[system]
const symbol = currencies[locale.substring(3)] || '$'
const { location, navigation, ws } = props
const [categories, setCategories] = React.useState<string[]>([])
const [price, setPrice] = React.useState([false, false, false, false])
const [openNow, setOpenNow] = React.useState(true)
const [radius, setRadius] = React.useState(UNITS.initialRadius[system])
const [region, setRegion] = React.useState({
latitude: location?.coords?.latitude || 52.520008,
longitude: location?.coords?.longitude || 13.404954,
latitudeDelta: 0.01,
longitudeDelta: 0.1,
})
// creates a new party
const handleCreate = (): void => {
const pr: number[] = []
price.forEach((p, i) => {
if (p) pr.push(i + 1)
})
ws.send(JSON.stringify({
type: 'create',
payload: {
categories: categories.length ? categories.join(',') : 'restaurants',
latitude: `${region.latitude}`,
longitude: `${region.longitude}`,
radius: `${radius}`,
open_now: openNow,
price: pr.length ? pr : null,
},
}))
navigation.navigate('Party')
}
return (
<ScrollView>
<MapView
style={styles.map}
region={region}
onRegionChangeComplete={setRegion}
rotateEnabled={false}
scrollEnabled
zoomEnabled
>
<Circle
center={region}
radius={radius}
/>
</MapView>
<Text style={styles.radius}>
{`Find restaurants within: ${(radius / conversion).toFixed(1)}${units}`}
</Text>
<Slider
style={styles.slider}
minimumValue={UNITS.minimumValue[system]}
maximumValue={UNITS.maximumValue[system]}
minimumTrackTintColor={colors.green}
maximumTrackTintColor={colors.green}
value={radius}
onValueChange={setRadius}
step={UNITS.step[system]}
/>
<View style={styles.openNow}>
<Switch
style={styles.switch}
value={openNow}
onValueChange={setOpenNow}
/>
<Text style={styles.openNowText}>{openNow ? 'Currently open' : 'All restaurants'}</Text>
</View>
<View style={styles.price}>
<Price selected={price} setSelected={setPrice} n={1}>{symbol}</Price>
<Price selected={price} setSelected={setPrice} n={2}>{symbol}</Price>
<Price selected={price} setSelected={setPrice} n={3}>{symbol}</Price>
<Price selected={price} setSelected={setPrice} n={4}>{symbol}</Price>
</View>
<MultiSelect
handleSelect={setCategories}
items={CATEGORIES}
/>
<View style={styles.button}>
<Button color="purple" size="sm" onPress={(): void => handleCreate()}>
CREATE
</Button>
</View>
</ScrollView>
)
})
