callstack / react-native-slider

React Native component exposing Slider from iOS and SeekBar from Android
MIT License
1.19k stars 267 forks source link

Changes in value trigger onSlidingComplete callback for Android #487

Closed 1987cr closed 1 year ago

1987cr commented 1 year ago

Environment

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 66.94 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.0 - ~/.volta/tools/image/node/16.18.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 8.19.2 - ~/.volta/tools/image/node/16.18.0/bin/npm
    Watchman: 2022.09.12.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 27, 28, 29, 30, 31, 32, 33
      Build Tools: 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.1, 28.0.2, 28.0.3, 29.0.0, 29.0.1, 29.0.2, 29.0.3, 30.0.0, 30.0.1, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 33.0.0
      System Images: android-32 | Google APIs ARM 64 v8a, android-33 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: ^10.0.0 => 10.1.3 
    react: ^18.2.0 => 18.2.0 
    react-native: ^0.70.3 => 0.70.6 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Description

In v4.4.1, every time value prop changes, onSlidingComplete callback is called.

Reproducible Demo

import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import Slider from '@react-native-community/slider';

export default function App() {
  const [progress, setProgress] = React.useState(0);

  const onSlidingStart = () => {
    console.log("sliding start");
  }

  const onSlidingComplete = () => {
    console.log("sliding complete");
  }

  return (
    <View style={styles.container}>
      <Button title="Increment Progress" onPress={() => setProgress(p => p + 0.1)} />
      <Slider
        minimumTrackTintColor="#000"
        maximumTrackTintColor="#AAA"
        minimumValue={0}
        maximumValue={1}
        value={progress}
        onSlidingComplete={onSlidingComplete}
        onSlidingStart={onSlidingStart}
        tapToSeek
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20
  },
});
BartoszKlonowski commented 1 year ago

Hello @1987cr! Thank you for taking the time to create an issue with full repro and details 👍 I can reproduce the issue and I already have a fix I can implement, but before launching a fixing PR I will need to review the way other platforms work so we have a common behavior across all of them.