@momo-kits/foundation 0.112.1-beta.1 → 0.112.1-beta.2

package/Application/BottomTab/index.tsx

@@ -2,7 +2,7 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import React, {useContext, useEffect} from 'react';
-import {Animated, Platform, StatusBar} from 'react-native';
+import {Animated, Easing, Platform, StatusBar} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Colors} from '../../Consts';
 import {Icon} from '../../Icon';
@@ -19,20 +19,21 @@ const Stack = createStackNavigator();
 const TabScreen: React.FC<any> = ({route, navigation}) => {
   const {nested, options, screen, initialParams} = route?.params;
 
-  const opacity = new Animated.Value(0.25);
-  const translateX = new Animated.Value(100);
+  const opacity = new Animated.Value(0);
+  const scale = new Animated.Value(0.9);
 
   useEffect(() => {
     const unsubscribeFocus = navigation.addListener('focus', () => {
       Animated.parallel([
-        Animated.timing(translateX, {
-          toValue: 0,
-          duration: 300,
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 200,
           useNativeDriver: true,
         }),
-        Animated.timing(opacity, {
+        Animated.timing(scale, {
           toValue: 1,
           duration: 300,
+          easing: Easing.bezier(0.4, 0.0, 0.2, 1),
           useNativeDriver: true,
         }),
       ]).start();
@@ -40,14 +41,14 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
 
     const unsubscribeBlur = navigation.addListener('blur', () => {
       Animated.parallel([
-        Animated.timing(translateX, {
-          toValue: 100,
-          duration: 300,
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 200,
           useNativeDriver: true,
         }),
-        Animated.timing(opacity, {
-          toValue: 0.25,
-          duration: 300,
+        Animated.timing(scale, {
+          toValue: 0.9,
+          duration: 200,
           useNativeDriver: true,
         }),
       ]).start();
@@ -66,7 +67,7 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
 
   if (nested) {
     return (
-      <Animated.View style={{flex: 1, transform: [{translateX: translateX}]}}>
+      <Animated.View style={{flex: 1, transform: [{scale}]}}>
         <Stack.Navigator>
           <Stack.Screen
             name="Stack"
@@ -84,8 +85,7 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
   }
 
   return (
-    <Animated.View
-      style={{flex: 1, opacity, transform: [{translateX: translateX}]}}>
+    <Animated.View style={{flex: 1, opacity, transform: [{scale}]}}>
       <NavigationContainer independent={true}>
         <Stack.Navigator>
           <Stack.Screen

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.112.1-beta.1",
+  "version": "0.112.1-beta.2",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},