Description

When inserting a list with >30 label-value pairs, the WheelPicker becomes almost unresponsive and slow.

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

1. Create a Wheelpicker component in your return statement.
2. Insert a list with more than 30 label-value pairs.
3. Open the app and try scrolling through the WheelPicker.
4. Lagging should be noticeable.

Expected behaviour

The WheelPicker should be easy to use and scroll smoothly.

Actual behaviour

The WheelPicker is lagging, causing confusion and incorrect feedback.

More Info

The issue seems to reside with the component assigning an event's contentOffset.y to a SharedValue offset on every scroll.

On their own, whether assigning a constant value to the SharedValue or logging contentOffset.y on every scroll, doesn't seem to impact performance.

My conclusion is that assigning an ever-changing variable to offset leads somehow to a behaviour which internally that messes with the rendering, causing stuttering.

How to remove lag

1. Go to node_modules/react-native-ui-lib/src/components/WheelPicker/index.js
2. Find the constant scrollHandler in index.js
3. comment out the following line:

 offset.value = e.contentOffset.y;

Code snippet

const range = (min, max) => {
        console.log(min, max, "minmax")
        var range = new Array(max-min)
        for(let i=min; i <= max; i++)
            range[i-min] = i
        return range.map(value => {return {label: value.toString(), value}})
    }
const fieldRange = useMemo(()=>range(dialogOptions.min, dialogOptions.max), [])
.
.
.
<WheelPicker 
              numberOfVisibleRows={5}
              initialValue={'0'} 
              items={fieldRange}>
                    
 </WheelPicker>

Screenshots/Video

Expected behaviour:

Actual behaviour:

Environment

• React Native version: 0.70.5
• React Native UI Lib version: ^7.18.3

Affected platforms

• Android
• iOS
• Web