react-native-slider icon indicating copy to clipboard operation
react-native-slider copied to clipboard

useState callback do not execute inside onSlidingComplete using tap.

Open gibo77 opened this issue 1 year ago • 1 comments

Environment

Android has issue. iOS it works.

  • react-native info output:
// react-native info
 "dependencies": {
    "@react-native-community/slider": "^4.4.2",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "babel": "^6.23.0",
    "base64-js": "^1.5.1",
    "buffer": "^6.0.3",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-gesture-handler": "^2.12.1",
    "react-native-reanimated": "^3.5.1",
    "react-native-safe-area-context": "^4.7.2",
    "react-native-screens": "^3.25.0",
    "react-native-size-matters": "^0.4.0",
    "react-native-splash-screen": "^3.3.0",
    "react-native-udp": "^4.1.7",
    "react-native-vector-icons": "^10.0.0",
    "upgrade": "^1.1.0"
  • are you using the new architecture?

  • which version of react & react-native are you using?

Description

The val inside the onSlidingComplete is updated when using tap in Android. But using val in useState setSliderBrightness does not change the SliderBrightness value.

Reproducible Demo

 const [SliderBrightness, setSliderBrightness] = useState(valueItem);

  <Slider
              style={styles.SliderMargin}
              step={1}
              disabled={!isEnabled} //If Glowing is activated, the Slider could not be changed.
              tapToSeek={true}
              minimumTrackTintColor="#307ecc"
              maximumTrackTintColor="#000000"
              maximumValue={100}
              minimumValue={0}
              value={SliderBrightness} //Updates on real time. Excellent.
              onSlidingComplete={val => {
                val => setSliderBrightness(val);
                console.log('OnSlidingComplete: ', SliderBrightness);
                ChangeBrightnessHappened = true;
                //setSliderBrightness(val);
                Gibo_Fetch('IGBT=' + val + '&Angga=' + ESPSerialNum);
                // navigation.setParams({valueItem: SliderBrightness});
              }}
              onValueChange={val => setSliderBrightness(val)}
            />

gibo77 avatar Oct 20 '23 03:10 gibo77

Hi Team, I was able to get a solution on my issue. Since I couldn't make the useState work inside the "OnFinishSliding", I just created my own function or callback and pass the val, as such FuncSlider(val). In the callback function I was able to update my variable SliderBrightness by equaling it to val, so that when I return back to home page I have the correct val data.

This val parameter is not in the documentation. I just found out about it somewhere in an example by chance. It would be nice to have it in documentation.

gibo77 avatar Oct 20 '23 16:10 gibo77