android - sliding broken on RN 0.79 (rc3)

[vonovak]

Environment

New project initialized with RN 79 rc-3, with new architecture enabled

Description

Screen.Recording.2025-03-28.at.9.11.09.mov

Reproducible Demo

https://github.com/vonovak/slider-bug-79

[KostiantynSosonnyiEksperience]

Same here, RN 77.2

[brimby]

I think it's just handling the value prop differently now. Previously you could use onValueChange to set the state that fed directly into the slider's value prop. It would ignore the feedback loop until the interaction was complete and be fine. But now it seems to get hung up on it. You should try setting the value prop with onSlidingComplete instead. And if you want to show a display value as the slider moves, point onValueChange to a separate state used only for display.

So here's how you should change your reproducible demo (I added a displayValue state which is altered by onValueChange, and the original value state is now altered by onSlidingComplete) :

const [value, setValue] = React.useState(0.5);
const [displayValue, setDisplayValue] = React.useState(0.5);
return (
  <View style={backgroundStyle}>
    <StatusBar
      barStyle={isDarkMode ? 'light-content' : 'dark-content'}
      backgroundColor={backgroundStyle.backgroundColor}
    />

    <ScrollView style={backgroundStyle} ref={view}>
      <View style={{paddingRight: safePadding}}>
        <Header />
      </View>

      <View
        style={{
          backgroundColor: isDarkMode ? Colors.black : Colors.white,
          paddingHorizontal: safePadding,
          paddingBottom: safePadding,
        }}>
        <Text>Value: {displayValue && +displayValue.toFixed(3)}</Text>
        <Slider value={value} onValueChange={setDisplayValue} onSlidingComplete={setValue} />
        <Section title="Step One">
          Edit <Text style={styles.highlight}>App.tsx</Text> to change this
          screen and then come back to see your edits.
        </Section>
        <Section title="See Your Changes">
          <ReloadInstructions />
        </Section>
        <Section title="Debug">
          <DebugInstructions />
        </Section>
        <Section title="Learn More">
          Read the docs to discover what to do next:
        </Section>
        <LearnMoreLinks />
      </View>
    </ScrollView>
  </View>
);
}

[brimby]

However, I'm not sure what the argument is (or if there even is one) for why you can't use onValueChange for the value prop anymore. So it might still be worth it for the devs to consider why this apparently changed.

[brianlenz]

I'm having this issue as well on React Native 0.78.2. We are not using new architecture, however. iOS works great, but in Android, the slider doesn't move at all. We update value, but the slider stays in place. If you drag the slider, the value is always 0 in onValueChanged (same behavior as in the screen recording ☝️).

[brianlenz]

@BartoszKlonowski I'm not entirely sure what the root cause of the issue is, but I was able to work around the bug by explicitly setting maximumValue={1}. I believe this is supposed to be the default, but it appears that it's not working correctly in RN 0.78.2. It worked previously without an explicit maximumValue in RN 0.76.9.

Here's pseudo-code:

<Slider
  value={position / duration || 0}
  maximumValue={1}
  minimumTrackTintColor={Colors.gray500}
  maximumTrackTintColor={Colors.gray300}
  thumbTintColor={Platform.select({
    ios: undefined,
    android: Colors.primary400,
  })}
  thumbImage={Platform.select({
    ios: TimelineThumb,
    android: undefined,
  })}
  onSlidingComplete={(value) => {
    void seekTo(value * duration);
  }}
  disabled={isLoading}
/>

Again, this issue only affects Android, not iOS.

[anAnun]

maximumValue={1} is a workaround