callstack / react-native-slider

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

fix keyboard progress increment getting stuck at 6 #572

Closed vafada closed 8 months ago

vafada commented 9 months ago

Summary:

This fixes https://github.com/callstack/react-native-slider/issues/155

see https://github.com/callstack/react-native-slider/issues/155#issuecomment-1918183040 for details of the issue

The gist of it, on initial load ReactSlider calls

setMax(128) due to DEFAULT_TOTAL_STEPS = 128

which calls the AbsSeekBar.java's setMax()

https://cs.android.com/android/platform/superproject/main/+/main:frameworks/base/core/java/android/widget/AbsSeekBar.java;l=586-595;drc=c8c729556d69aa27fff24e5412140563fc1527af

and internally updates mKeyProgressIncrement to 6

that causes keyboard input to jump 6 steps:

https://android.googlesource.com/platform/frameworks/base/+/711efaa0297f845c60a1de0acce680493f90bf02/core/java/android/widget/AbsSeekBar.java#1053

after setting ReactSlider.setMaxValue, if max is not high enough, the keyProgressIncrement will still get stuck at 6

due to this logic in AbsSeekBar:

https://android.googlesource.com/platform/frameworks/base/+/711efaa0297f845c60a1de0acce680493f90bf02/core/java/android/widget/AbsSeekBar.java#590

Test Plan:

Render a simple Slider

import React, {useState} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  View,
} from 'react-native';

import Slider from '@react-native-community/slider';

const App = () => {
  const [value, setValue] = useState(10);

  return (
    <SafeAreaView style={styles.homeScreenContainer}>
      <View>
        <Text testID="testTextId" style={styles.title}>
          Value: {value}
        </Text>
        <Slider
          step={1}
          maximumValue={30}
            minimumValue={0}
            style={styles.slider}
            value={value}
            thumbTintColor={pageViewPositionSlider.thumbColor}
            maximumTrackTintColor={pageViewPositionSlider.trackColor}
            minimumTrackTintColor={pageViewPositionSlider.trackColor}
          onValueChange={setValue}
        />
      </View>
    </SafeAreaView>
  );
};

export default App;

const pageViewPositionSlider = {
  trackColor: '#ABABAB',
  thumbColor: '#1411AB',
  style: {
    width: '100%',
  },
};

const styles = StyleSheet.create({
  slider: {
    width: '100%',
  },
  pagerViewContainer: {
    flex: 1,
  },
  homeScreenContainer: {
    flex: 1,
  },
  scrollView: {
    backgroundColor: '#F5FCFF',
  },
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 20,
  },
  title: {
    fontSize: 30,
    color: pageViewPositionSlider.thumbColor,
    textAlign: 'center',
    width: '100%',
    marginVertical: 20,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    fontSize: 20,
  },
  sliderWidget: {
    marginVertical: 30,
  },
});

use the keyboard to navigate to the slider (tabs on android or use a virtual keyboard)

Verify that LEFT and RIGHT arrow moves the thumb according to the step prop