Picker doesn't update activeTextColor when scroll fast

[woowalker]

Description

Related to

• 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

• 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.
[email protected]
[email protected]
[email protected]
[email protected]

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 [email protected] 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