Use Flatlist for WheelPicker for better performance when having big lists

Author: ethanshar

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {View, Text, Incubator} from 'react-native-ui-lib';
 import _ from 'lodash';
 
+// Months
 const items = [
   'January',
   'February',
@@ -17,6 +18,9 @@ const items = [
   'December'
 ];
 
+// Years
+// const items = _.times(2000, i => i);
+
 export default () => {
   return (
     <View flex padding-page>

generatedTypes/incubator/index.d.ts

@@ -1,3 +1,4 @@
 export { default as TabController } from './TabController';
 export { default as TextField } from './TextField';
 export { default as TouchableOpacity } from './TouchableOpacity';
+export { default as WheelPicker } from './WheelPicker';

src/incubator/WheelPicker/Item.tsx

@@ -58,7 +58,8 @@ export default ({
         itemOffset,
         itemOffset + 2 * itemHeight
       ],
-      outputRange: [0.8, 1, 0.8]
+      // outputRange: [0.8, 1, 0.8], // with scale change
+      outputRange: [1, 1, 1],
     });
   }, [itemHeight]);
 

src/incubator/WheelPicker/index.tsx

@@ -3,7 +3,7 @@
 // TODO: Support control of visible items
 import _ from 'lodash';
 import React, {useCallback, useRef} from 'react';
-import {TextStyle} from 'react-native';
+import {TextStyle, FlatList} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {onScrollEvent, useValues} from 'react-native-redash';
 
@@ -12,29 +12,25 @@ import {Constants} from '../../helpers';
 
 import Item, {ItemProps} from './Item';
 
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+
 export interface WheelPickerProps {
   items?: ItemProps[];
   itemHeight?: number;
   itemTextStyle?: TextStyle;
   onChange: (item: ItemProps, index: number) => void;
 }
 
-const WheelPicker = ({
-  items,
-  itemHeight = 48,
-  itemTextStyle
-}: WheelPickerProps) => {
+const WheelPicker = ({items, itemHeight = 48, itemTextStyle}: WheelPickerProps) => {
   const height = itemHeight * 4;
   const scrollview = useRef<Animated.ScrollView>();
   const [offset] = useValues([0], []);
   const onScroll = onScrollEvent({y: offset});
 
   const selectItem = useCallback(
-    (index) => {
+    index => {
       if (scrollview.current) {
-        scrollview.current
-          .getNode()
-          .scrollTo({y: index * itemHeight, animated: true});
+        scrollview.current.getNode().scrollTo({y: index * itemHeight, animated: true});
       }
     },
     [itemHeight]
@@ -44,10 +40,25 @@ const WheelPicker = ({
     // TODO: need to implement on change event that calc the current selected index
   }, [itemHeight]);
 
+  const renderItem = useCallback(({item, index}) => {
+    return (
+      <Item
+        index={index}
+        itemHeight={itemHeight}
+        offset={offset}
+        textStyle={itemTextStyle}
+        {...item}
+        onSelect={selectItem}
+      />
+    );
+  }, []);
+
   return (
     <View>
       <View width={250} height={height} br20>
-        <Animated.ScrollView
+        <AnimatedFlatList
+          data={items}
+          keyExtractor={keyExtractor}
           scrollEventThrottle={16}
           onScroll={onScroll}
           onMomentumScrollEnd={onChange}
@@ -59,21 +70,8 @@ const WheelPicker = ({
           }}
           snapToInterval={itemHeight}
           decelerationRate={Constants.isAndroid ? 0.98 : 'normal'}
-        >
-          {_.map(items, (item, index) => {
-            return (
-              <Item
-                key={item.value}
-                index={index}
-                itemHeight={itemHeight}
-                offset={offset}
-                textStyle={itemTextStyle}
-                {...item}
-                onSelect={selectItem}
-              />
-            );
-          })}
-        </Animated.ScrollView>
+          renderItem={renderItem}
+        />
         <View absF centerV pointerEvents="none">
           <View
             style={{
@@ -88,4 +86,6 @@ const WheelPicker = ({
   );
 };
 
+const keyExtractor = (item: ItemProps) => item.value;
+
 export default WheelPicker;