Sliders dont reset after remounting them #739
Description
Environment
I use Expo SDK 53. My React related dependencies:
"@react-native-community/slider": "^5.0.1",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-native": "0.79.5",
"react-native-ble-manager": "^8.6.0",
"react-native-elements": "^3.4.3",
"react-native-gesture-handler": "~2.24.0",
"react-native-loading-spinner-overlay": "^1.1.0",
"react-native-reanimated": "~3.17.4",
"react-native-safe-area-context": "^5.5.2",
"react-native-safe-module": "^1.2.0",
"react-native-screens": "~4.11.1",
"react-native-svg": "15.11.2",
"react-native-web": "^0.20.0",
"react-native-webview": "13.13.5",
"react-native-wheel-color-picker": "^1.3.1",
"react-navigation": "^4.4.3",
"react-navigation-stack": "^2.10.1",
Bug happens only on iOS. I tested my demo app below on simultor iOS18.0
-
are you using the new architecture?
I have not set reactNativeNewArchitecture in app.json but https://expo.dev/changelog/sdk-53 says it is on by default. -
which version of react & react-native are you using?
"react": "19.0.0",
"react-native": "0.79.5",
Description
Values of slider misteriously leaks to another slider when showing/hiding sliders even if using unique keys. Happening with slider with same props and again, I have unique keys set.
Reproducible Demo
- I have sliders on tabs of a tabbed view. I only render the active tab. I have hardcoded min/max/value props so no states are involved in the demo. Slider1, Slider2 and Slider3 has min=0, max=100, value=50 and unique key props.
- Now if I move Slider1 to 0 (left), Slider2 to 100 (right) and I switch to Tab2, Slider3 is at position 100 (right) instead of the expected 50 (middle).
- Now if I move Slider3 to e.g: ~33 (left third) and switch to Tab1, Slider1 is at ~33 (left third) instead of the expected 50 (middle). Slider2 is on 0 (left) instead of the expected 50 (middle).
This happens only on iOS. I use simulator with iOS18.0.
Looks like the native sliders are recycled but not reseted? Maybe it needs to implement that new prepareForRecycle function to reset itself when React recycles it?
This happen with slider have the same min/max/value props.
If I set sliders with props: min/max/value like this:
- Slider1 0/100/50, Slider2 1/101/51, Slider3 2/102/52
- then everything works as expected, no mather how I move the sliders, after I switch to a tab, slider knobs are at the middle.
Test app
import { useState } from "react";
import { StyleSheet, Text, View, Button } from 'react-native';
import Slider from '@react-native-community/slider';
function TabSitch(props) {
return (
<View style={styles.tabSwitch}>
<Button title="tab1" onPress={() => props.onChange("tab1")} />
<Button title="tab2" onPress={() => props.onChange("tab2")} />
</View>
);
}
export default function App() {
const [activeTab, setActiveTab] = useState("tab1");
return (
<View style={styles.container}>
<TabSitch onChange={val => setActiveTab(val)} />
{activeTab === "tab1" && <View>
<Text>Tab1</Text>
<Text>Slider1</Text>
<Slider key="slider1" minimumValue={0} maximumValue={100} value={50} />
<Text>Slider2</Text>
<Slider key="slider2" minimumValue={1} maximumValue={101} value={51} />
</View>}
{activeTab === "tab2" && <View>
<Text>Tab2</Text>
<Text>Slider3</Text>
<Slider key="slider3" minimumValue={2} maximumValue={102} value={52} />
</View>}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#fff',
padding: 8,
},
tabSwitch: {
flexDirection: "row",
}
});
Same issue happens, when I always render both tabs but hide them by using style:
<View style={ { display: activeTab==="tab1" ? undefined: "none" } }>
...
<View style={ { display: activeTab==="tab2" ? undefined: "none" } }>
According to my tests, this case child components of invisible tabs don't unmount.