onValueChanges is called on programmatic value changes on Android

[eueddem]

Environment

System: OS: macOS 11.6 CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz Memory: 1.06 GB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.16.0 - /var/folders/21/5xmhgtlx4bj0gthrmm8tm3zc0000gq/T/yarn--1657226700390-0.0757475079991885/node Yarn: 1.22.11 - /var/folders/21/5xmhgtlx4bj0gthrmm8tm3zc0000gq/T/yarn--1657226700390-0.0757475079991885/yarn npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm Watchman: 2021.09.13.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /Users/eueddemkim-new/.rbenv/shims/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: API Levels: 30, 31 Build Tools: 30.0.2, 31.0.0 Android NDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7784292 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 1.8.0_292 - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.4 => 0.63.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Description

The doc says, onValueChanges: Callback continuously called while the user is dragging the slider. It works as expected on iOS device and simulators, but on Android devices(tested with Pixel 3 XL, Android 11), onValueChanges is called on every value changes, even from setState.

I'm on latest 4.2.4 version. "@react-native-community/slider": "^4.2.4",

Reproducible Demo

const [state, setState] = useState(0);
const onValueChange = (value: number) => {
    console.log("onValueChange invoked", value);
};

.... (do state change after some time interval) ...

<Slider
    minimumValue={0}
    maximumValue={100}
    step={1}
    value={state}
    onValueChange={onValueChange}
 />

[BartoszKlonowski]

@eueddem Thanks for taking the time to report! I will check and handle that!

[wqxwqx]

Every time I modify the value of value, he will trigger onvaluechanges on "@ react native community / slider": "^ 4.3.1"

[arys]

any update on this? I am facing the same issue.

[joshua-revolutions]

Are there any short term work-arounds? Otherwise I can't use this for Android

[arys]

Are there any short term work-arounds? Otherwise I can't use this for Android

I used onSlidingComplete instead, works fine.

[meiqi1992]

any update on this? I am facing the same issue.

[jamesisaac]

onSlidingComplete doesn't seem to get called on Android when using accessibilty controls to adjust the slider, only onValueChange.

So unfortunately from what I can tell, having a slider that has some programmatic control (e.g. the seek bar on a playing video) isn't currently compatible with using accessibility controls on the slider.

[moxxuk]

I'm using the following workaround for now:

<Slider
    value={useMemo(() => value, [])}
    onValueChange={handleChange}
    ...
/>

[EdsonGJr12]

Any update? Same issue here

[za-rakib]

Any update?

[moxxuk]

Just curious as to why folks disagree with my 'workaround'? It's specifically mentioned in the README that "This is not a controlled component, you don't need to update the value during dragging."

[BartoszKlonowski]

Hello community! Sorry for the delay, but just to keep you updated: I'm about to deliver the fix within day or two. Just in case you can always check the Project board to track the status of the issue you are interested about.

Thank you very much for being engaged and bumping the topic, this is useful for me to decide about priorities 👍