@momo-kits/foundation 0.112.1-beta.8 → 0.112.1-doc.0

package/Application/BottomSheet.tsx

@@ -16,8 +16,16 @@ import {BottomSheetParams} from './types';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {useHeaderHeight} from '@react-navigation/stack';
-import Animated, {Easing, Extrapolate} from 'react-native-reanimated';
+import {useHeaderHeight} from '@react-navigation/elements';
+import Animated, {
+  Easing,
+  Extrapolate,
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withSpring,
+  interpolate,
+} from 'react-native-reanimated';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
@@ -42,19 +50,25 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const customEasingOpen = Easing.bezier(0.05, 0.7, 0.1, 1);
   const customEasingClose = Easing.bezier(0.3, 0.0, 0.8, 0.15);
 
-  const translateY = useRef(new Animated.Value(heightDevice)).current;
+  const translateY = useSharedValue(heightDevice);
 
-  const openAnimation = Animated.timing(translateY, {
-    toValue: 0,
-    duration: 350,
-    easing: customEasingOpen,
-  });
+  const openAnimation = () => {
+    translateY.value = withTiming(0, {
+      duration: 350,
+      easing: customEasingOpen,
+    });
+  };
 
-  const closeAnimation = Animated.timing(translateY, {
-    toValue: heightDevice,
-    duration: 200,
-    easing: customEasingClose,
-  });
+  const closeAnimation = (callback = () => {}) => {
+    translateY.value = withTiming(
+      heightDevice,
+      {
+        duration: 200,
+        easing: customEasingClose,
+      },
+      callback,
+    );
+  };
 
   const panResponder = useRef(
     PanResponder.create({
@@ -63,7 +77,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         draggable && gestureState.dy > 0,
       onPanResponderMove: (_, gestureState) => {
         if (gestureState.dy > 0) {
-          translateY.setValue(gestureState.dy);
+          translateY.value = gestureState.dy;
         }
       },
       onPanResponderRelease: (_, gestureState) => {
@@ -71,18 +85,17 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           action.current = 'gesture';
           onDismiss();
         } else {
-          Animated.spring(translateY, {
-            toValue: 0,
+          translateY.value = withSpring(0, {
             damping: 20,
             mass: 1,
             stiffness: 100,
             overshootClamping: false,
             restSpeedThreshold: 0.001,
             restDisplacementThreshold: 0.001,
-          }).start();
+          });
         }
       },
-    })
+    }),
   ).current;
 
   let Container: any = View;
@@ -98,8 +111,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
    * emit dismiss event
    */
   useEffect(() => {
-    translateY.setValue(heightDevice);
-    openAnimation.start();
+    translateY.value = heightDevice;
+    openAnimation();
     return () => {
       props.route.params?.onDismiss?.(action.current);
     };
@@ -112,7 +125,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     if (barrierDismissible && !force) {
       return;
     }
-    closeAnimation.start(() => {
+    closeAnimation(() => {
       setImmediate(() => {
         navigator?.pop();
         callback?.();
@@ -176,6 +189,12 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     );
   }, []);
 
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{translateY: translateY.value}],
+    };
+  });
+
   return (
     <Container
       transparent
@@ -203,20 +222,18 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             style={[
               styles.overlay,
               {
-                opacity: translateY.interpolate({
-                  inputRange: [0, heightDevice],
-                  outputRange: [1, 0],
-                  extrapolate: Extrapolate.CLAMP,
-                }),
+                opacity: interpolate(
+                  translateY.value,
+                  [0, heightDevice],
+                  [1, 0],
+                  Extrapolate.CLAMP,
+                ),
               },
             ]}
           />
         </Pressable>
 
-        <Animated.View
-          style={{
-            transform: [{translateY}],
-          }}>
+        <Animated.View style={animatedStyle}>
           {renderHeader()}
           <View style={{backgroundColor: backgroundColor}}>
             <Screen

package/Application/BottomTab/index.tsx

@@ -1,7 +1,11 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {NavigationContainer} from '@react-navigation/native';
+import {
+  NavigationContainer,
+  NavigationIndependentTree,
+  useFocusEffect,
+} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
-import React, {useContext, useEffect} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {Animated, Platform, StatusBar} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Colors} from '../../Consts';
@@ -11,7 +15,7 @@ import {ApplicationContext} from '../index';
 import StackScreen from '../StackScreen';
 import {BottomTabProps} from '../types';
 import {getOptions, getStackOptions} from '../utils';
-import BottomTabBar from './BottomTabBar';
+// import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -21,45 +25,42 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;
-  const opacity = new Animated.Value(opacityValue);
-  const scale = new Animated.Value(scaleValue);
 
-  useEffect(() => {
-    const unsubscribeFocus = navigation.addListener('focus', () => {
+  const opacity = useRef(new Animated.Value(opacityValue));
+  const scale = useRef(new Animated.Value(scaleValue));
+
+  useFocusEffect(
+    React.useCallback(() => {
       Animated.parallel([
-        Animated.timing(opacity, {
+        Animated.timing(opacity.current, {
           toValue: 1,
           duration: 200,
           useNativeDriver: true,
         }),
-        Animated.timing(scale, {
+        Animated.timing(scale.current, {
           toValue: 1,
           duration: 200,
           useNativeDriver: true,
         }),
       ]).start();
-    });
-
-    const unsubscribeBlur = navigation.addListener('blur', () => {
-      Animated.parallel([
-        Animated.timing(opacity, {
-          toValue: opacityValue,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-        Animated.timing(scale, {
-          toValue: scaleValue,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-      ]).start();
-    });
-
-    return () => {
-      unsubscribeFocus();
-      unsubscribeBlur();
-    };
-  }, [navigation]);
+      return () => {
+        if (navigation.getState().index !== route?.params.index) {
+          Animated.parallel([
+            Animated.timing(opacity.current, {
+              toValue: opacityValue,
+              duration: 200,
+              useNativeDriver: true,
+            }),
+            Animated.timing(scale.current, {
+              toValue: scaleValue,
+              duration: 200,
+              useNativeDriver: true,
+            }),
+          ]).start();
+        }
+      };
+    }, [navigation, route?.params.index]),
+  );
 
   let stackOptions = {};
   if (options) {
@@ -68,7 +69,12 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
 
   if (nested) {
     return (
-      <Animated.View style={{flex: 1, transform: [{scale}]}}>
+      <Animated.View
+        style={{
+          flex: 1,
+          opacity: opacity.current,
+          transform: [{scale: scale.current}],
+        }}>
         <Stack.Navigator>
           <Stack.Screen
             name="Stack"
@@ -86,21 +92,28 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
   }
 
   return (
-    <Animated.View style={{flex: 1, opacity, transform: [{scale}]}}>
-      <NavigationContainer independent={true}>
-        <Stack.Navigator>
-          <Stack.Screen
-            name="Stack"
-            component={StackScreen}
-            initialParams={{
-              screen,
-              options: stackOptions,
-              initialParams,
-            }}
-            options={{...getStackOptions(), ...options}}
-          />
-        </Stack.Navigator>
-      </NavigationContainer>
+    <Animated.View
+      style={{
+        flex: 1,
+        opacity: opacity.current,
+        transform: [{scale: scale.current}],
+      }}>
+      <NavigationIndependentTree>
+        <NavigationContainer>
+          <Stack.Navigator>
+            <Stack.Screen
+              name="Stack"
+              component={StackScreen}
+              initialParams={{
+                screen,
+                options: stackOptions,
+                initialParams,
+              }}
+              options={{...getStackOptions(), ...options}}
+            />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </NavigationIndependentTree>
     </Animated.View>
   );
 };
@@ -113,7 +126,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
   initialRouteName,
   floatingButton,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const {theme, navigator} = useContext(ApplicationContext);
   const insets = useSafeAreaInsets();
 
   useEffect(() => {
@@ -122,7 +135,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
       headerTransparent: true,
       headerBackground: undefined,
     });
-  }, []);
+  }, [navigation]);
 
   const handler: {
     tabPress?: (e: any) => void;
@@ -131,6 +144,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
     state?: (e: any) => void;
   } = {
     tabPress: e => {
+      navigator?.maxApi?.triggerEventVibration?.('light');
       listeners?.tabPress?.(e);
     },
     focus: e => {
@@ -146,13 +160,13 @@ const BottomTab: React.FC<BottomTabProps> = ({
     <Tab.Navigator
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
-      tabBar={props => (
-        <BottomTabBar
-          {...props}
-          floatingButton={floatingButton}
-          inactiveTintColor={theme.colors.text.hint}
-        />
-      )}
+      // tabBar={props => (
+      //   <BottomTabBar
+      //     {...props}
+      //     floatingButton={floatingButton}
+      //     inactiveTintColor={theme.colors.text.hint}
+      //   />
+      // )}
       tabBarOptions={{
         style: {
           height: 64 + Math.min(insets.bottom, 21),
@@ -163,7 +177,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
         },
         inactiveTintColor: theme.colors.text.secondary,
       }}>
-      {tabs.map(item => {
+      {tabs.map((item, index) => {
         const isNum = !isNaN(parseInt(`${item?.badgeLabel}`));
         const isDot = typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
         return (
@@ -171,7 +185,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             key={item.name}
             name={item.name}
             component={TabScreen}
-            initialParams={{...item, nested}}
+            initialParams={{...item, nested, index}}
             listeners={handler}
             options={{
               tabBarLabel: ({color, focused}) => {

package/Application/Components/HeaderTitle.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../index';
+import {ApplicationContext, MiniAppContext, setAutomationID} from '../index';
 import {exportFontFamily, scaleSize, Text} from '../../Text';
 import {Colors, Radius, Spacing, Styles} from '../../Consts';
 import {TitleJourneyProps, TitleLocationProps, TitleUserProps} from '../types';
@@ -30,7 +30,7 @@ const HeaderTitle: React.FC<any> = props => {
     <View pointerEvents={'none'} style={styles.headerTitleContainer}>
       <Animated.Text
         {...props}
-        accessibilityLabel={'title_navigation_header'}
+        {...setAutomationID('title_navigation_header')}
         style={[
           styles.title,
           {