Slider thumb button jumping all over the screen on iOS 13

Environment

“expo”: “^31.0.0”, “react”: “16.5.0”, “react-native”: “https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz”, “react-navigation”: “^2.14.2”

Description

I just updated my iPhone 8+ to iOS 13 and have noticed some strange new behavior with the slider. When pressed and moved it jumps erratically all over the screen from left to right, darting back and forth.

I’m not sure if this has to do with the new iOS or if this was present before, however it seemed to be working fine and as expected before the iOS update.

Below is a minimum working component where I have my slider.

NOTE: on simulator it appears to work fine, it’s only on my device where I see this happening. I can’t a good screen shot of it but I took a video of my screen and can supply that.

Reproducible Demo

import React from 'react';
import { Dimensions, Slider, StyleSheet, Text, View } from 'react-native';

export default class DurationSetter extends React.Component {
  constructor() {
    super();
    this.state = {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
        duration: 6,
        startstoppause: "stopped",
    };
    Dimensions.addEventListener("change", (e) => {
        this.setState(e.window);
    });
  }

  _onSliderChange(value) {
    this.setState(
      { duration: value },
    )
 }

  render() {
    let rate = ( 60 / (this.state.duration * 2)).toFixed(1) // <== rounds number to .1 decimal
    
    let styles = StyleSheet.create({
      container: {
        width: this.state.width * .75, 
        marginTop: this.state.height * .01,
        backgroundColor: 'pink',
      },
      durationText: {
        fontSize: 20,
        marginTop: 10,
        marginBottom: 10,
      },
      rateText: {
        fontSize: 14,
        marginBottom: 5,
      },
    }); 
    
    if(this.state.startstoppause === "started" ) {
      return null
    }
    else {
      return (
        <View style={styles.container}>
          <Text style={styles.durationText}>Set Rate of Breath:</Text>
          <Text style={styles.rateText}> {rate} breaths/min</Text>
          <Slider
            step={2} // <== Step value of the slider
            minimumValue={3} // <== Far LEFT value
            maximumValue={9} // <== Far RIGHT value
            onValueChange={this._onSliderChange.bind(this)} // <== Callback continuously called while the user is dragging the slider
            value={this.state.duration} // <== Current value of slider
            minimumTrackTintColor={'#3a6e95'}
          />
        </View>
      )
    }
  }
}

[hzburki]

What about for versions 1.*.*. I haven’t upgraded to RN 0.60 yet. I can’t use the latest release!

[ludams]

To all the people who are still struggling with this bug, you can work around this by setting the step to 0 and round the values in the on-handlers (on iOS). I’am using the Slide from react-native itself, but this should also work with the react-native-community version.

My working example (TypeScript, React Native 0.59.10):

import React, { useRef } from 'react';
import { Platform, Slider, SliderProps } from 'react-native';

const MySlider: React.FC<SliderProps> = (props) => {
    const { onValueChange, onSlidingComplete, step, ...sliderProps } = props;

    const sliderRef = useRef<Slider | null>(null);

    const roundValue = (value: number) => {
        if (!step) {
            return value;
        } else {
            // Dividing with 1 / step helped me to get a correctly rounded values
            // e.g: When step = 0.1 and value = 4.8
            // If I return Math.round(value / step) * step,
            // the result would be 4.800000000000001 instead of 4.8
            // This is due to the transformation between decimal and binary numbers
            const dividend = 1 / step;
            return Math.round(value / step) / dividend;
        }
    };

    const onValueChangeRound = (value: number) => {
        onValueChange && onValueChange(roundValue(value));
    };

    const onSlidingCompleteRound = (value: number) => {
        const roundedValue = roundValue(value);
        if (Platform.OS === 'ios' && step && sliderRef.current) {
            // Sets the sliderValue to rounded value, so thumb snaps in to step
            sliderRef.current.setNativeProps({ value: roundedValue });
        }
        onSlidingComplete && onSlidingComplete(roundedValue);
    };

    return (
        <Slider
            ref={sliderRef}
            step={Platform.OS === 'ios' ? 0 : props.step}
            onValueChange={onValueChangeRound}
            onSlidingComplete={onSlidingCompleteRound}
            {...sliderProps}
        />
    );
};

You can use this component like the Slider component from React Native.

It wasted much of my time, hope this helps someone. 😃