Unable to move the thumb position from outside the slider when having a custom thumbImage #712
Description
Environment
- react-native info output:
// react-native info
Expo v53
-
are you using the new architecture?
yes -
which version of react & react-native are you using?
React 19 and React Native v0.79.2
Description
When having a custom thumbImage, the position of the thumb is not able to be updated from outside the Slider. For example, if you have a useEffect that change the value of the slider, the thumb position is being moved when thumbImage is by default. However, with a custom thumbImage, it's not the case.
Reproducible Demo
If you have something like this, clicking the button should move well the thumb position to position 0:
const [value, setValue] = useState<number>(20)
return (
<>
<Button
title={'Change value'}
onPress={(): void => setValue(0)}
/>
<View style={tw`justify-center`}>
<Slider
minimumValue={0}
maximumValue={100}
step={5}
value={value}
onValueChange={handleChange}
minimumTrackTintColor="#62A6E433"
maximumTrackTintColor="#62A6E433"
thumbTintColor={'#62A6E4'}
/>
</>
)
However, if you add a custom thumbImage, when clicking the button, the thumb position does not go to position 0:
const [value, setValue] = useState<number>(20)
return (
<>
<Button
title={'Change value'}
onPress={(): void => setValue(0)}
/>
<View style={tw`justify-center`}>
<Slider
minimumValue={0}
maximumValue={100}
step={5}
value={value}
onValueChange={handleChange}
minimumTrackTintColor="#62A6E433"
maximumTrackTintColor="#62A6E433"
StepMarker={(): ReactElement => <View style={tw`h-5`}></View>}
thumbTintColor={'#62A6E4'}
thumbImage={require('@src/assets/images/SliderThumb.png') as ImageURISource}
/>
</>
)