erksch / react-native-wheely

An all JavaScript wheel picker for react-native without any native code.
413 stars 59 forks source link

Selected value skips after being selected #49

Open ikurowski opened 1 year ago

ikurowski commented 1 year ago

Hello,

I noticed that sometimes when i select some value it skips from selected indicator. Like in this video:

https://user-images.githubusercontent.com/20643582/222527540-53486ae7-88e9-4450-b124-845f5ee18a48.mp4

For example, in the 9th second of the video skip occured. Next one in 20th.

My code:

       ...
       const [selectedIndex, setSelectedIndex] = useState(0);
       ...
        <WheelPicker
            selectedIndex={selectedIndex}
            options={wheelPickerNumbers} // wheelPickerNumbers - array with numbers as strings from 1 to 60
            onChange={index => {
              setSelectedIndex(index);
              updateTimeFunction(Number(wheelPickerNumbers[index]) * 60000);
            }}
            itemTextStyle={{...styles.numbers, color: colors.text}}
            selectedIndicatorStyle={{
              ...styles.selectedIndicatorStyle,
              backgroundColor: colors.primary,
            }}
            itemHeight={moderateScale(30)}
          />

I tested only on IOS. Thank you.

EDIT. When I change itemHeight to moderateScale(35), the picker works fine.

c-goettert commented 1 year ago

I am facing the same issue.

c-goettert commented 1 year ago

We are also using some scaling function, and it seems to be occurring if the item height is set to a non-integer (e.g. 43.5). For me itemHeight={Math.round(itemHeightVar)} did the trick.

ikurowski commented 1 year ago

We are also using some scaling function, and it seems to be occurring if the item height is set to a non-integer (e.g. 43.5). For me itemHeight={Math.round(itemHeightVar)} did the trick.

That worked for me either. Thank you :)