@momo-kits/date-picker 0.161.2-beta.7 → 0.161.2-beta.8

package/WheelPicker.tsx

@@ -7,16 +7,13 @@ 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';
@@ -33,16 +30,10 @@ const WheelPicker: FC<WheelPickerProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const flatListRef = useRef<any>(null);
-  const scrollAnimatedValue = useSharedValue(0);
+  const scrollAnimatedValue = useRef(new Animated.Value(0)).current;
   const canMomentum = useRef(false);
   const initItemNum = 15;
 
-  const onScroll = useAnimatedScrollHandler({
-    onScroll: (event) => {
-      scrollAnimatedValue.value = event.contentOffset.y;
-    },
-  });
-
   useEffect(() => {
     debouncedScrollEnd();
     return () => {
@@ -153,8 +144,12 @@ const WheelPicker: FC<WheelPickerProps> = ({
         getItemLayout={getItemLayout}
         onScrollToIndexFailed={onScrollToIndexFailed}
         onMomentumScrollBegin={onMomentumScrollBegin}
-        onScroll={onScroll}
-        scrollEventThrottle={16}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollAnimatedValue } } }],
+          {
+            useNativeDriver: true,
+          },
+        )}
         onMomentumScrollEnd={onMomentumScrollEnd}
         ref={flatListRef}
         showsVerticalScrollIndicator={false}

package/WheelPickerItem.tsx

@@ -1,9 +1,5 @@
 import React, { FC, memo, useContext } from 'react';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import { Animated } from 'react-native';
 import styles from './styles';
 import { ApplicationContext, useScaleSize } from '@momo-kits/foundation';
 import { WheelPickerItemProps } from './types';
@@ -17,47 +13,43 @@ const WheelPickerItem: FC<WheelPickerItemProps> = ({
   const { theme } = useContext(ApplicationContext);
   const scaledFontSize = useScaleSize(16);
   const scaledLineHeight = useScaleSize(22);
-
-  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 }] };
-  });
+  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;
 
   return (
     <Animated.View
       style={[
         styles.wheelItem,
-        { height: itemSize },
-        containerStyle,
+        {
+          opacity,
+          height: itemSize,
+        },
       ]}
     >
       <Animated.Text
         allowFontScaling={false}
-        style={[
-          {
-            fontFamily: `${theme.font}-Semibold`,
-            fontSize: scaledFontSize,
-            lineHeight: scaledLineHeight,
-          },
-          textStyle,
-        ]}
+        style={{
+          fontFamily: `${theme.font}-Semibold`,
+          transform: [
+            {
+              scale,
+            },
+          ],
+          fontSize: scaledFontSize,
+          lineHeight: scaledLineHeight,
+        }}
       >
         {item}
       </Animated.Text>

package/package.json

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

package/types.ts

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