tapToSeek not calling `onValueChanged` or `onSlidingComplete`

I read https://github.com/callstack/react-native-slider/issues/252 and it sounds very similar.

I’m using version 4.1.3

Environment

info Fetching system and libraries information...
System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 420.35 MB / 32.00 GB
    Shell: 5.1.4 - /usr/local/bin/bash
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.21.1 - ~/.dev/yarn/1.21.1/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.5/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.2 - /Users/colinta/.gem/ruby/2.6.1/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 29.0.2, 30.0.2
      System Images: android-21 | Intel x86 Atom_64, android-21 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7042882
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242-release - /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/javac
    Python: 3.8.0 - /Users/colinta/.asdf/shims/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.65.1 => 0.65.1 
  npmGlobalPackages:
    *react-native*: Not Found

Description

https://user-images.githubusercontent.com/27570/137363127-d19a5082-4b3f-49e0-9de9-100c53d7561f.mov

Reproducible Demo

Another bug I found was that updating the value using onValueChange resulted in lots of jittering, but I solved by using onSlidingComplete instead. But tapping on a location does not call setValue (the label doesn’t update, and the label is based on value not distance.

const SliderBox = ({
  distance,
  unit,
  onValueChange,
}: {
  distance: number,
  unit: 'miles' | 'km',
  onValueChange: (_: number) => void,
}) => {
  const [value, setValue] = useState(distance)
  const rounded = Math.round(value * 10).toString().replace(/(\d*)(\d)/, '$1.$2').replace(/^\./, '0.')
  return (
    <View style={{flexDirection: 'row', alignItems: 'center'}}>
      <Slider
        style={{flex: 1}}
        value={value}
        tapToSeek={true}
        step={1}
        minimumValue={0}
        maximumValue={100}
        onValueChange={setValue}
        onSlidingComplete={(number: number) => {
          console.log({number});
          onValueChange(number)
        }}
      />
      <View style={{paddingLeft: lightTheme.spacing.xs}}>
        <Text>{rounded} {unit}</Text>
      </View>
    </View>
  )
}

[waheedakhtar694]

updating to the latest version solves the problem for me.

[waheedakhtar694]

@BartoszKlonowski I am having the same issue, tapToSeek not triggers any update method either onValueChange or onSlidingComplete, it changes the position on the UI but not triggers any method.