callstack
Bug when working with expo router
Environment
- react-native info output:
// react-native info
-
are you using the new architecture?
-
which version of react & react-native are you using? "react": "19.0.0", "react-native": "0.79.5",
Description
So I migrated to use expo router from react navigation. One of my pages have two sliders. Before, it was working fine. However, after the migration, when i press back button on that slider page, and then go back to that page via router.push (i am in a stack navigator), the slider with the bigger maximum value would take the value of the other slider. This is such a strange behaviour! Someone needs to fix this! Why are two sliders sharing the same state. I experimented with this and even when the two sliders is not using any states, but I just put constants into the value field, etc., this issue still persists. This is incredibly frustrating. I even tried isolating the two sliders, and to no avail. I tried changing the key, doesn't work.
Reproducible Demo
Read above
I’m seeing a similar issue after upgrading from RN 0.74.4 → 0.80.2 with the New Architecture enabled (using v4.5.7 or latest 5.0.0 release).
Symptom When toggling between two sliders on the same screen, the slider with the higher maximumValue gets clamped to the other slider’s maximumValue at initial render.
Minimal example // Toggle between two sliders on the same screen
{showFirst ? ( <Slider key="slider1" maximumValue={10} value={5} /> ) : ( <Slider key="slider2" maximumValue={100} value={20} /> )}
Actual behavior After hiding Slider 1 and showing Slider 2, the value becomes 10 instead of 20 (looks like it was initialized using the previous slider’s maximumValue).
Expected behavior Slider 2 should initialize with value={20} and respect its own maximumValue={100}.
What I tried • Different keys for each slider → no longer forces a clean init. • Keeping both sliders mounted and hiding one (visibility tricks) → still repro. • ... many other things → still repro.
Workaround I found that deferring the value assignment for the second slider until after its initial mount resolves the issue. This only works if the new value is different from the initial one, so I initialize it with undefined and then update it to the correct value a few ms later with a timeout. But I’m not confident it covers all scenarios, since on some sliders (after migrating to the New Architecture) I also noticed that lowerLimit is not enforced on the very first slide to the left after mount, although it works correctly on subsequent moves.
