react-native#Slider TypeScript Examples

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>
        );
    }

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>
        );
    }

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>
  )
})