Separate to two examples: months and years

Author: ethanshar

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -3,7 +3,7 @@ import {View, Text, Incubator} from 'react-native-ui-lib';
 import _ from 'lodash';
 
 // Months
-const items = [
+const months = [
   'January',
   'February',
   'March',
@@ -19,16 +19,17 @@ const items = [
 ];
 
 // Years
-// const items = _.times(2000, i => i);
+const years = _.times(2020, i => i);
 
 export default () => {
   return (
     <View flex padding-page>
       <Text h1>Wheel Picker</Text>
       <View flex centerH paddingT-page>
-        <Incubator.WheelPicker
-          items={_.map(items, (i) => ({text: i, value: i}))}
-        />
+        <Text h3>Months</Text>
+        <Incubator.WheelPicker items={_.map(months, i => ({text: i, value: i}))} />
+        <Text h3 marginT-s5>Years</Text>
+        <Incubator.WheelPicker items={_.map(years, i => ({text: i, value: i}))} />
       </View>
     </View>
   );

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, FlatList} from 'react-native';
+import {TextStyle, FlatList, StyleProp} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {onScrollEvent, useValues} from 'react-native-redash';
 
@@ -17,7 +17,7 @@ const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 export interface WheelPickerProps {
   items?: ItemProps[];
   itemHeight?: number;
-  itemTextStyle?: TextStyle;
+  itemTextStyle?: StyleProp<TextStyle>;
   onChange: (item: ItemProps, index: number) => void;
 }