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

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, Easing, Platform, StatusBar} from 'react-native';
+import {Animated, Platform, StatusBar} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Colors} from '../../Consts';
 import {Icon} from '../../Icon';
@@ -19,8 +19,10 @@ const Stack = createStackNavigator();
 const TabScreen: React.FC<any> = ({route, navigation}) => {
   const {nested, options, screen, initialParams} = route?.params;
 
-  const opacity = new Animated.Value(0);
-  const scale = new Animated.Value(0.9);
+  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', () => {
@@ -32,8 +34,7 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
         }),
         Animated.timing(scale, {
           toValue: 1,
-          duration: 300,
-          easing: Easing.bezier(0.4, 0.0, 0.2, 1),
+          duration: 200,
           useNativeDriver: true,
         }),
       ]).start();
@@ -42,12 +43,12 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
     const unsubscribeBlur = navigation.addListener('blur', () => {
       Animated.parallel([
         Animated.timing(opacity, {
-          toValue: 0,
+          toValue: opacityValue,
           duration: 200,
           useNativeDriver: true,
         }),
         Animated.timing(scale, {
-          toValue: 0.9,
+          toValue: scaleValue,
           duration: 200,
           useNativeDriver: true,
         }),

package/Application/NavigationContainer.tsx

@@ -8,7 +8,7 @@ import {
   createStackNavigator,
   StackNavigationOptions,
 } from '@react-navigation/stack';
-import {DeviceEventEmitter, NativeModules} from 'react-native';
+import {DeviceEventEmitter} from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
@@ -16,7 +16,7 @@ import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {NavigationContainerProps} from './types';
 import {ApplicationContext, MiniAppContext} from './index';
 import Localize from './Localize';
-import {defaultTheme} from '../Consts';
+import {defaultTheme, Configs} from '../Consts';
 
 const Stack = createStackNavigator();
 
@@ -36,15 +36,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const [showGrid, setShowGrid] = useState(false);
   const [currentContext, setCurrentContext] = useState({});
 
-  let config: any = null;
-  try {
-    config = JSON.parse(
-      NativeModules?.ConfigsModule?.getConfigSync?.('DESIGN_SYSTEM') || ''
-    );
-  } catch (e) {
-    console.log(e);
-  }
-
   /**
    * inject data for navigator
    */
@@ -105,8 +96,8 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     });
   };
 
-  const headerBackground = theme.assets?.headerBackground || config?.headerBar;
-  const headerGradient = config?.headerGradient || theme.colors?.gradient;
+  const headerBackground = theme.assets?.headerBackground || Configs.headerBar;
+  const headerGradient = Configs?.headerGradient || theme.colors?.gradient;
 
   navigator.current.setCurrentContext = setCurrentContext;
 

package/Application/utils.tsx

@@ -26,32 +26,7 @@ const getStackOptions = (): StackNavigationOptions => {
     headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
     gestureEnabled: false,
-    cardStyleInterpolator: ({current: {progress}, layouts}) => ({
-      cardStyle: {
-        transform: [
-          {
-            translateX: progress.interpolate({
-              inputRange: [0, 1],
-              outputRange: [layouts.screen.width, 0],
-            }),
-          },
-        ],
-      },
-    }),
-    transitionSpec: {
-      open: {
-        animation: 'timing',
-        config: {
-          duration: 300,
-        },
-      },
-      close: {
-        animation: 'timing',
-        config: {
-          duration: 300,
-        },
-      },
-    },
+    ...TransitionPresets.SlideFromRightIOS,
   };
 };
 

package/Consts/colors+spacing+radius.ts

@@ -229,4 +229,34 @@ const Shadow = {
   }),
 };
 
-export {Colors, Spacing, Radius, Shadow};
+const Configs = {
+  headerGradient: '',
+  headerBar: '',
+  trustBanner: {
+    content: {
+      vi: 'Bảo mật thông tin & An toàn tài sản của bạn là ưu tiên hàng đầu của MoMo.',
+      en: "Your data security and money safety are MoMo's top priorities.",
+    },
+    subContent: {
+      vi: 'Tìm hiểu thêm',
+      en: 'Learn more',
+    },
+    pciImage: 'https://static.momocdn.net/app/img/kits/trustBanner/pci_dss.png',
+    sslImage: 'https://static.momocdn.net/app/img/kits/trustBanner/ssl.png',
+    momoImage:
+      'https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png',
+    urlConfig: 'login_and_security',
+    icons: [
+      'https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png',
+      'https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png',
+      'https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png',
+      'https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png',
+    ],
+    titleWeb: {
+      vi: 'Thông tin',
+      en: 'Information',
+    },
+  },
+};
+
+export {Colors, Spacing, Radius, Shadow, Configs};

package/Layout/Screen.tsx

@@ -1,5 +1,6 @@
 import {StackNavigationOptions, useHeaderHeight} from '@react-navigation/stack';
 import React, {
+  Children,
   forwardRef,
   Fragment,
   ReactNode,
@@ -43,6 +44,7 @@ import {
   HeaderTitle,
 } from '../Application/Components';
 import {SearchHeader} from '../Application/Components/SearchHeader';
+import {Skeleton} from '@momo-kits/foundation';
 
 export interface ScreenProps extends ViewProps {
   /**
@@ -174,6 +176,7 @@ const Screen = forwardRef(
       animatedValue: customAnimatedValue,
       headerBackground,
       gradientColor,
+      isLoading,
     }: ScreenProps,
     ref: any
   ) => {
@@ -504,6 +507,16 @@ const Screen = forwardRef(
       }
     };
 
+    const generateSkeleton = () => {
+      if (children) {
+        return Children.toArray(children).map((item, index) => {
+          return (
+            <Skeleton key={`Skeleton${index}`} style={{marginTop: Spacing.M}} />
+          );
+        });
+      }
+    };
+
     return (
       <View
         style={[
@@ -543,7 +556,11 @@ const Screen = forwardRef(
             style={Styles.flex}>
             {renderAnimatedHeader()}
 
-            {useGridLayout ? renderContent(children) : children}
+            {isLoading
+              ? generateSkeleton()
+              : useGridLayout
+              ? renderContent(children)
+              : children}
           </Component>
 
           {floatingButtonProps && (

package/index.ts

@@ -4,6 +4,16 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
+import {Configs} from './Consts';
+
+if (typeof (global as any)?.miniAppApi?.dispatch === 'function') {
+  const features = (global as any)?.miniAppApi?.dispatch?.('platform_config');
+  const designSystemJson = features[0].designSystem;
+  const config = JSON.parse(designSystemJson);
+  Configs.trustBanner = config?.trustBanner;
+  Configs.headerBar = config?.headerBar;
+  Configs.headerGradient = config?.headerGradient;
+}
 
 /**
  * native export

package/package.json

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