Picker disappears when scrolling too fast (When Using Virtualized Wheel Picker)

[a25osman]

When scrolling too fast with a VirtualizedWheelPicker, the picker data disappears from view (I think it moves off screen).

Minimal Reproducible Example you can try in an expo snack

import { Text, SafeAreaView, View, StyleSheet } from 'react-native';

import { useState } from 'react';
import WheelPicker, {
  withVirtualized,
} from '@quidone/react-native-wheel-picker';

const weightIntegersData = Array.from({ length: 499 }, (_, i) => ({
  value: i + 40,
}));

const VirtualizedWheelPicker = withVirtualized(WheelPicker);

export default function App() {
  const [weightInteger, setWeightInteger] = useState(150);
  return (
    <SafeAreaView style={styles.container}>
      <View style={{ flex: 1, justifyContent: 'center' }}>
        <VirtualizedWheelPicker
          data={weightIntegersData}
          value={weightInteger}
          onValueChanged={({ item: { value } }) => setWeightInteger(value)}
          enableScrollByTapOnItem
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

ScreenRecording.picker.bug.disappearing.mov

[rozhkovs]

@a25osman Thanks for opening the issue!

Which build are you running — release or debug? Expo Snack is usually in Debug.

You can try tweaking the maxToRenderPerBatch, windowSize, and updateCellsBatchingPeriod settings to achieve the best performance.

A non-trivial option is integrating FlashList into the WheelPicker, but I don’t have the time for it right now and don’t see it as a high priority yet.