Infra/Migrate Incubator.WheelPicker to reanimated 2 (#1379)

* Feat/Add Haptic to Incubator WheelPicker

* remove unneccesary change

* resolve conflicts

* update haptic timing

* minor formatting fix

* migrate to reanimated 2

* typings

* use useAnimatedReaction hook

* use useAnimatedReaction hook

* improve performance

* Migrate Incubator.WheelPicker to reanimated 2

Co-authored-by: Ethan Sharabi <[email protected]>

Author: lidord-wix

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {View, Text, Incubator, Colors, Typography, Button, Dialog} from 'react-native-ui-lib';
 import _ from 'lodash';
 
@@ -29,42 +29,42 @@ const useData = (initialMonth?: string, initialYear?: string, initialDays?: numb
   const [selectedDays, setDays] = useState<number | undefined>(initialDays);
   const [showDialog, setShowDialog] = useState(false);
 
-  const onPickDaysPress = () => {
+  const onPickDaysPress = useCallback(() => {
     setShowDialog(true);
-  };
+  }, []);
 
-  const onDialogDismissed = () => {
+  const onDialogDismissed = useCallback(() => {
     setShowDialog(false);
-  };
+  }, []);
 
-  const onMonthChange = (item: string | undefined, _: number) => {
+  const onMonthChange = useCallback((item: string | undefined, _: number) => {
     setMonth(item);
-  };
+  }, []);
 
-  const onYearChange = (item: string | undefined, _: number) => {
+  const onYearChange = useCallback((item: string | undefined, _: number) => {
     setYear(item);
-  };
+  }, []);
 
-  const onDaysChange = (item: number | undefined, _: number) => {
+  const onDaysChange = useCallback((item: number | undefined, _: number) => {
     setDays(item);
-  };
+  }, []);
 
-  const getMonths = useCallback(() => {
+  const monthItems = useMemo(() => {
     return _.map(months, item => ({label: item, value: item}));
   }, []);
 
-  const getYears = useCallback(() => {
+  const yearItems = useMemo(() => {
     return _.map(years, item => ({label: '' + item, value: item}));
   }, []);
 
-  const getDays = useCallback(() => {
+  const dayItems = useMemo(() => {
     return _.map(days, item => ({label: '' + item, value: item}));
   }, []);
 
   return {
-    getMonths,
-    getYears,
-    getDays,
+    monthItems,
+    yearItems,
+    dayItems,
     onMonthChange,
     onYearChange,
     onDaysChange,
@@ -81,13 +81,13 @@ export default () => {
   const {
     selectedMonth,
     onMonthChange,
-    getMonths,
+    monthItems,
     selectedYear,
     onYearChange,
-    getYears,
+    yearItems,
     selectedDays,
     onDaysChange,
-    getDays,
+    dayItems,
     onPickDaysPress,
     onDialogDismissed,
     showDialog
@@ -104,7 +104,7 @@ export default () => {
           onChange={onMonthChange}
           activeTextColor={Colors.primary}
           inactiveTextColor={Colors.grey20}
-          items={getMonths()}
+          items={monthItems}
           textStyle={Typography.text60R}
           selectedValue={selectedMonth}
         />
@@ -115,18 +115,13 @@ export default () => {
             onChange={onYearChange}
             numberOfVisibleRows={3}
             selectedValue={selectedYear}
-            items={getYears()}
+            items={yearItems}
           />
         </View>
 
-        <Button marginT-40 label={'Pick Days'} marginH-120 onPress={onPickDaysPress}/>
+        <Button marginT-40 label={'Pick Days'} marginH-100 onPress={onPickDaysPress}/>
         <Dialog width={'90%'} height={260} bottom visible={showDialog} onDismiss={onDialogDismissed}>
-          <Incubator.WheelPicker
-            onChange={onDaysChange}
-            selectedValue={selectedDays}
-            label={'Days'}
-            items={getDays()}
-          />
+          <Incubator.WheelPicker onChange={onDaysChange} selectedValue={selectedDays} label={'Days'} items={dayItems}/>
         </Dialog>
       </View>
     </View>

generatedTypes/incubator/WheelPicker/Item.d.ts

@@ -1,12 +1,13 @@
-/// <reference types="react" />
+import React from 'react';
 import { TextStyle } from 'react-native';
+import Animated from 'react-native-reanimated';
 export interface ItemProps {
     label: string;
     value: string | number;
 }
 interface InternalProps extends ItemProps {
     index: number;
-    offset: any;
+    offset: Animated.SharedValue<number>;
     itemHeight: number;
     activeColor?: string;
     inactiveColor?: string;
@@ -15,5 +16,5 @@ interface InternalProps extends ItemProps {
     testID?: string;
     centerH?: boolean;
 }
-declare const _default: ({ index, label, itemHeight, onSelect, offset, activeColor, inactiveColor, style, testID, centerH }: InternalProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ index, label, itemHeight, onSelect, offset, activeColor, inactiveColor, style, testID, centerH }: InternalProps) => JSX.Element>;
 export default _default;

src/incubator/WheelPicker/Item.tsx

@@ -1,6 +1,6 @@
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, memo} from 'react';
 import {TextStyle, StyleSheet} from 'react-native';
-import Animated, {interpolateColors} from 'react-native-reanimated';
+import Animated, {interpolateColor, useAnimatedStyle} from 'react-native-reanimated';
 import Text from '../../components/text';
 import TouchableOpacity from '../../components/touchableOpacity';
 import {Colors, Spacings} from '../../../src/style';
@@ -15,7 +15,7 @@ export interface ItemProps {
 
 interface InternalProps extends ItemProps {
   index: number;
-  offset: any;
+  offset: Animated.SharedValue<number>;
   itemHeight: number;
   activeColor?: string;
   inactiveColor?: string;
@@ -25,7 +25,7 @@ interface InternalProps extends ItemProps {
   centerH?: boolean;
 }
 
-export default ({
+export default memo(({
   index,
   label,
   itemHeight,
@@ -40,11 +40,11 @@ export default ({
   const selectItem = useCallback(() => onSelect(index), [index]);
   const itemOffset = index * itemHeight;
 
-  const color = useMemo(() => {
-    return interpolateColors(offset, {
-      inputRange: [itemOffset - itemHeight, itemOffset, itemOffset + itemHeight],
-      outputColorRange: [inactiveColor, activeColor, inactiveColor]
-    });
+  const animatedColorStyle = useAnimatedStyle(() => {
+    const color = interpolateColor(offset.value,
+      [itemOffset - itemHeight, itemOffset, itemOffset + itemHeight],
+      [inactiveColor, activeColor, inactiveColor]);
+    return {color};
   }, [itemHeight]);
 
   const containerStyle = useMemo(() => {
@@ -64,13 +64,12 @@ export default ({
       index={index}
       testID={testID}
     >
-      {/* @ts-ignore reanimated2*/}
-      <AnimatedText text60R style={{color, ...style}}>
+      <AnimatedText text60R style={[animatedColorStyle, style]}>
         {label}
       </AnimatedText>
     </AnimatedTouchableOpacity>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {

src/incubator/WheelPicker/index.tsx

@@ -1,8 +1,7 @@
 // TODO: Support style customization
 import React, {useCallback, useRef, useMemo, useEffect, useState} from 'react';
 import {TextStyle, ViewStyle, FlatList, NativeSyntheticEvent, NativeScrollEvent, StyleSheet} from 'react-native';
-import Animated from 'react-native-reanimated';
-import {onScrollEvent, useValues} from 'react-native-redash';
+import Animated, {useSharedValue, useAnimatedScrollHandler} from 'react-native-reanimated';
 import {Colors, Spacings} from 'style';
 import View from '../../components/view';
 import Fader, {FaderPosition} from '../../components/fader';
@@ -88,8 +87,10 @@ const WheelPicker = React.memo(({
   testID
 }: WheelPickerProps) => {
   const scrollView = useRef<Animated.ScrollView>();
-  const [offset] = useValues([0], []);
-  const onScroll = onScrollEvent({y: offset});
+  const offset = useSharedValue(0);
+  const scrollHandler = useAnimatedScrollHandler(e => {
+    offset.value = e.contentOffset.y;
+  });
 
   const {
     height,
@@ -112,6 +113,8 @@ const WheelPicker = React.memo(({
     controlComponent();
   });
 
+  const keyExtractor = useCallback((item: ItemProps, index: number) => `${item}.${index}`, []);
+
   /**
      * The picker is a controlled component. This means we expect the
      * to relay on `selectedValue` prop to be our
@@ -124,9 +127,9 @@ const WheelPicker = React.memo(({
     }
   };
 
-  const scrollToPassedIndex = () => {
+  const scrollToPassedIndex = useCallback(() => {
     scrollToIndex(currentIndex, false);
-  };
+  }, []);
 
   const scrollToIndex = (index: number, animated: boolean) => {
     // this is done to handle onMomentumScrollEnd not being called in Android:
@@ -144,12 +147,12 @@ const WheelPicker = React.memo(({
   },
   [itemHeight]);
 
-  const onValueChange = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+  const onValueChange = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
     setScrollOffset(event.nativeEvent.contentOffset.y);
 
     const {index, value} = getRowItemAtOffset(event.nativeEvent.contentOffset.y);
     onChange?.(value, index);
-  };
+  }, []);
 
   const renderItem = useCallback(({item, index}) => {
     return (
@@ -169,23 +172,23 @@ const WheelPicker = React.memo(({
   },
   [itemHeight]);
 
-  const renderSeparators = () => {
+  const separators = useMemo(() => {
     return (
       <View absF centerV pointerEvents="none">
         <View style={styles.separators}/>
       </View>
     );
-  };
+  }, []);
 
-  const renderLabel = () => {
+  const labelContainer = useMemo(() => {
     return (
       <View centerV>
         <Text marginL-s2 text80M {...labelProps} color={activeTextColor} style={labelStyle}>
           {label}
         </Text>
       </View>
     );
-  };
+  }, []);
 
   const fader = useMemo(() => (position: FaderPosition) => {
     return <Fader visible position={position} size={60}/>;
@@ -212,7 +215,7 @@ const WheelPicker = React.memo(({
             // @ts-ignore reanimated2
             keyExtractor={keyExtractor}
             scrollEventThrottle={100}
-            onScroll={onScroll}
+            onScroll={scrollHandler}
             onMomentumScrollEnd={onValueChange}
             showsVerticalScrollIndicator={false}
             onLayout={scrollToPassedIndex}
@@ -226,17 +229,15 @@ const WheelPicker = React.memo(({
             initialScrollIndex={currentIndex}
           />
         </View>
-        {label && renderLabel()}
+        {label && labelContainer}
       </View>
       {fader(FaderPosition.BOTTOM)}
       {fader(FaderPosition.TOP)}
-      {renderSeparators()}
+      {separators}
     </View>
   );
 });
 
-const keyExtractor = (item: ItemProps) => `${item.value}`;
-
 export default WheelPicker;
 
 const styles = StyleSheet.create({