Closed vafada closed 8 months ago
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
ReactSlider
setMax(128) due to DEFAULT_TOTAL_STEPS = 128
setMax(128)
DEFAULT_TOTAL_STEPS = 128
which calls the AbsSeekBar.java's setMax()
AbsSeekBar.java
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
mKeyProgressIncrement
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
ReactSlider.setMaxValue
max
keyProgressIncrement
due to this logic in AbsSeekBar:
AbsSeekBar
https://android.googlesource.com/platform/frameworks/base/+/711efaa0297f845c60a1de0acce680493f90bf02/core/java/android/widget/AbsSeekBar.java#590
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
step
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
callssetMax(128)
due toDEFAULT_TOTAL_STEPS = 128
which calls the
AbsSeekBar.java
'ssetMax()
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
to6
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
, ifmax
is not high enough, thekeyProgressIncrement
will still get stuck at6
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
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