Skip to content

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

Open
@liestig

Description

@liestig

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug reportSomething isn't working

    Type

    No type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions