@momo-kits/foundation 0.92.6-rc.1 → 0.92.6-rc.10

package/Application/ModalScreen.tsx

@@ -10,7 +10,7 @@ import {
 import {Modalize} from 'react-native-modalize';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 
-import {ApplicationContext} from '.';
+import {ApplicationContext} from './index';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {Text} from '../Text';

package/Application/Navigation.ts

@@ -6,8 +6,8 @@ import {getOptions} from './utils';
 import {HeaderToolkitAction} from './Components';
 
 class Navigation {
-  private instance: NavigationProp<any>;
-  private readonly theme: Theme;
+  instance: NavigationProp<any>;
+  readonly theme: Theme;
 
   constructor(instance: any, theme: Theme) {
     this.instance = instance;

package/Application/StackScreen.tsx

@@ -27,8 +27,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const heightHeader = useHeaderHeight();
 
   const data = {
-    ...props.route.params,
     ...initialParams,
+    ...props.route.params,
     navigation,
   };
 

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/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/Image/index.tsx

@@ -2,7 +2,11 @@ import React, {useContext, useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
-import {ApplicationContext, ComponentContext, MiniAppContext} from '../Application';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
@@ -30,9 +34,9 @@ const Image: React.FC<ImageProps> = ({
   };
 
   useEffect(() => {
-    if(app.enableAutoId){
+    if (app.enableAutoId) {
       component?.addChildren?.(test.accessibilityLabel, 'add');
-      return () => component?.addChildren(test.accessibilityLabel, 'remove');
+      return () => component?.addChildren?.(test.accessibilityLabel, 'remove');
     }
   }, []);
 
@@ -57,37 +61,37 @@ const Image: React.FC<ImageProps> = ({
   };
 
   return (
-      <FastImage
-          {...rest}
-          {...test}
-          source={source}
-          style={[styles.container, style]}
-          onProgress={() => {
-            error.current = false;
-            if (status !== 'loading' && loading) {
-              setStatus('loading');
-            }
-          }}
-          onLoadStart={() => {
-            error.current = false;
-          }}
-          onLoad={() => {
-            error.current = false;
-          }}
-          onLoadEnd={() => {
-            let current: Status = 'success';
-            if (error.current) {
-              current = 'error';
-            }
-            if (status !== current) {
-              setStatus(current);
-            }
-          }}
-          onError={() => {
-            error.current = true;
-          }}>
-        {renderContent()}
-      </FastImage>
+    <FastImage
+      {...rest}
+      {...test}
+      source={source}
+      style={[styles.container, style]}
+      onProgress={() => {
+        error.current = false;
+        if (status !== 'loading' && loading) {
+          setStatus('loading');
+        }
+      }}
+      onLoadStart={() => {
+        error.current = false;
+      }}
+      onLoad={() => {
+        error.current = false;
+      }}
+      onLoadEnd={() => {
+        let current: Status = 'success';
+        if (error.current) {
+          current = 'error';
+        }
+        if (status !== current) {
+          setStatus(current);
+        }
+      }}
+      onError={() => {
+        error.current = true;
+      }}>
+      {renderContent()}
+    </FastImage>
   );
 };
 

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,7 +48,9 @@ const Input = forwardRef(
       keyboardType,
       style,
       params,
+      hintText,
       accessibilityLabel,
+      editable = true,
       ...props
     }: InputProps,
     ref,
@@ -51,7 +59,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 +81,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} />;
@@ -152,7 +169,7 @@ const Input = forwardRef(
             <TextInput
               {...props}
               accessibilityLabel={accessibilityLabel}
-              editable={props.editable && !disabled}
+              editable={editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}
@@ -217,7 +234,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/FloatingButton.tsx

@@ -0,0 +1,128 @@
+import {default as React, useContext, useEffect, useRef, useState} from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {ApplicationContext} from '../Application';
+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;
+  bottom?: number;
+}
+
+export const FloatingButton: React.FC<FloatingButtonProps> = ({
+  label = '',
+  onPress = () => {},
+  position = 'right',
+  icon = '',
+  iconColor = '',
+  size = 'small',
+  animatedValue,
+  bottom = 12,
+}: FloatingButtonProps) => {
+  const {theme} = useContext(ApplicationContext);
+  const maxWidth = useRef(0);
+  const minWidth = size == 'small' ? 36 : 48;
+  const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
+  const lastOffset = useRef(0);
+  const debounce = useRef<any>();
+  const [showText, setShowText] = React.useState(true);
+
+  useEffect(() => {
+    if (!label) return;
+
+    const listener = animatedValue?.addListener(({value}) => {
+      clearTimeout(debounce.current);
+      debounce.current = setTimeout(() => {
+        const down = value > lastOffset.current;
+        lastOffset.current = value;
+        if (down) {
+          Animated.timing(widthAnimated!, {
+            toValue: minWidth,
+            duration: 300,
+            useNativeDriver: false,
+          }).start(() => setShowText(false));
+        } else {
+          Animated.timing(widthAnimated!, {
+            toValue: maxWidth.current,
+            duration: 300,
+            useNativeDriver: false,
+          }).start(() => setShowText(true));
+        }
+      }, 500);
+    });
+
+    return () => {
+      if (listener != null) {
+        animatedValue?.removeListener(listener);
+      }
+    };
+  }, [label, widthAnimated]);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const layout = event.nativeEvent.layout;
+    if (widthAnimated) return;
+    maxWidth.current = layout.width;
+    setWidthAnimated(new Animated.Value(layout.width));
+  };
+
+  return (
+    <Animated.View
+      onLayout={handleLayout}
+      style={[
+        styles.container,
+        {
+          right: position === 'right' ? 12 : undefined,
+          alignSelf: position === 'center' ? 'center' : 'flex-end',
+          width: widthAnimated,
+          height: size == 'small' ? 36 : 48,
+          backgroundColor: theme.colors.primary,
+          bottom,
+        },
+      ]}>
+      <TouchableOpacity
+        style={{flexDirection: 'row', alignItems: 'center'}}
+        onPress={onPress}>
+        <Icon
+          source={icon}
+          size={size === 'small' ? 12 : 24}
+          color={iconColor}
+        />
+        {showText && !!label && (
+          <Text
+            style={styles.label}
+            color="white"
+            typography="action_default_bold">
+            {label}
+          </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/Layout/Screen.tsx

@@ -1,3 +1,12 @@
+import {useHeaderHeight} from '@react-navigation/stack';
+import React, {
+  forwardRef,
+  Fragment,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
 import {
   Animated,
   KeyboardAvoidingView,
@@ -8,27 +17,19 @@ 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';
 import {Image} from '../Image';
+import {Card, Section, validateChildren} from './index';
+import styles from './styles';
 import {HeaderType} from './types';
 
 export interface ScreenProps extends ViewProps {
@@ -82,6 +83,16 @@ 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' | 'bottom'>;
+
+  /**
+   * Optional. If `true`, the screen content is using grid layout by span.
+   */
+  useGridLayout?: boolean;
 }
 
 const Screen = forwardRef(
@@ -98,20 +109,23 @@ const Screen = forwardRef(
       layoutOffset = -56,
       backgroundColor,
       headerType = 'default',
+      floatingButtonProps,
+      useGridLayout = true,
     }: ScreenProps,
     ref,
   ) => {
-    const animatedValue = useRef<Animated.Value | undefined>(undefined);
+    const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     const currentTint = useRef(Colors.black_01);
+    const isTab = navigation?.instance?.getState?.()?.type == 'tab';
+
     let styleAnimatedHeader: NavigationOptions;
     let handleScroll;
     let headerBackground: string | undefined = undefined;
     let Component: any = View;
     let keyboardVerticalOffset = heightHeader - 20;
-    animatedValue.current = undefined;
 
     if (headerType == 'extended' || animatedHeader) {
       keyboardVerticalOffset = -20;
@@ -155,7 +169,7 @@ const Screen = forwardRef(
 
     useEffect(() => {
       if (!animatedHeader) {
-        let headerOptions: NavigationOptions = {};
+        let headerOptions: NavigationOptions;
         switch (headerType) {
           case 'none':
             headerOptions = {
@@ -176,12 +190,9 @@ const Screen = forwardRef(
                   image={null}
                   backgroundColor={theme.colors.background.surface}
                   useBorder={true}
-                  animatedValue={animatedValue.current}
                 />
               ),
-              headerTitle: (props: any) => (
-                <HeaderTitle {...props} animatedValue={animatedValue.current} />
-              ),
+              headerTitle: (props: any) => <HeaderTitle {...props} />,
             };
             break;
 
@@ -213,8 +224,7 @@ const Screen = forwardRef(
     if (scrollable) {
       Component = Animated.ScrollView;
       handleScroll = scrollViewProps?.onScroll;
-      if (animatedHeader) {
-        animatedValue.current = new Animated.Value(0);
+      if (animatedHeader || floatingButtonProps) {
         handleScroll = Animated.event(
           [
             {
@@ -224,9 +234,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,7 +249,6 @@ const Screen = forwardRef(
                   });
                 }
               }
-              scrollViewProps?.onScroll?.(e);
             },
           },
         );
@@ -322,6 +331,7 @@ const Screen = forwardRef(
             android: undefined,
           })}>
           {Header}
+
           <Component
             {...scrollViewProps}
             ref={ref}
@@ -332,12 +342,25 @@ const Screen = forwardRef(
               style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
               {renderHeader()}
             </View>
-            {renderContent(children)}
+            {useGridLayout ? renderContent(children) : children}
           </Component>
+
+          {floatingButtonProps && (
+            <View>
+              <FloatingButton
+                {...floatingButtonProps}
+                animatedValue={animatedValue.current}
+                bottom={
+                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
+                }
+              />
+            </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
@@ -52,4 +52,4 @@ const useGridSystem = () => {
   return {numberOfColumns};
 };
 
-export {validateChildren, useGridSystem};
+export {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,11 +1,9 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.6-rc.1",
+    "version": "0.92.6-rc.10",
     "description": "React Native Component Kits",
     "main": "index.ts",
-    "scripts": {
-        "postinstall": "node verify.js"
-    },
+    "scripts": {},
     "keywords": [
         "@momo-kits/foundation"
     ],