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

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[BastianGanze]

FYI I am using most up to date version of expo now with react-native-reanimated at version 3.16.1 and the issue is still not fixed on android. Here is a patch for the current react native-ui-lib version.

react-native-ui-lib+7.36.0.patch

[adids1221]

Hi @BastianGanze, if you have a patch with fix in ui-lib we are more then welcoming PR's.
About supporting RN new Arc, we are currently supporting 0.73 and planing on supporting RN 0.77 in the next upgrade.

[BastianGanze]

@adids1221 Opened a PR. Not sure if that is a real fix or just a workaround, I think you can argue both. Lemme know if it makes sense.