@momo-kits/foundation 0.80.8-beta.1 → 0.80.8-beta.10

package/Application/Components.tsx

@@ -6,7 +6,7 @@ import {
   Platform,
   StatusBar,
   StyleSheet,
-  TouchableOpacity as TouchableRN,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import {TouchableOpacity as TouchableGesture} from 'react-native-gesture-handler';
@@ -14,6 +14,7 @@ import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {
+  HeaderAnimatedProps,
   HeaderBackgroundProps,
   HeaderBackProps,
   HeaderToolkitProps,
@@ -24,7 +25,8 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
-const Touchable = Platform.OS === 'android' ? TouchableGesture : TouchableRN;
+const Touchable =
+  Platform.OS === 'android' ? TouchableGesture : TouchableOpacity;
 
 const styles = StyleSheet.create({
   navigationButton: {
@@ -416,6 +418,41 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
   return <View />;
 };
 
+const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
+  animatedValue,
+  image,
+  onPress,
+}) => {
+  const scale = animatedValue.interpolate({
+    inputRange: [-300, 0, 300],
+    outputRange: [2, 1, 1],
+    extrapolate: 'clamp',
+  });
+  const opacity = animatedValue.interpolate({
+    inputRange: [0, 150, 300],
+    outputRange: [1, 0.5, 0],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <Animated.View
+        style={{
+          aspectRatio: 1.75,
+          opacity: opacity,
+          transform: [{scale: scale}],
+        }}>
+        <Image
+          source={{
+            uri: image,
+          }}
+          style={{width: '100%', height: '100%'}}
+        />
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};
+
 export {
   NavigationButton,
   HeaderTitle,
@@ -424,4 +461,5 @@ export {
   HeaderRightAction,
   HeaderToolkitAction,
   HeaderCustom,
+  HeaderAnimated,
 };

package/Application/ModalScreen.tsx

@@ -193,6 +193,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                       />
                     );
                   },
+                  headerTintColor: theme.colors.text.default,
                   headerBackground: () => (
                     <HeaderBackground backgroundColor={backgroundColor} />
                   ),

package/Application/Navigation.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import {NavigationProp} from '@react-navigation/native';
 import {Alert} from 'react-native';
 import {NavigationOptions, Theme} from './types';
@@ -16,7 +17,7 @@ class Navigation {
 
   private filterParams = (params: NavigationOptions) => {
     if (params.headerRight) {
-      const headerRight = params.headerRight?.();
+      const headerRight = params.headerRight?.({}) as React.ReactElement;
       const type = headerRight?.type;
       if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
         Alert.alert(

package/Application/NavigationContainer.tsx

@@ -93,12 +93,12 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
                 name="Stack"
                 component={StackScreen}
                 initialParams={{screen}}
-                options={{...getStackOptions(theme), ...options}}
+                options={{...getStackOptions(), ...options}}
               />
               <Stack.Screen
                 name="Dialog"
                 component={StackScreen}
-                options={getDialogOptions(theme)}
+                options={getDialogOptions()}
                 initialParams={{screen}}
               />
               <Stack.Screen

package/Application/index.ts

@@ -1,24 +1,31 @@
 import {NavigationContainer} from './NavigationContainer';
 import Screen from '../Layout/Screen';
 import {
-  HeaderRightAction,
   NavigationButton,
-  HeaderToolkitAction,
   HeaderTitle,
+  HeaderLeft,
+  HeaderBackground,
+  HeaderRightAction,
+  HeaderToolkitAction,
+  HeaderCustom,
+  HeaderAnimated,
 } from './Components';
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';
 
 const ApplicationContext = createContext(defaultContext);
-
 export {
   NavigationContainer,
   ApplicationContext,
   Screen,
+  BottomTab,
   NavigationButton,
+  HeaderTitle,
+  HeaderLeft,
+  HeaderBackground,
   HeaderRightAction,
   HeaderToolkitAction,
-  HeaderTitle,
-  BottomTab,
+  HeaderCustom,
+  HeaderAnimated,
 };

package/Application/types.ts

@@ -1,4 +1,5 @@
 import {Animated} from 'react-native';
+import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import Navigator from './Navigator';
 import {PopupNotifyProps} from '../Popup/types';
@@ -119,19 +120,15 @@ export type NavigationButtonProps = {
   accessibilityLabel?: string;
 };
 
-export type NavigationOptions = {
+export interface NavigationOptions extends StackNavigationOptions {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
   surface?: boolean;
-  headerTransparent?: boolean;
   hiddenBack?: boolean;
-  title?: string;
-  headerTitle?: (props?: any) => React.ReactElement;
   headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
-  headerRight?: (props?: any) => React.ReactElement;
   animatedValue?: Animated.Value;
-};
+}
 
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
@@ -164,6 +161,12 @@ export type HeaderToolkitProps = {
   onAction?: (action: string) => void;
 };
 
+export type HeaderAnimatedProps = {
+  animatedValue: Animated.Value;
+  image: string;
+  onPress?: () => void;
+};
+
 export type BottomTabItemProps = {
   name: string;
   label: string;

package/Application/utils.tsx

@@ -13,35 +13,24 @@ import {
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
 
-const getTintColor = (theme: Theme): any => {
-  if (theme.assets?.headerBackground) {
-    return {
-      headerTintColor: Colors.black_01,
-    };
-  }
-  return {
-    headerTintColor: theme.colors.text.default,
-  };
-};
-
-const getStackOptions = (theme: Theme): StackNavigationOptions => {
+const getStackOptions = (): StackNavigationOptions => {
   return {
     headerTitleAlign: 'left',
     headerTitle: HeaderTitle,
-    headerBackground: HeaderBackground,
+    headerBackground: (props: any) => <HeaderBackground {...props} />,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
     headerRight: (props: any) => <HeaderToolkitAction {...props} />,
-    ...getTintColor(theme),
+    headerTintColor: Colors.black_01,
   };
 };
 
-const getDialogOptions = (theme: Theme): StackNavigationOptions => {
+const getDialogOptions = (): StackNavigationOptions => {
   return {
     headerTitleAlign: 'left',
     headerTitle: HeaderTitle,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerBackground: HeaderBackground,
-    ...getTintColor(theme),
+    headerBackground: (props: any) => <HeaderBackground {...props} />,
+    headerTintColor: Colors.black_01,
     ...TransitionPresets.ModalTransition,
   };
 };
@@ -72,8 +61,6 @@ const getModalOptions = (): StackNavigationOptions => {
 };
 
 const getOptions = (params: NavigationOptions, theme: Theme) => {
-  let backgroundProps: any;
-  let titleProps: any;
   let options = {};
 
   if (
@@ -99,36 +86,24 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     if (params.surface) {
       options = {
         ...options,
-        ...getTintColor({
-          ...theme,
-          assets: {...theme.assets, headerBackground: undefined},
-        }),
-      };
-      backgroundProps = {
-        image: null,
-        backgroundColor: theme.colors.background.surface,
-        useBorder: true,
+        headerTintColor: theme.colors.text.default,
+        headerBackground: () => (
+          <HeaderBackground
+            image={null}
+            backgroundColor={theme.colors.background.surface}
+            useBorder={true}
+          />
+        ),
       };
     } else {
       options = {
         ...options,
-        ...getTintColor(theme),
+        headerTintColor: Colors.black_01,
         headerBackground: HeaderBackground,
       };
     }
   }
 
-  if (params.animatedValue) {
-    backgroundProps = {...backgroundProps, animatedValue: params.animatedValue};
-    titleProps = {animatedValue: params.animatedValue};
-    options = {
-      ...options,
-      headerTitle: (props: any) => {
-        return <HeaderTitle {...titleProps} {...props} />;
-      },
-    };
-  }
-
   if (params.customTitle) {
     options = {
       ...options,
@@ -139,13 +114,6 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (backgroundProps) {
-    options = {
-      ...options,
-      headerBackground: () => <HeaderBackground {...backgroundProps} />,
-    };
-  }
-
   return {
     ...params,
     ...options,

package/Input/Input.tsx

@@ -35,6 +35,7 @@ const Input = forwardRef(
       loading,
       leadingIcon,
       leadingIconColor,
+      style,
       ...props
     }: InputProps,
     ref,
@@ -43,6 +44,7 @@ const Input = forwardRef(
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const accessibilityLabel = `Input/${floatingValue ?? placeholder}`;
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -112,7 +114,7 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              accessibilityLabel={`TextInput`}
+              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="center"
               ref={inputRef}
@@ -153,8 +155,8 @@ const Input = forwardRef(
 
     return (
       <View
-        style={styles.wrapper}
-        accessibilityLabel={`Input/${floatingValue}`}>
+        style={[style, styles.wrapper]}
+        accessibilityLabel={accessibilityLabel}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/InputDropDown.tsx

@@ -25,10 +25,13 @@ const InputDropDown = ({
   loading,
   leadingIcon,
   leadingIconColor,
+  style,
   ...props
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
+  const accessibilityLabel = `InputDropDown/${floatingValue ?? placeholder}`;
+
   const renderIcon = (color: string | undefined) => {
     if (loading) {
       return <Loader type={'spinner'} color={color} />;
@@ -79,7 +82,7 @@ const InputDropDown = ({
             <TextInput
               {...props}
               onPressIn={onPress}
-              accessibilityLabel={`TextInput`}
+              accessibilityLabel={accessibilityLabel}
               editable={false}
               textAlignVertical="top"
               style={[
@@ -105,8 +108,8 @@ const InputDropDown = ({
   return (
     <TouchableOpacity
       onPress={onPress}
-      style={full && styles.wrapper}
-      accessibilityLabel={`InputDropDown/${floatingValue}`}>
+      style={[style, full && styles.wrapper]}
+      accessibilityLabel={accessibilityLabel}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
     </TouchableOpacity>

package/Input/InputMoney.tsx

@@ -29,6 +29,7 @@ const InputMoney = forwardRef(
       iconColor,
       required,
       errorSpacing,
+      style,
       ...props
     }: InputMoneyProps,
     ref,
@@ -37,6 +38,8 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const [value, setValue] = useState('');
+    const accessibilityLabel = `InputMoney/${floatingValue}`;
+
     const onClearText = () => {
       inputRef?.current?.clear();
       setValue('');
@@ -91,7 +94,7 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={`TextInput`}
+              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -131,8 +134,8 @@ const InputMoney = forwardRef(
 
     return (
       <View
-        style={styles.wrapper}
-        accessibilityLabel={`InputMoney/${floatingValue}`}>
+        style={[style, styles.wrapper]}
+        accessibilityLabel={accessibilityLabel}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/InputOTP.tsx

@@ -1,7 +1,6 @@
 import React, {FC, useContext, useEffect, useRef, useState} from 'react';
 import {
   Animated,
-  KeyboardType,
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
@@ -69,6 +68,7 @@ const InputOTP: FC<InputOTPProps> = ({
   onFocus,
   onBlur,
   dataType = 'number',
+  style,
   ...props
 }) => {
   const MAX_LENGTH = 10;
@@ -76,6 +76,7 @@ const InputOTP: FC<InputOTPProps> = ({
   const [focused, setFocused] = useState(false);
   const inputRef = useRef<TextInput>(null);
   const {theme} = useContext(ApplicationContext);
+  const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
 
   const onFocusInput = () => {
     setFocused(true);
@@ -157,9 +158,6 @@ const InputOTP: FC<InputOTPProps> = ({
   };
 
   const renderInputView = () => {
-    let placeholderColor = theme.colors.text.hint;
-    const keyboardType: KeyboardType =
-      dataType === 'number' ? 'number-pad' : 'default';
     return (
       <View
         style={[
@@ -182,16 +180,16 @@ const InputOTP: FC<InputOTPProps> = ({
         <View style={styles.inputView}>
           <TextInput
             {...props}
-            accessibilityLabel={`TextInput`}
+            accessibilityLabel={accessibilityLabel}
             ref={inputRef}
             value={value}
             onChangeText={_onChangeText}
-            keyboardType={keyboardType}
+            keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
             onFocus={onFocusInput}
             onBlur={onBlurInput}
             style={{opacity: 0}}
             selectionColor={theme.colors.primary}
-            placeholderTextColor={placeholderColor}
+            placeholderTextColor={theme.colors.text.hint}
           />
         </View>
       </View>
@@ -202,8 +200,8 @@ const InputOTP: FC<InputOTPProps> = ({
     <TouchableOpacity
       activeOpacity={1}
       onPress={onFocusInput}
-      style={styles.otpWrapper}
-      accessibilityLabel={`Input/${floatingValue}`}>
+      style={[style, styles.otpWrapper]}
+      accessibilityLabel={accessibilityLabel}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
     </TouchableOpacity>

package/Input/InputSearch.tsx

@@ -37,7 +37,7 @@ const InputSearch = forwardRef(
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    let iconTintColor = iconColor;
+    const accessibilityLabel = `InputMoney/${placeholder}`;
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -60,19 +60,16 @@ const InputSearch = forwardRef(
     };
 
     const renderInputView = () => {
-      let textColor = theme.colors.text.default;
-      let placeholderColor = theme.colors.text.hint;
-
       return (
         <TextInput
           {...props}
-          accessibilityLabel={`TextInput`}
+          accessibilityLabel={accessibilityLabel}
           textAlignVertical="top"
           ref={inputRef}
           style={[
             styles.searchInput,
             {
-              color: textColor,
+              color: theme.colors.text.default,
             },
           ]}
           value={value}
@@ -81,7 +78,7 @@ const InputSearch = forwardRef(
           onBlur={_onBlur}
           placeholder={placeholder}
           selectionColor={theme.colors.primary}
-          placeholderTextColor={placeholderColor}
+          placeholderTextColor={theme.colors.text.hint}
         />
       );
     };
@@ -112,7 +109,7 @@ const InputSearch = forwardRef(
                 ]}
               />
               <Icon
-                color={iconTintColor}
+                color={iconColor}
                 source={icon}
                 style={styles.iconSearchInput}
               />
@@ -124,7 +121,7 @@ const InputSearch = forwardRef(
     return (
       <View
         style={[style, styles.searchInputContainer]}
-        accessibilityLabel={`InputSearch/${placeholder}`}>
+        accessibilityLabel={accessibilityLabel}>
         <View
           style={[
             styles.searchInputWrapper,

package/Input/InputTextArea.tsx

@@ -37,6 +37,7 @@ const InputTextArea = forwardRef(
       maxLength,
       required,
       errorSpacing,
+      style,
       ...props
     }: InputTextAreaProps,
     ref,
@@ -45,6 +46,7 @@ const InputTextArea = forwardRef(
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const accessibilityLabel = `InputTextArea/${floatingValue ?? placeholder}`;
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -106,7 +108,7 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                accessibilityLabel={`TextInput`}
+                accessibilityLabel={accessibilityLabel}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -147,8 +149,8 @@ const InputTextArea = forwardRef(
 
     return (
       <View
-        style={styles.wrapper}
-        accessibilityLabel={`InputTextArea/${floatingValue}`}>
+        style={[style, styles.wrapper]}
+        accessibilityLabel={accessibilityLabel}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/common.tsx

@@ -1,6 +1,6 @@
 import {View, ViewStyle} from 'react-native';
 import styles from './styles';
-import {Text} from '../Text';
+import {scaleSize, Text} from '../Text';
 import React, {FC, useContext} from 'react';
 import {ApplicationContext} from '../Application';
 import {Icon} from '../Icon';
@@ -16,7 +16,7 @@ type FloatingViewProps = {
   style?: ViewStyle;
 };
 
-export const DEFAULT_HEIGHT = 112;
+export const DEFAULT_HEIGHT = scaleSize(104);
 export const MAX_LENGTH = 300;
 
 export const getBorderColor = (

package/Input/index.tsx

@@ -4,7 +4,7 @@ import InputSearch from './InputSearch';
 import InputMoney from './InputMoney';
 import InputOTP from './InputOTP';
 import InputDropDown from './InputDropDown';
-import {TextInputProps} from 'react-native';
+import {TextInputProps, ViewStyle} from 'react-native';
 
 export interface InputProps extends TextInputProps {
   /**
@@ -238,6 +238,8 @@ export interface InputDropDownProps {
    * Optional. Represents the color of the leading icon in the InputDropDown component.
    */
   leadingIconColor?: string;
+
+  style: ViewStyle | ViewStyle[];
 }
 
 export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};

package/Layout/Card.tsx

@@ -7,16 +7,23 @@ import Item from './Item';
 import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
-import {Colors, Spacing} from '../Consts';
+import {Colors, Radius, Shadow, Spacing} from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
    * Optional. Background image for the card.
    */
   backgroundImage?: string;
+
+  useShadow?: boolean;
 }
 
-const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
+const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  backgroundImage,
+  useShadow = false,
+}) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
@@ -127,22 +134,28 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
     return element;
   };
 
+  const {theme} = useContext(ApplicationContext);
   return (
     <GridContext.Provider value={gridContext}>
       <View
         accessibilityLabel={`Card`}
         style={[
+          {
+            backgroundColor: theme.colors.background.surface,
+            borderRadius: Radius.M,
+          },
           style,
           styles.card,
           {
             width: widthSection,
             marginHorizontal: gridContext.margin,
           },
+          Shadow.Light,
         ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}
-            style={[style, styles.imageBackground]}
+            style={styles.imageBackground}
           />
         )}
         {renderView(validateChildren(children, [Item]))}

package/Layout/Screen.tsx

@@ -1,5 +1,6 @@
 import {
   Animated,
+  Image,
   KeyboardAvoidingView,
   Platform,
   ScrollViewProps,
@@ -8,13 +9,24 @@ import {
 } from 'react-native';
 import {useHeaderHeight} from '@react-navigation/stack';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import React, {ReactNode, useContext, useEffect, useRef} from 'react';
+import React, {
+  forwardRef,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
 import {Spacing, Styles} from '../Consts';
 import {Card, Section, validateChildren} from './index';
-import {ApplicationContext, HeaderTitle} from '../Application';
+import {
+  ApplicationContext,
+  HeaderBackground,
+  HeaderTitle,
+} from '../Application';
 import Navigation from '../Application/Navigation';
 
 export interface ScreenProps extends ViewProps {
+  children: React.ReactNode;
   /**
    * Optional. Navigation object for handling navigation actions.
    */
@@ -25,31 +37,31 @@ export interface ScreenProps extends ViewProps {
    */
   enableKeyboardAvoidingView?: boolean;
 
-  /**
-   * Optional. Background color of the header.
-   */
-  headerBackground?: string;
-
   /**
    * Optional. If `true`, the screen content is scrollable.
    */
   scrollable?: boolean;
 
   /**
-   * Optional. If `true`, use an animated header for the screen.
+   * Optional. If `true`, use an extended header for the screen.
    */
-  useAnimatedHeader?: boolean;
+  useExtendedHeader?: boolean;
 
   /**
-   * Optional. If `true`, use an extended header for the screen.
+   * Optional. Props for the animated component or bool used top navigation animated.
    */
-  useExtendedHeader?: boolean;
+  animatedHeader?: boolean | ((props?: any) => React.ReactElement);
 
   /**
    * Optional. Props for the underlying ScrollView component when `scrollable` is `true`.
    */
   scrollViewProps?: ScrollViewProps;
 
+  /**
+   * Optional. ReactNode representing the header component of the screen.
+   */
+  headerComponent?: ReactNode;
+
   /**
    * Optional. ReactNode representing the footer component of the screen.
    */
@@ -66,191 +78,204 @@ export interface ScreenProps extends ViewProps {
   backgroundColor?: string;
 }
 
-const Screen: React.FC<ScreenProps> = ({
-  children,
-  enableKeyboardAvoidingView = false,
-  scrollable = false,
-  navigation,
-  marginHeader,
-  useAnimatedHeader,
-  useExtendedHeader,
-  headerBackground,
-  scrollViewProps,
-  footerComponent: Footer,
-  backgroundColor,
-}) => {
-  const animatedValue = useRef<Animated.Value | undefined>(undefined);
-  const {theme} = useContext(ApplicationContext);
-  const insets = useSafeAreaInsets();
-  const headerTransparent = useAnimatedHeader || useExtendedHeader;
+const Screen = forwardRef(
+  (
+    {
+      children,
+      enableKeyboardAvoidingView = false,
+      scrollable = false,
+      navigation,
+      marginHeader,
+      useExtendedHeader,
+      animatedHeader,
+      scrollViewProps,
+      headerComponent: Header,
+      footerComponent: Footer,
+      backgroundColor,
+    }: ScreenProps,
+    ref,
+  ) => {
+    const animatedValue = useRef<Animated.Value | undefined>(undefined);
+    const {theme} = useContext(ApplicationContext);
+    const insets = useSafeAreaInsets();
 
-  let handleScroll;
-  let imageAnimatedStyle = {};
-  let opacity;
-  let Component: any = View;
-  animatedValue.current = undefined;
+    let handleScroll;
+    let headerBackground: string | undefined = undefined;
+    let Component: any = View;
+    animatedValue.current = undefined;
+
+    if (useExtendedHeader || animatedHeader) {
+      marginHeader = marginHeader ?? useHeaderHeight();
+    }
 
-  /**
-   * automatic margin content if use header transparent
-   */
-  if (headerTransparent) {
-    animatedValue.current = new Animated.Value(0);
-    marginHeader = marginHeader ?? useHeaderHeight();
     if (useExtendedHeader) {
       headerBackground = theme.assets?.headerBackground;
     }
-  }
 
-  useEffect(() => {
-    if (useAnimatedHeader != undefined || useExtendedHeader != undefined) {
-      let title = {};
+    useEffect(() => {
       if (useExtendedHeader) {
-        title = {headerTitle: HeaderTitle};
+        navigation?.setOptions({
+          headerTransparent: true,
+          headerBackground: () => null,
+        });
       }
-      navigation?.setOptions({
-        animatedValue: animatedValue.current,
-        headerTransparent: headerTransparent,
-        ...title,
-      });
-    }
-  }, [useExtendedHeader, useAnimatedHeader]);
+    }, [useExtendedHeader]);
 
-  /**
-   * animated for header stack when used bottom tab
-   */
-  useEffect(() => {
-    const current: any = navigation;
-    if (headerTransparent) {
-      return current?.addListener?.('focus', () => {
-        const stackNavigation = new Navigation(current?.getParent(), theme);
-        stackNavigation?.setOptions({
-          animatedValue: animatedValue.current,
+    useEffect(() => {
+      if (animatedHeader) {
+        navigation?.setOptions({
+          headerTransparent: true,
+          headerBackground: (props: any) => (
+            <HeaderBackground
+              {...props}
+              animatedValue={animatedValue.current}
+            />
+          ),
+          headerTitle: (props: any) => (
+            <HeaderTitle {...props} animatedValue={animatedValue.current} />
+          ),
         });
-      });
-    }
-  }, [useAnimatedHeader, useExtendedHeader, navigation]);
+        const current: any = navigation;
+        const parent = current?.getParent?.();
+        if (parent) {
+          return current?.addListener?.('focus', () => {
+            const stackNavigation = new Navigation(parent, theme);
+            stackNavigation?.setOptions({
+              headerTransparent: true,
+              headerBackground: (props: any) => (
+                <HeaderBackground
+                  {...props}
+                  animatedValue={animatedValue.current}
+                />
+              ),
+              headerTitle: (props: any) => (
+                <HeaderTitle {...props} animatedValue={animatedValue.current} />
+              ),
+            });
+          });
+        }
+      }
+    }, [animatedHeader]);
 
-  /**
-   * animated when use scroll && animated value
-   */
-  if (scrollable) {
-    Component = Animated.ScrollView;
-    if (useAnimatedHeader) {
-      opacity = animatedValue.current?.interpolate({
-        inputRange: [0, 100],
-        outputRange: [1, 0],
-        extrapolate: 'clamp',
-      });
-      imageAnimatedStyle = {
-        transform: [
-          {
-            scale: animatedValue.current?.interpolate?.({
-              inputRange: [-300, 0, 1],
-              outputRange: [1.75, 1, 1],
-              extrapolate: 'clamp',
-            }),
-          },
-        ],
-      };
-      handleScroll = Animated.event(
-        [
-          {
-            nativeEvent: {
-              contentOffset: {y: animatedValue.current as Animated.Value},
+    /**
+     * animated when use scroll && animated value
+     */
+    if (scrollable) {
+      Component = Animated.ScrollView;
+      handleScroll = scrollViewProps?.onScroll;
+      if (animatedHeader) {
+        animatedValue.current = new Animated.Value(0);
+        handleScroll = Animated.event(
+          [
+            {
+              nativeEvent: {
+                contentOffset: {y: animatedValue.current as Animated.Value},
+              },
             },
-          },
-        ],
-        {useNativeDriver: true},
-      );
-    }
-  }
-
-  /**
-   * build content for screen
-   */
-  const renderContent = () => {
-    const results = validateChildren(children, [Section, Card]);
-    if (Array.isArray(results)) {
-      return results.map((item, index) => {
-        const space = item.props?.useMargin === false ? 0 : Spacing.M;
-        return (
-          <View
-            key={`ScreenItem${index}`}
-            style={{
-              marginTop: space,
-              flex: item.props?.expanded ? 1 : undefined,
-            }}>
-            {item}
-          </View>
+          ],
+          {useNativeDriver: true, listener: scrollViewProps?.onScroll},
         );
-      });
-    } else {
-      const item: any = children;
-      const space = item?.props?.useMargin === false ? 0 : Spacing.M;
-      return (
-        <View
-          key={`ScreenItem`}
-          style={{
-            marginTop: space,
-            flex: item?.props?.expanded ? 1 : undefined,
-          }}>
-          {children}
-        </View>
-      );
+      }
     }
-  };
 
-  return (
-    <View
-      style={[Styles.flex, {backgroundColor}]}
-      accessibilityLabel={`ScreenContainer`}>
-      <View
-        style={{
-          position: 'absolute',
-          maxHeight: 215,
-          width: '100%',
-          overflow: 'hidden',
-        }}>
-        {!!headerBackground && (
-          <Animated.Image
+    /**
+     * render top navigation banner
+     */
+    const renderHeader = () => {
+      if (headerBackground != undefined) {
+        return (
+          <Image
             source={{
               uri: headerBackground,
             }}
             style={{
-              opacity: opacity ?? 1,
               aspectRatio: 1.75,
-              ...imageAnimatedStyle,
             }}
           />
-        )}
-      </View>
-      <KeyboardAvoidingView
-        style={Styles.flex}
-        enabled={enableKeyboardAvoidingView}
-        behavior={Platform.select({
-          ios: 'padding',
-          android: undefined,
-        })}>
-        <Component
-          {...scrollViewProps}
-          showsVerticalScrollIndicator={false}
-          onScroll={handleScroll}
-          style={[Styles.flex, {marginTop: marginHeader}]}>
-          {renderContent()}
-        </Component>
-        {Footer && (
+        );
+      }
+      if (typeof animatedHeader === 'function') {
+        return animatedHeader({animatedValue: animatedValue.current});
+      }
+    };
+
+    /**
+     * build content for screen
+     */
+    const renderContent = () => {
+      const results = validateChildren(children, [Section, Card]);
+      if (Array.isArray(results)) {
+        return results.map((item, index) => {
+          const space = item.props?.useMargin === false ? 0 : Spacing.M;
+          return (
+            <View
+              key={`ScreenItem${index}`}
+              style={{
+                marginTop: space,
+                flex: item.props?.expanded ? 1 : undefined,
+              }}>
+              {item}
+            </View>
+          );
+        });
+      } else {
+        const item: any = children;
+        const space = item?.props?.useMargin === false ? 0 : Spacing.M;
+        return (
           <View
+            key={`ScreenItem`}
             style={{
-              paddingTop: Spacing.S,
-              paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
-              backgroundColor: theme.colors.background.surface,
+              marginTop: space,
+              flex: item?.props?.expanded ? 1 : undefined,
             }}>
-            <Section>{Footer}</Section>
+            {children}
           </View>
-        )}
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
+        );
+      }
+    };
+
+    return (
+      <View
+        style={[Styles.flex, {backgroundColor}]}
+        accessibilityLabel={`ScreenContainer`}>
+        <View
+          style={{
+            position: 'absolute',
+            width: '100%',
+            maxHeight: 215,
+          }}>
+          {renderHeader()}
+        </View>
+        <KeyboardAvoidingView
+          style={[Styles.flex, {paddingTop: marginHeader}]}
+          enabled={enableKeyboardAvoidingView}
+          behavior={Platform.select({
+            ios: 'padding',
+            android: undefined,
+          })}>
+          {Header}
+          <Component
+            {...scrollViewProps}
+            ref={ref}
+            showsVerticalScrollIndicator={false}
+            onScroll={handleScroll}
+            style={Styles.flex}>
+            {renderContent()}
+          </Component>
+          {Footer && (
+            <View
+              style={{
+                paddingTop: Spacing.S,
+                paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
+                backgroundColor: theme.colors.background.surface,
+              }}>
+              <Section>{Footer}</Section>
+            </View>
+          )}
+        </KeyboardAvoidingView>
+      </View>
+    );
+  },
+);
 
 export default Screen;

package/Layout/styles.ts

@@ -47,6 +47,7 @@ export default StyleSheet.create({
     marginLeft: undefined,
     marginRight: undefined,
     marginVertical: undefined,
+    overflow: 'hidden',
   },
   item: {
     overflow: 'hidden',

package/Pagination/PaginationDot.tsx

@@ -9,6 +9,7 @@ import {ApplicationContext} from '../Application';
 const PaginationDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const renderDots = () => {
@@ -27,7 +28,11 @@ const PaginationDot: FC<ChildPaginationProps> = ({
     }
     return dots;
   };
-  return <View style={styles.paginationPinkContainer}>{renderDots()}</View>;
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationPinkContainer}>{renderDots()}</View>
+    </View>
+  );
 };
 
 export default PaginationDot;

package/Pagination/PaginationNumber.tsx

@@ -8,12 +8,15 @@ import {Colors} from '../Consts';
 const PaginationNumber: FC<ChildPaginationProps> = ({
   activeIndex = 0,
   dataLength = 2,
+  style,
 }) => {
   return (
-    <View style={[styles.paginationNumberContainer]}>
-      <Text color={Colors.black_01} typography={'label_default'}>{`${
-        activeIndex + 1
-      }/${dataLength}`}</Text>
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationNumberContainer}>
+        <Text color={Colors.black_01} typography={'label_default'}>{`${
+          activeIndex + 1
+        }/${dataLength}`}</Text>
+      </View>
     </View>
   );
 };

package/Pagination/PaginationWhiteDot.tsx

@@ -8,6 +8,7 @@ import {Colors, Spacing} from '../Consts';
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
+  style,
 }) => {
   const renderDots = () => {
     const dots: React.ReactElement[] = [];
@@ -24,7 +25,11 @@ const PaginationWhiteDot: FC<ChildPaginationProps> = ({
     }
     return dots;
   };
-  return <View style={[styles.paginationWhiteContainer]}>{renderDots()}</View>;
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationWhiteContainer}>{renderDots()}</View>
+    </View>
+  );
 };
 
 export default PaginationWhiteDot;

package/Pagination/styles.ts

@@ -25,6 +25,8 @@ export default StyleSheet.create({
     paddingHorizontal: Spacing.S,
     borderRadius: Radius.L,
     backgroundColor: Colors.black_20 + '33',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   scrollContainer: {
     alignItems: 'center',
@@ -44,4 +46,5 @@ export default StyleSheet.create({
     height: 4,
     borderRadius: Radius.XS,
   },
+  row: {flexDirection: 'row'},
 });

package/Pagination/types.ts

@@ -20,6 +20,8 @@ export type PaginationProps = {
    * Represents the total number of items (pages) in the Pagination component.
    */
   dataLength: number;
+
+  style?: ViewStyle | ViewStyle[];
 };
 
 export type DotProps = {

package/Radio/types.ts

@@ -5,7 +5,7 @@ export type RadioProps = {
    * `value`: Represents the value associated with the Radio component.
    * It is used to determine whether the Radio component is selected or not in comparison with the `groupValue`.
    */
-  value: string;
+  value: any;
 
   /**
    * `disabled`: Optional. If `true`, the user won't be able to interact with the Radio component.
@@ -28,7 +28,7 @@ export type RadioProps = {
    * `groupValue`: Represents the value of the selected Radio component within a group of Radio components.
    * The Radio component for which `value` equals `groupValue` will be selected.
    */
-  groupValue: string;
+  groupValue: any;
 
   /**
    * `style`: Optional. Used to apply custom styling to the Radio component.

package/package.json

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