@momo-kits/foundation 0.92.5 → 0.92.6-beta.11

package/Application/types.ts

@@ -120,7 +120,7 @@ export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
   footerComponent?: React.ReactNode;
-  flatListProps: FlatListProps<any>;
+  flatListProps?: FlatListProps<any>;
 }
 
 export type NavigationButtonProps = {

package/FloatingButton/FloatingButton.tsx

@@ -0,0 +1,154 @@
+import {
+  default as React,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {ApplicationContext} from '../Application';
+import {Spacing} from '../Consts';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
+
+export interface FloatingButtonProps {
+  label?: string;
+  onPress?: () => void;
+  position?: 'center' | 'right';
+  icon?: string;
+  iconColor?: string;
+  size?: 'small' | 'large';
+  animatedValue: Animated.Value;
+  isBottomTab?: boolean;
+  isFooter?: boolean;
+}
+
+export const FloatingButton: React.FC<FloatingButtonProps> = ({
+  label = '',
+  onPress = () => {},
+  position = 'right',
+  icon = '',
+  iconColor = '',
+  size = 'small',
+  animatedValue,
+  isBottomTab = false,
+  isFooter = false,
+}: FloatingButtonProps) => {
+  const {theme} = useContext(ApplicationContext);
+  const insets = useSafeAreaInsets();
+  const [isExpanded, setIsExpanded] = React.useState(true);
+  const [init, setInit] = useState(true);
+  const width = size == 'small' ? 36 : 48;
+  const widthAnim = useRef(new Animated.Value(width)).current;
+  const [textWidth, setTextWidth] = useState(0);
+
+  useEffect(() => {
+    if (!label) return;
+
+    const listener = animatedValue.addListener(({value}) => {
+      if (value === 1) {
+        setIsExpanded(false);
+        collapseFab();
+      } else {
+        setIsExpanded(true);
+        expandFab();
+      }
+    });
+
+    return () => {
+      animatedValue?.removeListener(listener);
+    };
+  }, [textWidth, label, init]);
+
+  // If the text width is greater than 0 and it's not initialized then expand the fab
+  useEffect(() => {
+    if (textWidth > 0 && !init) {
+      expandFab();
+    }
+  }, [textWidth]);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const {width} = event.nativeEvent.layout;
+
+    if (init) {
+      setTextWidth(width);
+      setInit(false);
+    }
+  };
+
+  const expandFab = useCallback(() => {
+    Animated.timing(widthAnim, {
+      toValue: width + textWidth + 8,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [textWidth, widthAnim]);
+
+  const collapseFab = useCallback(() => {
+    Animated.timing(widthAnim, {
+      toValue: width,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [widthAnim]);
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          right: position === 'right' ? 12 : undefined,
+          alignSelf: position === 'center' ? 'center' : 'flex-end',
+          width: init ? undefined : widthAnim,
+          height: width,
+          backgroundColor: theme.colors.primary,
+          bottom:
+            isFooter || isBottomTab
+              ? 12
+              : Math.min(insets.bottom, 21) + Spacing.S,
+        },
+      ]}>
+      <TouchableOpacity
+        style={{flexDirection: 'row', alignItems: 'center'}}
+        onPress={onPress}>
+        <Icon
+          source={icon}
+          size={size === 'small' ? 12 : 24}
+          color={iconColor}
+        />
+        {isExpanded && !!label && (
+          <Text
+            onLayout={handleLayout}
+            style={styles.label}
+            color="white"
+            typography="action_default_bold">
+            Hello
+          </Text>
+        )}
+      </TouchableOpacity>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    borderRadius: 100,
+    paddingHorizontal: 12,
+    flexWrap: 'wrap',
+    alignSelf: 'flex-end',
+  },
+  label: {
+    marginLeft: 8,
+  },
+});

package/Icon/types.ts

@@ -1,4 +1,5 @@
 import {ImageStyle} from 'react-native-fast-image';
+import {StyleProp} from "react-native";
 
 export type IconProps = {
   /**
@@ -23,5 +24,5 @@ export type IconProps = {
    *  Optional. Used to apply custom styling to the Icon component.
    * Accepts an object of style properties.
    */
-  style?: ImageStyle;
+  style?: StyleProp<ImageStyle>;
 };

package/Input/Input.tsx

@@ -1,4 +1,10 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   Platform,
@@ -8,12 +14,12 @@ import {
   View,
 } from 'react-native';
 import {ApplicationContext, ComponentContext} from '../Application';
-import styles from './styles';
+import {Icon} from '../Icon';
+import {Loader} from '../Loader';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
-import {Icon} from '../Icon';
+import styles from './styles';
 import {checkTyping} from './utils';
-import {Loader} from '../Loader';
 
 const Input = forwardRef(
   (
@@ -42,6 +48,7 @@ const Input = forwardRef(
       keyboardType,
       style,
       params,
+      hintText,
       accessibilityLabel,
       ...props
     }: InputProps,
@@ -51,7 +58,7 @@ const Input = forwardRef(
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const inputRef = useRef<TextInput | null>(null);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -73,6 +80,15 @@ const Input = forwardRef(
       onBlur?.(e);
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: (text: string) => _onChangeText(text),
+      };
+    });
+
     const renderIcon = (color: string | undefined) => {
       if (loading) {
         return <Loader type={'spinner'} color={color} style={styles.icon} />;
@@ -217,7 +233,11 @@ const Input = forwardRef(
         }}>
         <View style={[style, styles.wrapper]}>
           {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+          <ErrorView
+            errorMessage={errorMessage}
+            errorSpacing={errorSpacing}
+            hintText={hintText}
+          />
         </View>
       </ComponentContext.Provider>
     );

package/Input/InputDropDown.tsx

@@ -1,12 +1,12 @@
 import React, {useContext} from 'react';
 import {TextInput, TouchableOpacity, View} from 'react-native';
 import {ApplicationContext, ComponentContext} from '../Application';
-import styles from './styles';
-import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
-import {InputDropDownProps} from './index';
+import {Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {Styles} from '../Consts';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {InputDropDownProps} from './index';
+import styles from './styles';
 
 const InputDropDown = ({
   value,
@@ -28,6 +28,7 @@ const InputDropDown = ({
   style,
   params,
   accessibilityLabel,
+  hintText,
   ...props
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
@@ -118,7 +119,11 @@ const InputDropDown = ({
         onPress={onPress}
         style={[style, full && styles.wrapper]}>
         {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        <ErrorView
+          errorMessage={errorMessage}
+          errorSpacing={errorSpacing}
+          hintText={hintText}
+        />
       </TouchableOpacity>
     </ComponentContext.Provider>
   );

package/Input/InputMoney.tsx

@@ -13,10 +13,10 @@ import {
   View,
 } from 'react-native';
 import {ApplicationContext, ComponentContext} from '../Application';
-import styles from './styles';
+import {Icon} from '../Icon';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
-import {Icon} from '../Icon';
+import styles from './styles';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
 
 const InputMoney = forwardRef(
@@ -39,13 +39,14 @@ const InputMoney = forwardRef(
       params,
       defaultValue = '',
       accessibilityLabel,
+      hintText,
       ...props
     }: InputMoneyProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const inputRef = useRef<TextInput>(null);
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -72,6 +73,10 @@ const InputMoney = forwardRef(
 
     useImperativeHandle(ref, () => {
       return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        changeText: (text: string) => _onChangeText(text),
         setText: _onChangeText,
       };
     });
@@ -177,7 +182,11 @@ const InputMoney = forwardRef(
         }}>
         <View style={[style, styles.wrapper]}>
           {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+          <ErrorView
+            errorMessage={errorMessage}
+            errorSpacing={errorSpacing}
+            hintText={hintText}
+          />
         </View>
       </ComponentContext.Provider>
     );

package/Input/InputOTP.tsx

@@ -15,12 +15,12 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {CaretProps, InputOTPProps} from './index';
-import {scaleSize, Text} from '../Text';
-import styles from './styles';
-import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Spacing} from '../Consts';
+import {scaleSize, Text} from '../Text';
+import {ErrorView, getBorderColor} from './common';
+import {CaretProps, InputOTPProps} from './index';
+import styles from './styles';
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -81,6 +81,7 @@ const InputOTP = forwardRef(
       params,
       style,
       accessibilityLabel,
+      hintText,
       ...props
     }: InputOTPProps,
     ref,
@@ -88,13 +89,16 @@ const InputOTP = forwardRef(
     const MAX_LENGTH = 10;
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);
-    const inputRef = useRef<TextInput>(null);
+    const inputRef = useRef<TextInput | null>(null);
     const {theme} = useContext(ApplicationContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
         _onChangeText(text);
       },
+      focus: () => inputRef.current?.focus(),
+      blur: () => inputRef.current?.blur(),
+      setText: (text: string) => _onChangeText(text),
     }));
 
     const onFocusInput = () => {
@@ -239,7 +243,11 @@ const InputOTP = forwardRef(
           onPress={onFocusInput}
           style={[style, styles.otpWrapper]}>
           {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+          <ErrorView
+            errorMessage={errorMessage}
+            errorSpacing={errorSpacing}
+            hintText={hintText}
+          />
         </TouchableOpacity>
       </ComponentContext.Provider>
     );

package/Input/InputSearch.tsx

@@ -1,4 +1,10 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -6,11 +12,11 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {InputSearchProps} from './index';
 import {ApplicationContext, ComponentContext} from '../Application';
-import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
+import {InputSearchProps} from './index';
+import styles from './styles';
 import {checkTyping} from './utils';
 
 const InputSearch = forwardRef(
@@ -38,7 +44,7 @@ const InputSearch = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const inputRef = useRef<TextInput | null>(null);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -60,6 +66,15 @@ const InputSearch = forwardRef(
       onChangeText?.(text);
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: (text: string) => _onChangeText(text),
+      };
+    });
+
     const renderInputView = () => {
       return (
         <TextInput

package/Input/InputTextArea.tsx

@@ -1,4 +1,10 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -6,7 +12,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import styles from './styles';
+import {ApplicationContext} from '../Application';
+import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {
   DEFAULT_HEIGHT,
@@ -16,8 +23,7 @@ import {
   MAX_LENGTH,
 } from './common';
 import {InputTextAreaProps} from './index';
-import {Icon} from '../Icon';
-import {ApplicationContext} from '../Application';
+import styles from './styles';
 
 const InputTextArea = forwardRef(
   (
@@ -39,6 +45,7 @@ const InputTextArea = forwardRef(
       errorSpacing,
       style,
       accessibilityLabel,
+      hintText,
       ...props
     }: InputTextAreaProps,
     ref,
@@ -46,7 +53,7 @@ const InputTextArea = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const inputRef = useRef<TextInput | null>(null);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -68,6 +75,15 @@ const InputTextArea = forwardRef(
       onBlur?.(e);
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: (text: string) => _onChangeText(text),
+      };
+    });
+
     const renderCountingView = () => {
       return (
         <View style={styles.countingView}>
@@ -151,7 +167,11 @@ const InputTextArea = forwardRef(
     return (
       <View style={[style, styles.wrapper]}>
         {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        <ErrorView
+          errorMessage={errorMessage}
+          errorSpacing={errorSpacing}
+          hintText={hintText}
+        />
       </View>
     );
   },

package/Input/common.tsx

@@ -1,11 +1,11 @@
-import {View, ViewStyle} from 'react-native';
-import styles from './styles';
-import {scaleSize, Text} from '../Text';
 import React, {FC, useContext} from 'react';
+import {View, ViewStyle} from 'react-native';
 import {ApplicationContext} from '../Application';
-import {Icon} from '../Icon';
-import {Styles} from '../Consts';
 import {Theme} from '../Application/types';
+import {Styles} from '../Consts';
+import {Icon} from '../Icon';
+import {scaleSize, Text} from '../Text';
+import styles from './styles';
 
 type FloatingViewProps = {
   floatingValue?: string;
@@ -16,6 +16,13 @@ type FloatingViewProps = {
   style?: ViewStyle;
 };
 
+export interface InputRef {
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  setText: (text: string) => void;
+}
+
 export const DEFAULT_HEIGHT = scaleSize(104);
 export const MAX_LENGTH = 300;
 
@@ -48,24 +55,31 @@ export const getSizeStyle = (size?: 'small' | 'large') => {
   }
   return styles.container;
 };
-export const ErrorView: FC<{errorMessage?: string; errorSpacing?: boolean}> = ({
-  errorMessage,
-  errorSpacing,
-}) => {
+export const ErrorView: FC<{
+  errorMessage?: string;
+  errorSpacing?: boolean;
+  hintText?: string;
+}> = ({errorMessage, errorSpacing, hintText}) => {
   const {theme} = useContext(ApplicationContext);
   const errorColor = theme.colors.error.primary;
-  if (errorMessage) {
+  const hintColor = theme.colors.text.hint;
+  const hintTextDefault = hintText ?? 'Không thể chỉnh sửa';
+  if (errorMessage || hintText) {
     return (
       <View style={styles.errorView}>
         <View style={styles.errorIcon}>
-          <Icon color={errorColor} source="ic_error" size={16} />
+          <Icon
+            color={errorMessage ? errorColor : hintColor}
+            source="ic_error"
+            size={16}
+          />
         </View>
         <Text
           style={Styles.flex}
-          color={errorColor}
+          color={errorMessage ? errorColor : hintColor}
           numberOfLines={2}
           typography={'description_default_regular'}>
-          {errorMessage}
+          {errorMessage ?? hintTextDefault}
         </Text>
       </View>
     );

package/Input/index.tsx

@@ -1,10 +1,10 @@
+import {TextInputProps, ViewStyle} from 'react-native';
 import Input from './Input';
-import InputTextArea from './InputTextArea';
-import InputSearch from './InputSearch';
+import InputDropDown from './InputDropDown';
 import InputMoney from './InputMoney';
 import InputOTP from './InputOTP';
-import InputDropDown from './InputDropDown';
-import {TextInputProps, ViewStyle} from 'react-native';
+import InputSearch from './InputSearch';
+import InputTextArea from './InputTextArea';
 
 export interface InputProps extends TextInputProps {
   /**
@@ -77,11 +77,25 @@ export interface InputProps extends TextInputProps {
    */
   leadingIconColor?: string;
 
+  /**
+   * Optional. Represents the font weight of the text in the Input component.
+   */
   fontWeight?: 'Regular' | 'Bold';
 
+  /**
+   * Optional. callback function to be called when the icon is pressed.
+   */
   onPressIcon?: () => void;
 
+  /**
+   * Optional. params for element tracking.
+   */
   params?: any;
+
+  /**
+   * Optional. Represents text below the Input component.
+   */
+  hintText?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -267,4 +281,4 @@ export interface InputDropDownProps extends InputProps {
   style?: ViewStyle | ViewStyle[];
 }
 
-export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};
+export {Input, InputDropDown, InputMoney, InputOTP, InputSearch, InputTextArea};

package/Layout/Screen.tsx

@@ -1,6 +1,18 @@
+import {useHeaderHeight} from '@react-navigation/stack';
+import React, {
+  forwardRef,
+  Fragment,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
 import {
   Animated,
+  Easing,
   KeyboardAvoidingView,
+  LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
   Platform,
@@ -8,28 +20,24 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import {useHeaderHeight} from '@react-navigation/stack';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import React, {
-  forwardRef,
-  Fragment,
-  ReactNode,
-  useContext,
-  useEffect,
-  useRef,
-} from 'react';
-import {Colors, Spacing, Styles} from '../Consts';
-import {Card, Section, validateChildren} from './index';
 import {
   ApplicationContext,
   HeaderBackground,
   HeaderTitle,
 } from '../Application';
 import Navigation from '../Application/Navigation';
-import styles from './styles';
 import {AnimatedHeader, NavigationOptions} from '../Application/types';
+import {Colors, Spacing, Styles} from '../Consts';
+import {
+  FloatingButton,
+  FloatingButtonProps,
+} from '../FloatingButton/FloatingButton';
 import {Image} from '../Image';
+import {Card, Section, validateChildren} from './index';
+import styles from './styles';
 import {HeaderType} from './types';
+import {debounce} from './utils';
 
 export interface ScreenProps extends ViewProps {
   children: React.ReactNode;
@@ -82,6 +90,11 @@ export interface ScreenProps extends ViewProps {
    * Optional. layout card offset overlap header banner.
    */
   layoutOffset?: -8 | -24 | -56;
+
+  /**
+   * Optional. Props for the floating action button.
+   */
+  floatingButtonProps?: Omit<FloatingButtonProps, 'animatedValue'>;
 }
 
 const Screen = forwardRef(
@@ -98,13 +111,18 @@ const Screen = forwardRef(
       layoutOffset = -56,
       backgroundColor,
       headerType = 'default',
+      floatingButtonProps,
     }: ScreenProps,
     ref,
   ) => {
     const animatedValue = useRef<Animated.Value | undefined>(undefined);
+    const lastScrollPosition = useRef(0);
+    const animatedFABValue = useRef(new Animated.Value(0)).current;
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
+    const layoutHeight = useRef(0);
+    const contentHeight = useRef(0);
     const currentTint = useRef(Colors.black_01);
     let styleAnimatedHeader: NavigationOptions;
     let handleScroll;
@@ -155,7 +173,7 @@ const Screen = forwardRef(
 
     useEffect(() => {
       if (!animatedHeader) {
-        let headerOptions: NavigationOptions = {};
+        let headerOptions: NavigationOptions;
         switch (headerType) {
           case 'none':
             headerOptions = {
@@ -213,8 +231,9 @@ const Screen = forwardRef(
     if (scrollable) {
       Component = Animated.ScrollView;
       handleScroll = scrollViewProps?.onScroll;
-      if (animatedHeader) {
+      if (animatedHeader || floatingButtonProps) {
         animatedValue.current = new Animated.Value(0);
+
         handleScroll = Animated.event(
           [
             {
@@ -224,9 +243,9 @@ const Screen = forwardRef(
             },
           ],
           {
-            useNativeDriver: true,
+            useNativeDriver: false,
             listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-              if (animatedHeader.type == 'surface') {
+              if (animatedHeader?.type == 'surface') {
                 const offsetY = e.nativeEvent.contentOffset.y;
                 let color = Colors.black_01;
                 if (offsetY > 50) {
@@ -239,13 +258,46 @@ const Screen = forwardRef(
                   });
                 }
               }
-              scrollViewProps?.onScroll?.(e);
+              if (floatingButtonProps) {
+                const currentScrollPosition = e.nativeEvent.contentOffset.y;
+                const isScrollingDown =
+                  currentScrollPosition > lastScrollPosition.current;
+                scrollViewProps?.onScroll?.(e);
+
+                if (currentScrollPosition < 0) {
+                  return;
+                }
+                const isAtBottom =
+                  currentScrollPosition +
+                    layoutHeight.current +
+                    Math.min(insets.bottom, 21) +
+                    Spacing.S >=
+                  contentHeight.current;
+                if (isAtBottom) {
+                  return;
+                }
+                animateFAB(isScrollingDown);
+
+                lastScrollPosition.current = currentScrollPosition;
+              }
             },
           },
         );
       }
     }
 
+    const animateFAB = useCallback(
+      debounce((isScrollingDown: boolean) => {
+        Animated.timing(animatedFABValue, {
+          toValue: isScrollingDown ? 1 : 0,
+          duration: 100,
+          useNativeDriver: false,
+          easing: Easing.linear,
+        }).start();
+      }, 300),
+      [],
+    );
+
     /**
      * render top navigation banner
      */
@@ -299,7 +351,6 @@ const Screen = forwardRef(
         );
       }
     };
-
     return (
       <View style={[Styles.flex, {backgroundColor}]}>
         {!!headerBackground && (
@@ -327,6 +378,12 @@ const Screen = forwardRef(
             ref={ref}
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
+            onContentSizeChange={(_: number, height: number) => {
+              contentHeight.current = height;
+            }}
+            onLayout={(event: LayoutChangeEvent) => {
+              layoutHeight.current = event.nativeEvent.layout.height;
+            }}
             style={Styles.flex}>
             <View
               style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
@@ -334,10 +391,25 @@ const Screen = forwardRef(
             </View>
             {renderContent(children)}
           </Component>
+          <View>
+            {floatingButtonProps && (
+              <FloatingButton
+                label={floatingButtonProps?.label}
+                onPress={floatingButtonProps?.onPress}
+                size={floatingButtonProps?.size}
+                position={floatingButtonProps?.position}
+                icon={floatingButtonProps?.icon}
+                iconColor={floatingButtonProps?.iconColor}
+                isBottomTab={floatingButtonProps?.isBottomTab}
+                animatedValue={animatedFABValue}
+                isFooter={!!Footer}
+              />
+            )}
+          </View>
           {Footer && (
             <View
               style={[
-                styles.footerContainer,
+                styles.shadow,
                 {
                   paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
                   backgroundColor: theme.colors.background.surface,

package/Layout/styles.ts

@@ -80,17 +80,21 @@ export default StyleSheet.create({
     paddingHorizontal: undefined,
     paddingVertical: undefined,
   },
-  footerContainer: {
+  shadow: {
     paddingTop: Spacing.S,
     ...Platform.select({
-      android: {
-        elevation: 4,
-      },
       ios: {
+        shadowColor: Colors.black_17,
+        shadowOffset: {
+          width: 2,
+          height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 10,
+      },
+      android: {
         shadowColor: Colors.black_20,
-        shadowOffset: {width: 0, height: -2},
-        shadowOpacity: 0.1,
-        shadowRadius: 3,
+        elevation: 24,
       },
     }),
   },

package/Layout/utils.ts

@@ -1,5 +1,5 @@
-import {Dimensions} from 'react-native';
 import React, {Fragment, ReactElement, useEffect, useState} from 'react';
+import {Dimensions} from 'react-native';
 
 /**
  * validate children type
@@ -51,5 +51,20 @@ const useGridSystem = () => {
 
   return {numberOfColumns};
 };
+function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout | null = null;
+
+  return function (...args: Parameters<T>) {
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+}
 
-export {validateChildren, useGridSystem};
+export {debounce, useGridSystem, validateChildren};

package/Popup/PopupNotify.tsx

@@ -1,12 +1,12 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
 import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
-import {PopupNotifyProps} from './types';
-import {Radius, Spacing, Styles} from '../Consts';
-import {Image} from '../Image';
-import {Text} from '../Text';
 import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
+import {Radius, Spacing, Styles} from '../Consts';
 import {Icon} from '../Icon';
+import {Image} from '../Image';
+import {Text} from '../Text';
+import {PopupNotifyProps} from './types';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
@@ -23,14 +23,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const {theme, navigator, translate} = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
   const closeAction = useRef('touch_outside');
-
   let descriptionStyle = {};
   let Description: any = View;
   if (scrollContent) {
     Description = ScrollView;
     descriptionStyle = {height: 80};
   }
-
   /**
    * tracking
    */
@@ -160,30 +158,32 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    return (
-      <TouchableOpacity
-        accessibilityLabel={'ic_popup_close'}
-        style={styles.iconCloseContainer}
-        onPress={() => {
-          closeAction.current = 'icon_close';
-          onAction(onIconClose);
-        }}>
-        <View
-          style={[
-            styles.iconClose,
-            {
-              backgroundColor: theme.colors.text.default,
-              borderColor: theme.colors.background.surface,
-            },
-          ]}>
-          <Icon
-            source="navigation_close"
-            color={theme.colors.background.surface}
-            size={14}
-          />
-        </View>
-      </TouchableOpacity>
-    );
+    if (typeof onIconClose === 'function') {
+      return (
+        <TouchableOpacity
+          accessibilityLabel={'ic_popup_close'}
+          style={styles.iconCloseContainer}
+          onPress={() => {
+            closeAction.current = 'icon_close';
+            onAction(onIconClose);
+          }}>
+          <View
+            style={[
+              styles.iconClose,
+              {
+                backgroundColor: theme.colors.text.default,
+                borderColor: theme.colors.background.surface,
+              },
+            ]}>
+            <Icon
+              source="navigation_close"
+              color={theme.colors.background.surface}
+              size={14}
+            />
+          </View>
+        </TouchableOpacity>
+      );
+    }
   };
 
   return (

package/Popup/types.ts

@@ -1,4 +1,3 @@
-import {TextStyle} from 'react-native';
 import React from 'react';
 
 export type PopupNotifyProps = {
@@ -79,9 +78,4 @@ type PopupAction = {
   onPress: () => void;
 };
 
-export type HighlightText = {
-  text: string;
-  style: TextStyle;
-};
-
 type PopupActionDirection = 'row' | 'column' | 'auto';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.5",
+    "version": "0.92.6-beta.11",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -16,12 +16,12 @@
         "react-native-gesture-handler": "1.10.3",
         "react-native-modalize": "2.1.1",
         "react-native-fast-image": "8.1.5",
-        "@react-navigation/bottom-tabs": "git+https://gitlab.mservice.com.vn/momo-platform/react-navigation-bottom-tabs.git",
+        "@react-navigation/bottom-tabs": "https://oauth2:5WXQLHPMxxCyvGt_Py4D@gitlab.mservice.com.vn/momo-platform/react-native-bottom-tabs.git",
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
         "lottie-react-native": "3.3.2",
-        "@react-navigation/stack": "git+https://gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
+        "@react-navigation/stack": "https://oauth2:eX-jVhzQdLc343AjD3Sc@gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
     },
     "peerDependencies": {
         "react-native": "*"