@momo-kits/date-picker 0.159.1-beta.4 → 0.160.1-beta.7

package/WheelPicker.tsx

@@ -7,13 +7,16 @@ import React, {
   useRef,
 } from 'react';
 import {
-  Animated,
   FlatList,
   ListRenderItemInfo,
   NativeScrollEvent,
   NativeSyntheticEvent,
   View,
 } from 'react-native';
+import Animated, {
+  useAnimatedScrollHandler,
+  useSharedValue,
+} from 'react-native-reanimated';
 import styles from './styles';
 import { ApplicationContext } from '@momo-kits/foundation';
 import { WheelPickerProps } from './types';
@@ -30,10 +33,16 @@ const WheelPicker: FC<WheelPickerProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const flatListRef = useRef<any>(null);
-  const scrollAnimatedValue = useRef(new Animated.Value(0)).current;
+  const scrollAnimatedValue = useSharedValue(0);
   const canMomentum = useRef(false);
   const initItemNum = 15;
 
+  const onScroll = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollAnimatedValue.value = event.contentOffset.y;
+    },
+  });
+
   useEffect(() => {
     debouncedScrollEnd();
     return () => {
@@ -144,12 +153,8 @@ const WheelPicker: FC<WheelPickerProps> = ({
         getItemLayout={getItemLayout}
         onScrollToIndexFailed={onScrollToIndexFailed}
         onMomentumScrollBegin={onMomentumScrollBegin}
-        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollAnimatedValue } } }],
-          {
-            useNativeDriver: true,
-          },
-        )}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
         onMomentumScrollEnd={onMomentumScrollEnd}
         ref={flatListRef}
         showsVerticalScrollIndicator={false}

package/WheelPickerItem.tsx

@@ -1,5 +1,9 @@
 import React, { FC, memo, useContext } from 'react';
-import { Animated } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 import styles from './styles';
 import { ApplicationContext, useScaleSize } from '@momo-kits/foundation';
 import { WheelPickerItemProps } from './types';
@@ -13,43 +17,47 @@ const WheelPickerItem: FC<WheelPickerItemProps> = ({
   const { theme } = useContext(ApplicationContext);
   const scaledFontSize = useScaleSize(16);
   const scaledLineHeight = useScaleSize(22);
-  const position = Animated.divide(scrollAnimatedValue, itemSize);
-  const distance = Animated.subtract(index, position);
-  const opacity =
-    distance.interpolate({
-      inputRange: [0, 1, 2, 3, 4],
-      outputRange: [0.4, 0.8, 1, 0.8, 0.4],
-      extrapolate: 'clamp',
-    }) || 1;
-  const scale =
-    distance.interpolate({
-      inputRange: [0, 1, 2, 3, 4],
-      outputRange: [0.87, 0.87, 1, 0.87, 0.87],
-      extrapolate: 'clamp',
-    }) || 1;
+
+  const containerStyle = useAnimatedStyle(() => {
+    const distance = index - scrollAnimatedValue.value / itemSize;
+    const opacity = interpolate(
+      distance,
+      [0, 1, 2, 3, 4],
+      [0.4, 0.8, 1, 0.8, 0.4],
+      Extrapolation.CLAMP,
+    );
+    return { opacity };
+  });
+
+  const textStyle = useAnimatedStyle(() => {
+    const distance = index - scrollAnimatedValue.value / itemSize;
+    const scale = interpolate(
+      distance,
+      [0, 1, 2, 3, 4],
+      [0.87, 0.87, 1, 0.87, 0.87],
+      Extrapolation.CLAMP,
+    );
+    return { transform: [{ scale }] };
+  });
 
   return (
     <Animated.View
       style={[
         styles.wheelItem,
-        {
-          opacity,
-          height: itemSize,
-        },
+        { height: itemSize },
+        containerStyle,
       ]}
     >
       <Animated.Text
         allowFontScaling={false}
-        style={{
-          fontFamily: `${theme.font}-Semibold`,
-          transform: [
-            {
-              scale,
-            },
-          ],
-          fontSize: scaledFontSize,
-          lineHeight: scaledLineHeight,
-        }}
+        style={[
+          {
+            fontFamily: `${theme.font}-Semibold`,
+            fontSize: scaledFontSize,
+            lineHeight: scaledLineHeight,
+          },
+          textStyle,
+        ]}
       >
         {item}
       </Animated.Text>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/date-picker",
-    "version": "0.159.1-beta.4",
+    "version": "0.160.1-beta.7",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/types.ts

@@ -1,5 +1,5 @@
-import {Animated, ViewStyle} from 'react-native';
-import AnimatedValue = Animated.AnimatedValue;
+import {ViewStyle} from 'react-native';
+import type {SharedValue} from 'react-native-reanimated';
 
 export type DateTimePickerProps = {
   /**
@@ -97,6 +97,6 @@ export type WheelPickerProps = {
 export type WheelPickerItemProps = {
   item: number;
   index: number;
-  scrollAnimatedValue: AnimatedValue;
+  scrollAnimatedValue: SharedValue<number>;
   itemSize: number;
 };