onValueChange triggers an extra time after onSlidingCompleted on Android

[henrikvilhelmberglund]

Environment

• react-native info output:

  // react-native info

• are you using the new architecture? I'm guessing no.

• which version of react & react-native are you using? "expo": "~49.0.15", "react": "18.2.0", "react-native": "0.72.6", "@react-native-community/slider": "4.4.2"

Description

onValueChange triggers an extra time after onSlidingCompleted on Android.

Inside of onSlidingCompleted I'm setting the slider value to a specific value when the thumb button is pressed if the current value and saved previous value is the same. This works but since onValueChange is triggered an additional time after onSlidingCompleted the slider jumps back to the initial pressed position.

This can be a bit hard to see in this project because it is so small/fast but you should be able to see it flash to the value 5. I think this works correctly on iOS.

1. Drag the slider to the right.
2. Press the thumb button a bunch of times.

Expected: after one press of the thumb button the slider should jump to the value 5. Result: the slider jumps to 5 and back to the original position.

Expected order: onSlidingStart onValueChange (if there is a value change at all) onSlidingComplete

Actual order: onSlidingStart onValueChange (if there is a value change at all) onSlidingComplete onValueChange

Reproducible Demo

Repro: https://github.com/henrikvilhelmberglund/react-native-slider-issue-android

Code:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import Slider from "@react-native-community/slider";
import { useState } from "react";

export default function App() {
  const [sliderValue, setSliderValue] = useState(5);
  const [sliderValueStart, setSliderValueStart] = useState();
  const handleSlidingStart = (initialSliderValue) => {
    console.log("handleSlidingStart", handleSlidingStart);
    setSliderValueStart(initialSliderValue);
  };

  const handleSlidingChange = (sliderValue) => {
    console.log("handleSliderChange", handleSlidingChange);
    setSliderValue(sliderValue);
    console.log("after set slider value in change", sliderValue);
  };

  const handleSlidingComplete = (sliderValue) => {
    console.log("handleSlidingComplete", handleSlidingComplete);
    if (sliderValue !== sliderValueStart) {
      setSliderValue(sliderValue);
    } else {
      console.log("sliderValue and sliderValueStart are the same");
      // set slider value to 5
      setSliderValue(5);
      console.log("after set slider value in complete", sliderValue);
    }
  };

  return (
    <View style={styles.container}>
      <Slider
        style={{ width: 400, height: 40 }}
        minimumValue={0}
        maximumValue={23}
        step={1}
        thumbTintColor="#000000"
        minimumTrackTintColor="#222222"
        value={sliderValue}
        onSlidingStart={handleSlidingStart}
        onSlidingComplete={handleSlidingComplete}
        onValueChange={handleSlidingChange}
        tapToSeek={true}
        // maximumTrackTintColor="#000000"
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

[subramani01]

@henrikvilhelmberglund is this fixed? i'm having the same issue, onValueChange triggered an extra time after onSlidingComplete!

[Jmedders]

Reproducing this still: snack (though snacks on android & iOS are broken as mentioned in #587)

As a possible fix for some until the library's updated, something that helped me was abstracting away logic where possible from onValueChange to onSlidingStart