Picker doesn't update activeTextColor when scroll fast

[woowalker]

Description

Related to

• [x] Components
• [ ] Demo
• [ ] Docs
• [ ] Typings

Steps to reproduce

Scroll the panel fast

Expected behavior

When scroll stop the focus item will apply activeTextColor style

Actual behavior

Not

More Info

Code snippet

<WheelPicker
  items={[{ label: 'Yes', value: 'yes' }, { label: 'No', value: 'no' }, { label: 'Maybe', value: 'maybe' }]}
  activeTextColor='red'
  inactiveTextColor='yellow'
  onChange={(item) => console.log('changed', item)}
/>

Screenshots/Video

Environment

• React Native version: 18.2.0
• React Native UI Lib version: 7.16.0

Affected platforms

• [x] Android
• [ ] iOS
• [ ] Web

[adids1221]

Hi @woowalker, We are currently supporting react-native 0.71.x. I didn't managed to reproduce the issue when using react-native0 .71 on pixel 6 api 33. Please check if this issue reproduce when you are using react-native0 .71 and update.

[BastianGanze]

Facing the same issue on a pixel 7 with api 34. react-native@0.74.5 react-native-ui-lib@7.32.0 react-native-reanimated@3.10.1 react-native-gesture-handler@2.16.1

Any chance you will support newer react-native versions in the near future? This bug seems to have existed on newer versions for a while now.

[BastianGanze]

Okay I have tracked down the issue being with the useAnimatedScrollHandler of react-native-reanimated. This issue is known and was fixed in 3.12. I am using expo so I cannot upgrade beyond 3.10.1. The problem is that the offset in WheelPicker is not updated correctly due to useAnimatedScrollHandler being buggy. I have created a patch for react-native-ui-lib@7.32.0 for everyone in my circumstances. This will at the very least update the offset once a value is chosen. Still looks a bit clunky but no longer broken. I hope they upgrade the react-native-reanimated version soon.

react-native-ui-lib+7.32.0.patch