@momo-kits/foundation 0.92.7 → 0.92.8-beta.10

package/Application/BottomSheet.tsx

@@ -0,0 +1,238 @@
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import {
+  Animated,
+  Dimensions,
+  KeyboardAvoidingView,
+  Modal,
+  PanResponder,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext} from './index';
+import {BottomSheetParams} from './types';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Colors, Radius, Spacing, Styles} from '../Consts';
+import {Text} from '../Text';
+import {Icon} from '../Icon';
+
+const BottomSheet: React.FC<BottomSheetParams> = props => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const heightDevice = Dimensions.get('screen').height;
+  const insets = useSafeAreaInsets();
+  const {
+    screen: Screen,
+    options,
+    surface,
+    barrierDismissible = false,
+    snapPoint = 'content',
+    draggable = true,
+    dragOnContent = false,
+    useBottomInset = true,
+  }: BottomSheetParams = props.route.params;
+  const [modalVisible, setModalVisible] = useState(false);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+  const pan = useRef(new Animated.ValueXY()).current;
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => draggable,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return draggable && dragOnContent && gestureState.dy > 0;
+      },
+      onPanResponderMove: (e, gestureState) => {
+        gestureState.dy > 0 &&
+          Animated.event([null, {dy: pan.y}], {useNativeDriver: false})(
+            e,
+            gestureState,
+          );
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > 100) {
+          onDismiss();
+        } else {
+          Animated.spring(pan, {
+            toValue: {x: 0, y: 0},
+            useNativeDriver: false,
+          }).start();
+        }
+      },
+    }),
+  ).current;
+  const [estimate, setEstimate] = useState(0.9);
+  const timeoutMount = useRef<any>();
+
+  let backgroundColor = theme.colors.background.default;
+  if (surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  /**
+   * handle open & emit dismiss event
+   */
+  useEffect(() => {
+    clearTimeout(timeoutMount.current);
+    timeoutMount.current = setTimeout(() => {
+      const mapSnapPoint: any = {
+        '30%': 0.3,
+        '50%': 0.5,
+        '70%': 0.7,
+        '90%': 0.9,
+      };
+      const point = mapSnapPoint[snapPoint] ?? estimate;
+      setModalVisible(true);
+      Animated.timing(animatedHeight, {
+        useNativeDriver: false,
+        toValue: heightDevice * point,
+        duration: 300,
+      }).start();
+    }, 100);
+  }, [estimate]);
+
+  /**
+   * emit dismiss event
+   */
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+  /**
+   * handler dismiss
+   */
+  const onDismiss = (force = false) => {
+    if (barrierDismissible && !force) {
+      return;
+    }
+    Animated.timing(animatedHeight, {
+      useNativeDriver: false,
+      toValue: 0,
+      duration: 200,
+    }).start(() => {
+      pan.setValue({x: 0, y: 0});
+      navigator?.pop();
+    });
+  };
+
+  return (
+    <>
+      <Modal
+        transparent
+        visible={modalVisible}
+        onRequestClose={() => onDismiss()}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          keyboardVerticalOffset={-20}
+          style={Styles.flex}>
+          <TouchableOpacity
+            style={Styles.flex}
+            activeOpacity={1}
+            onPress={() => onDismiss()}
+          />
+          <Animated.View
+            {...(dragOnContent && panResponder.panHandlers)}
+            style={[
+              styles.container,
+              {transform: pan.getTranslateTransform()},
+              {
+                height: animatedHeight,
+                backgroundColor,
+              },
+            ]}>
+            {draggable && (
+              <View
+                {...(!dragOnContent && panResponder.panHandlers)}
+                style={styles.draggableContainer}>
+                <View style={{height: 16}}>
+                  <View style={styles.indicator} />
+                </View>
+                <View
+                  style={[
+                    styles.header,
+                    surface && {
+                      borderBottomColor: theme.colors.border.default,
+                      borderBottomWidth: 1,
+                    },
+                  ]}>
+                  <View style={styles.iconButton} />
+                  <Text
+                    style={[Styles.flex, {textAlign: 'center'}]}
+                    numberOfLines={1}
+                    typography="header_default_bold">
+                    {options.title ?? ''}
+                  </Text>
+                  <TouchableOpacity
+                    style={styles.iconButton}
+                    onPress={() => onDismiss(true)}>
+                    <Icon source="navigation_close" />
+                  </TouchableOpacity>
+                </View>
+              </View>
+            )}
+            <Screen {...props} {...props.route.params} />
+            {useBottomInset && (
+              <View style={{height: Math.min(insets.bottom, 21)}} />
+            )}
+          </Animated.View>
+        </KeyboardAvoidingView>
+      </Modal>
+      {snapPoint == 'content' && (
+        <View
+          style={styles.estimate}
+          onLayout={e => {
+            const current = (e.nativeEvent.layout.height + 72) / heightDevice;
+            if (current != estimate) {
+              setEstimate(current);
+            }
+          }}>
+          <Screen {...props} {...props.route.params} />
+          {useBottomInset && (
+            <View style={{height: Math.min(insets.bottom, 21)}} />
+          )}
+        </View>
+      )}
+    </>
+  );
+};
+export default BottomSheet;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: 0,
+    overflow: 'hidden',
+    borderTopLeftRadius: Radius.M,
+    borderTopRightRadius: Radius.M,
+  },
+  draggableContainer: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  indicator: {
+    width: 40,
+    height: 4,
+    borderRadius: Radius.S,
+    backgroundColor: Colors.black_06,
+    position: 'absolute',
+    alignSelf: 'center',
+    top: Spacing.S,
+  },
+  header: {
+    height: 56,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconButton: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: Spacing.M,
+  },
+  estimate: {
+    position: 'absolute',
+    top: -9999,
+    left: -9999,
+    opacity: 0,
+  },
+});

package/Application/BottomTab/BottomTabBar.tsx

@@ -1,33 +1,26 @@
 import {BottomTabBarProps} from '@react-navigation/bottom-tabs';
-import {LabelPosition} from '@react-navigation/bottom-tabs/src/types';
-import BottomTabBarHeightCallbackContext from '@react-navigation/bottom-tabs/src/utils/BottomTabBarHeightCallbackContext';
 import BottomTabBarItem from '@react-navigation/bottom-tabs/src/views/BottomTabItem';
 import {
   CommonActions,
   NavigationContext,
   NavigationRouteContext,
-  ParamListBase,
-  TabNavigationState,
   useLinkBuilder,
-  useTheme,
 } from '@react-navigation/native';
-import React, {useCallback} from 'react';
+import React, {useCallback, useContext} from 'react';
 import {
   Animated,
-  LayoutChangeEvent,
   Platform,
-  StyleProp,
   StyleSheet,
   TouchableOpacity,
   useWindowDimensions,
   View,
-  ViewStyle,
 } from 'react-native';
 import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Radius} from '../../Consts';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
 import {FloatingButtonProps} from '../types';
+import {ApplicationContext} from '../index';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
@@ -36,184 +29,40 @@ type Props = BottomTabBarProps & {
   accessibilityLabel?: string;
 };
 
-type Options = {
-  state: TabNavigationState<ParamListBase>;
-  layout: {height: number; width: number};
-  dimensions: {height: number; width: number};
-  tabStyle: StyleProp<ViewStyle>;
-  labelPosition: LabelPosition | undefined;
-  adaptive: boolean | undefined;
+const getPaddingBottom = (insets: EdgeInsets) => {
+  return Math.max(insets.bottom - Platform.select({ios: 4, default: 0}), 0);
 };
 
-const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
-
-const shouldUseHorizontalLabels = ({
-  state,
-  layout,
-  dimensions,
-  adaptive = true,
-  labelPosition,
-  tabStyle,
-}: Options) => {
-  if (labelPosition) {
-    return labelPosition === 'beside-icon';
-  }
-
-  if (!adaptive) {
-    return false;
-  }
-
-  if (layout.width >= 768) {
-    // Screen size matches a tablet
-    let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH;
-
-    const flattenedStyle = StyleSheet.flatten(tabStyle);
-
-    if (flattenedStyle) {
-      if (typeof flattenedStyle.width === 'number') {
-        maxTabItemWidth = flattenedStyle.width;
-      } else if (typeof flattenedStyle.maxWidth === 'number') {
-        maxTabItemWidth = flattenedStyle.maxWidth;
-      }
-    }
-
-    return state.routes.length * maxTabItemWidth <= layout.width;
-  } else {
-    return dimensions.width > dimensions.height;
-  }
-};
-const getPaddingBottom = (insets: EdgeInsets) =>
-  Math.max(insets.bottom - Platform.select({ios: 4, default: 0}), 0);
-
 export default function BottomTabBar({
   state,
   navigation,
   descriptors,
   activeBackgroundColor,
   activeTintColor,
-  adaptive,
   allowFontScaling,
   inactiveBackgroundColor,
   inactiveTintColor,
-  keyboardHidesTabBar = false,
-  labelPosition,
   labelStyle,
   iconStyle,
-  safeAreaInsets,
   showLabel,
   style,
   tabStyle,
   floatingButton,
 }: Props) {
+  const {theme} = useContext(ApplicationContext);
   const {routes} = state;
-  const dimensions = useWindowDimensions();
-  const isFloating = floatingButton?.icon && state.routes.length == 4;
-  const itemWidth = isFloating
-    ? dimensions.width / 5
-    : dimensions.width / state.routes.length;
-
-  const [layout, setLayout] = React.useState({
-    height: 0,
-    width: dimensions.width,
-  });
+  const widthDevice = useWindowDimensions()?.width;
+  const useFloating = floatingButton && state.routes.length % 2 === 0;
+  const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
   const buildLink = useLinkBuilder();
-  const {colors} = useTheme();
-
-  const hasHorizontalLabels = shouldUseHorizontalLabels({
-    state,
-    dimensions,
-    layout,
-    adaptive,
-    labelPosition,
-    tabStyle,
-  });
-  const focusedRoute = state.routes[state.index] as any;
-  const focusedDescriptor = descriptors[focusedRoute?.key] as any;
-  const focusedOptions = focusedDescriptor?.options;
-  const shouldShowTabBar =
-    focusedOptions?.tabBarVisible !== false && !keyboardHidesTabBar;
-  const [visible] = React.useState(
-    () => new Animated.Value(shouldShowTabBar ? 1 : 0),
-  );
-
   const indicatorAnimated = React.useRef(new Animated.Value(0)).current;
-
-  const visibilityAnimationConfigRef = React.useRef(
-    focusedOptions?.tabBarVisibilityAnimationConfig,
-  );
-  const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
-  const [isTabBarHidden, setIsTabBarHidden] = React.useState(!shouldShowTabBar);
-  React.useEffect(() => {
-    visibilityAnimationConfigRef.current =
-      focusedOptions?.tabBarVisibilityAnimationConfig;
-  });
-
-  const handleLayout = (e: LayoutChangeEvent) => {
-    const {height, width} = e.nativeEvent.layout;
-
-    onHeightChange?.(height);
-
-    setLayout(layout => {
-      if (height === layout.height && width === layout.width) {
-        return layout;
-      } else {
-        return {
-          height,
-          width,
-        };
-      }
-    });
-  };
-
-  React.useEffect(() => {
-    const visibilityAnimationConfig = visibilityAnimationConfigRef.current;
-
-    if (shouldShowTabBar) {
-      const animation =
-        visibilityAnimationConfig?.show?.animation === 'spring'
-          ? Animated.spring
-          : Animated.timing;
-
-      animation(visible, {
-        toValue: 1,
-        useNativeDriver: true,
-        duration: 250,
-        ...visibilityAnimationConfig?.show?.config,
-      }).start(({finished}) => {
-        if (finished) {
-          setIsTabBarHidden(false);
-        }
-      });
-    } else {
-      setIsTabBarHidden(true);
-
-      const animation =
-        visibilityAnimationConfig?.hide?.animation === 'spring'
-          ? Animated.spring
-          : Animated.timing;
-
-      animation(visible, {
-        toValue: 0,
-        useNativeDriver: true,
-        duration: 200,
-        ...visibilityAnimationConfig?.hide?.config,
-      }).start();
-    }
-  }, [visible, shouldShowTabBar]);
-  const defaultInsets = useSafeAreaInsets();
-
-  const insets = {
-    top: safeAreaInsets?.top ?? defaultInsets.top,
-    right: safeAreaInsets?.right ?? defaultInsets.right,
-    bottom: safeAreaInsets?.bottom ?? defaultInsets.bottom,
-    left: safeAreaInsets?.left ?? defaultInsets.left,
-  };
+  const insets = useSafeAreaInsets();
   const paddingBottom = getPaddingBottom(insets);
-
-  const leftArr = routes.slice(0, 2);
-  const rightArr = routes.slice(2, routes.length);
   const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
 
+  /**
+   * render tab item
+   */
   const renderTabItem = useCallback(
     (data: any[]) => {
       return data?.map((route, index) => {
@@ -263,7 +112,7 @@ export default function BottomTabBar({
               <BottomTabBarItem
                 route={route}
                 focused={focused}
-                horizontal={hasHorizontalLabels}
+                horizontal={false}
                 onPress={onPress}
                 onLongPress={onLongPress}
                 accessibilityLabel={accessibilityLabel}
@@ -292,13 +141,10 @@ export default function BottomTabBar({
     [JSON.stringify(routes), state, descriptors, focusedTab],
   );
 
-  const renderCenterComponent = useCallback(() => {
-    if (floatingButton?.icon && state.routes.length !== 4) {
-      console.warn(
-        "Can't render floating button with icon when routes length is not 4",
-      );
-      return null;
-    }
+  /**
+   * render floating button
+   */
+  const renderFloatingButton = useCallback(() => {
     const renderFloatingButton = () => {
       if (typeof floatingButton?.icon == 'string') {
         return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
@@ -314,14 +160,14 @@ export default function BottomTabBar({
           <View
             style={{
               ...styles.floatingContent,
-              backgroundColor: activeTintColor ?? colors.primary,
+              backgroundColor: activeTintColor ?? theme.colors.primary,
             }}>
             {renderFloatingButton()}
           </View>
           <View
             style={{
               top: -6,
-              backgroundColor: activeTintColor ?? colors.primary,
+              backgroundColor: activeTintColor ?? theme.colors.primary,
               borderRadius: Radius.XL,
               paddingHorizontal: 6,
             }}>
@@ -335,40 +181,49 @@ export default function BottomTabBar({
         </TouchableOpacity>
       </View>
     );
-  }, [floatingButton]);
+  }, [useFloating]);
 
+  /**
+   * animated indicator
+   */
   React.useEffect(() => {
+    let index = state.index;
+    if (useFloating && index > (state.routes.length - 1) / 2) {
+      index += 1;
+    }
     Animated.timing(indicatorAnimated, {
-      toValue:
-        isFloating && state.index > 1
-          ? itemWidth * (state.index + 1)
-          : itemWidth * state.index,
-      useNativeDriver: false,
+      toValue: itemWidth * index,
+      useNativeDriver: true,
       duration: 200,
     }).start();
-  }, [state.index, itemWidth, indicatorAnimated, isFloating]);
+  }, [state.index, itemWidth, indicatorAnimated, useFloating]);
+
+  /**
+   * render tab bar
+   */
+  const renderTabBar = () => {
+    if (useFloating) {
+      const middleIndex = routes.length / 2;
+      const leftArr = routes.slice(0, middleIndex);
+      const rightArr = routes.slice(middleIndex);
+      return (
+        <>
+          {renderTabItem(leftArr)}
+          {renderFloatingButton()}
+          {renderTabItem(rightArr)}
+        </>
+      );
+    }
+    return renderTabItem(routes);
+  };
 
   return (
     <Animated.View
       style={[
         styles.tabBar,
         {
-          backgroundColor: colors.card,
-          borderTopColor: colors.border,
-        },
-        {
-          transform: [
-            {
-              translateY: visible.interpolate({
-                inputRange: [0, 1],
-                outputRange: [
-                  layout.height + paddingBottom + StyleSheet.hairlineWidth,
-                  0,
-                ],
-              }),
-            },
-          ],
-          position: isTabBarHidden ? 'absolute' : (null as any),
+          backgroundColor: theme.colors.background.surface,
+          borderTopColor: theme.colors.border.default,
         },
         {
           paddingBottom: paddingBottom,
@@ -376,10 +231,9 @@ export default function BottomTabBar({
         },
         style,
       ]}
-      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
-      onLayout={handleLayout}>
+      pointerEvents={'auto'}>
       <View style={styles.content}>
-        {isFloating && floatingButton?.container}
+        {useFloating && floatingButton?.container}
         <Animated.View
           style={{
             width: itemWidth,
@@ -390,13 +244,11 @@ export default function BottomTabBar({
           <View
             style={[
               styles.indicator,
-              {backgroundColor: activeTintColor ?? colors.primary},
+              {backgroundColor: activeTintColor ?? theme.colors.primary},
             ]}
           />
         </Animated.View>
-        {isFloating ? renderTabItem(leftArr) : renderTabItem(routes)}
-        {isFloating && renderCenterComponent()}
-        {isFloating && renderTabItem(rightArr)}
+        {renderTabBar()}
       </View>
     </Animated.View>
   );

package/Application/BottomTab/index.tsx

@@ -22,13 +22,18 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
   if (route.params?.options) {
     options = getOptions(route.params?.options, theme);
   }
+
   if (route.params?.nested) {
     return (
       <Stack.Navigator>
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{screen: route.params?.screen, options}}
+          initialParams={{
+            screen: route.params?.screen,
+            options,
+            initialParams: route.params?.initialParams,
+          }}
           options={{...getStackOptions()}}
         />
       </Stack.Navigator>
@@ -40,7 +45,11 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{screen: route.params?.screen, options}}
+          initialParams={{
+            screen: route.params?.screen,
+            options,
+            initialParams: route.params?.initialParams,
+          }}
           options={{...getStackOptions(), ...route.params?.options}}
         />
       </Stack.Navigator>

package/Application/ModalScreen.tsx

@@ -4,29 +4,16 @@ import {
   Platform,
   Pressable,
   StyleSheet,
-  TouchableOpacity,
   View,
 } from 'react-native';
-import {Modalize} from 'react-native-modalize';
-import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {ApplicationContext} from './index';
-import {Radius, Spacing, Styles} from '../Consts';
-import {Icon} from '../Icon';
-import {Text} from '../Text';
+import {Styles} from '../Consts';
 import Navigation from './Navigation';
-import {BottomSheetParams, ModalParams} from './types';
+import {ModalParams} from './types';
+import BottomSheet from './BottomSheet';
 
 const ModalScreen: React.FC<any> = props => {
-  /**
-   * dismiss callback when modal | bottom sheet dismissed
-   */
-  useEffect(() => {
-    return () => {
-      props.route.params?.onDismiss?.();
-    };
-  }, []);
-
   if (props.route?.params?.isBottomSheet) {
     return <BottomSheet {...props} />;
   }
@@ -42,9 +29,14 @@ const Modal: React.FC<ModalParams> = props => {
     ...props.route.params,
     navigation,
   };
-
   delete params.screen;
 
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
@@ -83,118 +75,6 @@ const Modal: React.FC<ModalParams> = props => {
   );
 };
 
-const BottomSheet: React.FC<BottomSheetParams> = props => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  const insets = useSafeAreaInsets();
-
-  const {
-    screen: Screen,
-    options,
-    footerComponent,
-    scrollViewProps,
-    surface,
-  }: BottomSheetParams = props.route.params;
-
-  const navigation = new Navigation(props.navigation, theme);
-
-  const params = {
-    ...props.route.params,
-    navigation,
-  };
-
-  delete params.screen;
-  const modalRef = useRef<Modalize>(null);
-
-  useEffect(() => {
-    modalRef.current?.open();
-  }, []);
-
-  const handleClose = () => {
-    modalRef?.current?.close();
-  };
-
-  /**
-   * build header
-   * @param title
-   * @param onClose
-   */
-  const headerDefault = (title: string, onClose: () => void) => {
-    return (
-      <View
-        style={[
-          styles.header,
-          surface && {
-            borderBottomColor: theme.colors.border.default,
-            borderBottomWidth: 1,
-          },
-        ]}>
-        <View style={styles.iconButton} />
-        <Text
-          style={styles.textOption}
-          numberOfLines={1}
-          typography="header_default_bold">
-          {title ?? ''}
-        </Text>
-        <TouchableOpacity style={styles.iconButton} onPress={onClose}>
-          <Icon source="navigation_close" />
-        </TouchableOpacity>
-      </View>
-    );
-  };
-
-  /**
-   * build footer
-   * @param footerComponent
-   */
-  const footerDefault = (footerComponent: React.ReactNode) => {
-    if (footerComponent) {
-      return (
-        <View
-          style={{
-            marginBottom: Math.min(insets.bottom, 21),
-            paddingHorizontal: Spacing.M,
-            paddingVertical: Spacing.S,
-          }}>
-          {footerComponent}
-        </View>
-      );
-    }
-  };
-
-  return (
-    <SafeAreaView style={Styles.flex}>
-      <Modalize
-        keyboardAvoidingOffset={-20}
-        adjustToContentHeight
-        closeOnOverlayTap
-        closeSnapPointStraightEnabled
-        onClosed={() => {
-          navigator?.pop();
-        }}
-        handlePosition="inside"
-        withHandle={true}
-        disableScrollIfPossible={true}
-        modalTopOffset={insets.top}
-        ref={modalRef}
-        scrollViewProps={scrollViewProps}
-        HeaderComponent={headerDefault(
-          options?.title ?? options?.customTitle?.title ?? '',
-          handleClose,
-        )}
-        modalStyle={{
-          backgroundColor: surface
-            ? theme.colors.background.surface
-            : theme.colors.background.default,
-        }}
-        FooterComponent={footerDefault(footerComponent)}>
-        <View style={styles.bottomSheetContainer}>
-          <Screen {...props} {...params} />
-        </View>
-      </Modalize>
-    </SafeAreaView>
-  );
-};
-
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
@@ -212,56 +92,6 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: '10%',
   },
-  sheetContainer: {
-    height: '100%',
-    width: '100%',
-    borderTopLeftRadius: Radius.M,
-    borderTopRightRadius: Radius.M,
-    overflow: 'hidden',
-  },
-  indicatorContainer: {
-    width: '100%',
-    paddingTop: Spacing.S,
-    paddingBottom: Spacing.XS,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  indicator: {
-    width: 40,
-    height: 4,
-    borderRadius: Radius.S,
-  },
-  bottomSheetContainer: {
-    width: '100%',
-  },
-  header: {
-    marginTop: 10,
-    height: 56,
-    width: '100%',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  textOption: {
-    fontSize: 16,
-    color: '#303233',
-    textAlign: 'center',
-    fontWeight: 'bold',
-    paddingHorizontal: Spacing.L,
-    flex: 1,
-  },
-  iconButton: {
-    width: 24,
-    height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: Spacing.M,
-  },
-  icon: {
-    width: 24,
-    height: 24,
-    tintColor: '#303233',
-    backgroundColor: 'red',
-  },
 });
 
 export default ModalScreen;

package/Application/NavigationContainer.tsx

@@ -4,7 +4,6 @@ import {
   NavigationContainer as ReactNavigationContainer,
   NavigationContainerRef,
 } from '@react-navigation/native';
-import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {createStackNavigator} from '@react-navigation/stack';
 import {DeviceEventEmitter} from 'react-native';
 import StackScreen from './StackScreen';
@@ -15,12 +14,6 @@ import {LocalizationObject, NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
-/**
- * link for deprecated
- */
-
-console.log(typeof BottomSheetModalProvider);
-
 const Stack = createStackNavigator();
 
 const NavigationContainer: React.FC<NavigationContainerProps> = ({

package/Application/types.ts

@@ -1,6 +1,6 @@
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
-import {Animated, ScrollViewProps, ViewProps} from 'react-native';
+import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
@@ -70,16 +70,6 @@ export type Context = {
   translate?: (key: string) => string;
 };
 
-export type MiniAppInfo = {
-  [key: string]: any;
-  code: string;
-  appId: string;
-  buildNumber: number;
-  flowPartnerId?: string;
-  toolkitConfig?: any;
-  fromCode?: string;
-};
-
 export type LocalizationObject = {
   vi: {
     [key: string]: string;
@@ -110,19 +100,28 @@ export type ScreenParams = {
   options?: NavigationOptions;
 };
 
-export interface ModalParams extends ScreenParams {
+export type ModalParams = {
   [key: string]: any;
+  screen: React.ComponentType;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
-}
+};
 
-export interface BottomSheetParams extends ScreenParams {
+export type BottomSheetParams = {
   [key: string]: any;
-  onDismiss?: () => void;
+  screen: React.ComponentType;
+  options: {
+    title: string;
+    surface?: boolean;
+  };
+  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
   surface?: boolean;
-  footerComponent?: React.ReactNode;
-  scrollViewProps?: ScrollViewProps;
-}
+  onDismiss?: (type?: string) => void;
+  barrierDismissible?: boolean;
+  draggable?: boolean;
+  dragOnContent?: boolean;
+  useBottomInset?: boolean;
+};
 
 export type NavigationButtonProps = {
   icon: string;

package/Layout/Card.tsx

@@ -144,6 +144,7 @@ const Card: React.FC<CardProps> = ({
     <GridContext.Provider value={gridContext}>
       <View
         {...props}
+        onLayout={undefined}
         style={[
           {backgroundColor: theme.colors.background.surface},
           style,

package/Layout/Screen.tsx

@@ -296,7 +296,8 @@ const Screen = forwardRef(
                 style={{
                   marginTop: space,
                   flex: item.props?.expanded ? 1 : undefined,
-                }}>
+                }}
+                onLayout={item.props?.onLayout}>
                 {item}
               </View>
             );
@@ -314,7 +315,8 @@ const Screen = forwardRef(
             style={{
               marginTop: space,
               flex: item?.props?.expanded ? 1 : undefined,
-            }}>
+            }}
+            onLayout={item?.props?.onLayout}>
             {children}
           </View>
         );

package/Layout/Section.tsx

@@ -151,6 +151,7 @@ const Section: React.FC<SectionProps> = ({
       }}>
       <View
         {...props}
+        onLayout={undefined}
         style={[
           style,
           styles.protectedStyle,

package/Loader/index.tsx

@@ -1,4 +1,6 @@
 import Loader from './Loader';
 import ProgressBar from './ProgressBar';
+import {LoaderProps, ProgressBarProps} from './types';
 
 export {Loader, ProgressBar};
+export type {LoaderProps, ProgressBarProps};

package/Title/index.tsx

@@ -1,13 +1,16 @@
 import React, {FC, useContext, useState} from 'react';
 import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
+import {
+  Typography,
+  Colors,
+  Icon,
+  Badge,
+  ApplicationContext,
+  scaleSize,
+  Text,
+} from '@momo-kits/foundation';
 import styles from './styles';
-import {Icon} from '../Icon';
-import {scaleSize, Text} from '../Text';
-import {ApplicationContext} from '../Application';
-import {Badge} from '../Badge';
-import {Typography} from '../Text/types';
 import {TitleProps} from './types';
-import {Colors} from '../Consts';
 
 const Title: FC<TitleProps> = ({
   title = 'Title',
@@ -67,7 +70,9 @@ const Title: FC<TitleProps> = ({
       <View style={styles.contentView}>
         <View
           onLayout={e => {
-            setContentWidth(e.nativeEvent.layout.width);
+            if (e.nativeEvent.layout.width !== contentWidth) {
+              setContentWidth(e.nativeEvent.layout.width);
+            }
           }}
           style={[styles.iconLeftView, flexStyle]}>
           <RNText
@@ -75,14 +80,19 @@ const Title: FC<TitleProps> = ({
             style={[
               styleSheet[typography],
               styles.title,
-              {maxWidth: contentWidth - badgeWidth},
+              {
+                maxWidth:
+                  contentWidth > 0 ? contentWidth - badgeWidth : undefined,
+              },
             ]}>
             {title}
           </RNText>
           {badgeLabel && (
             <View
               onLayout={e => {
-                setBadgeWidth(e.nativeEvent.layout.width);
+                if (e.nativeEvent.layout.width !== badgeWidth) {
+                  setBadgeWidth(e.nativeEvent.layout.width);
+                }
               }}
               style={{
                 alignItems: 'center',
@@ -164,6 +174,7 @@ const Title: FC<TitleProps> = ({
   if (textOnly) {
     return (
       <View style={isSection && styles.margin}>
+        zZ
         <RNText
           numberOfLines={numberOfLines}
           style={[styleSheet[typography], styles.title]}>

package/index.ts

@@ -49,3 +49,10 @@ export * from './Title';
 export * from './Title/types';
 export * from './Badge';
 export * from './Badge/types';
+
+/**
+ * export trick for keep old mini app working
+ * @deprecated
+ */
+export * from 'react-native-modalize';
+export * from '@gorhom/bottom-sheet';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.7",
+    "version": "0.92.8-beta.10",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -18,7 +18,7 @@
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
-        "lottie-react-native": "3.3.2",
+        "lottie-react-native": "git+https://gitlab.mservice.com.vn/momo-platform/momo-lottie-react-native.git#test_lottie_ios",
         "@react-navigation/stack": "https://oauth2:eX-jVhzQdLc343AjD3Sc@gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
     },
     "peerDependencies": {