Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Slider thumb button jumping all over the screen on iOS 13

See original GitHub issue


“expo”: “^31.0.0”, “react”: “16.5.0”, “react-native”: “”, “react-navigation”: “^2.14.2”


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() {
    this.state = {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
        duration: 6,
        startstoppause: "stopped",
    Dimensions.addEventListener("change", (e) => {

  _onSliderChange(value) {
      { 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>
            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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:5
  • Comments:20

github_iconTop GitHub Comments

hzburkicommented, Oct 15, 2019

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

ludamscommented, Apr 9, 2020

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 (
            step={Platform.OS === 'ios' ? 0 : props.step}

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

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Slider thumb button jumping all over the screen on iOS 13 #109
I just updated my iPhone 8+ to iOS 13 and have noticed some strange new behavior with the slider. When pressed and moved...
Read more >
Adjust how iPhone responds to your touch - Apple Support (NG)
iPhone responds to a tap when you lift your finger within a certain period of time. Tap the Decrement button or the Increment...
Read more >
Learn these iPhone gestures to tap and swipe like a pro
Jump between apps: Swipe left or right along the bottom edge of the phone to jump back and forth between apps.
Read more >
iPhone touch gestures and commands - no Home button, no ...
Jason quickly takes us through some of the most used iPhone gestures and ... in iOS 13, including:How to return to the home...
Read more >
iPhone : How to detect the end of slider drag? - Stack Overflow
Note in Interface Builder when adding an action you also have the option to add both sender and event parameters to the action....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found