React-native-slider: Sliding back to old position

[Vednus]

Is anyone else having it slide back to its previous position after sliding it to a position? It only happens randomly at a few positions on the slider. Started happening on 3.0.2 and continued into 3.0.3. Happening on ios simulator and real device.

I tried changing the step and commenting out onValueChange and onSlidingComplete, but neither worked.

[superplussed]

I am having this problem as well. :/

[AmirDoreh]

i had also the same problem , which i solved it by passing the props directly not through an state manager or storing it to the state!

[Vednus]

I've removed all props and it's still happening. I've also memoed the containing component to make sure it's not rerendering and it's still happening. Not sure if it's also related to upgrading to rn 63.1

[JoelOnGithub]

We have the same issue. Happens only on iOS 13.6.x, 13.5.x is fine. Downgrading to react-native-slider to the latest version 2 solves it though.

[jenskuhrjorgensen]

Thanks @JoelOnGithub - I downgraded to latest version 2 (2.0.9 at the moment) and it seems to have solved it. 👍

[bimalgrg519]

Downgrading to version 2.0.9 worked for me as well.

[R4DIC4L]

I noticed this only happens on android, on ios it seems to be working fine. I am using version 3.0.3.

I found an ugly workaround (hack) to send only the initial value by aving it on first change, as it seems that changing the value prop on android messes with the rendering when using the value in controlled mode (e.g.: in a form with redux-form or formik that saved the state value and sends it to the component) in react-native, while Slider knows how to properly display the slider thumb internally after change:

import { Platform } from 'react-native';
import Slider, { SliderProps } from '@react-native-community/slider';

function isValueNullOrUndefined(value: any): boolean {
  return value === null || value === undefined;
}

class CustomSlider extends React.Component<SliderProps> {
  private _initialValue?: number = undefined;

  handleValueChange = (value: number) => {
    if ( isValueNullOrUndefined(this._initialValue)) {
      this._initialValue = this.props?.value;
    }
    if (this.props.onValueChange) {
      this.props.onValueChange(value);
    }
  }

  getSliderValue = (value?: number) => {
    return Platform.OS === 'android' && !isValueNullOrUndefined(this._initialValue) ? this._initialValue : value;
  }

  render() {
    const { value, ...sliderProps } = this.props;

    const sliderValue = this.getSliderValue(value);

    return (
      <Slider
        value={sliderValue}
        {...sliderProps}
        onValueChange={this.handleValueChange}
      />
    );
  }
}

export default CustomSlider;

Seems onValueChange and onSlidingComplete themselves work fine, they report when user changes the value (I also use a text component next to the slider to check the value), it is just the rendering with value prop interference for android.

[dukoo]

I have the same issue on iOS even when no handler is set - just raw Slider component. In my case the problem occurs when I slowly move slider towards 0 and release it with value about 10-15%, then it bounces to some value between old position and the new one.

[dukoo]

I see that the issue is already solved and waits to be published: https://github.com/callstack/react-native-slider/pull/235