Unable to move the thumb position from outside the slider when having a custom thumbImage

Bắt đầu bằng cách tái hiện ví dụ Slider được kiểm soát với thumbImage tùy chỉnh và so sánh với hành vi thumb mặc định. Theo dõi cách các thay đổi giá trị từ bên ngoài được áp dụng khi thumbImage được thiết lập; hoàn thành có nghĩa là khi nhấn nút, thumb tùy chỉnh di chuyển đến vị trí 0 giống như khi không có hình ảnh tùy chỉnh.

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}
            />
    </>
)