@momo-kits/foundation 0.161.1-beta.2 → 0.161.2-beta.1

package/Application/Components/HeaderExtendHeader.tsx

@@ -1,7 +1,14 @@
-import React, { Ref, useContext, useEffect, useRef } from 'react';
+import React, { Ref, useContext } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
+import { Dimensions, Platform, StyleSheet, View } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
-import { Animated, Dimensions, Platform, StyleSheet, View } from 'react-native';
 import { HeaderType } from '../../Layout/types';
 import { InputRef, InputSearch } from '../../Input';
 import Navigation from '../Navigation';
@@ -14,15 +21,10 @@ const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
 
 const { width: screenWidth } = Dimensions.get('window');
-const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
 
-/**
- * Header extended with background image
- * @constructor
- */
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
-  animatedValue: Animated.Value;
+  animatedValue: SharedValue<number>;
   heightHeader: number;
   headerRightWidth: number;
   inputSearchProps?: SearchHeaderProps;
@@ -38,118 +40,132 @@ const HeaderExtendHeader: React.FC<{
   headerRightWidth = 73,
   inputSearchProps,
   inputSearchRef,
-  useShadowHeader = true,
+  useShadowHeader: useShadowHeaderProp = true,
   gradientColor: customGradientColor,
   headerBackground: customBackground,
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const animated = useRef(new Animated.Value(0));
+  const fallback = useSharedValue(0);
+  const sv = animatedValue ?? fallback;
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
-
-  const opacityBackground = animatedValue?.interpolate({
-    inputRange: [0, 52],
-    outputRange: [0, 1],
-    extrapolate: 'clamp',
-  });
-  const opacityGradient = animatedValue?.interpolate({
-    inputRange: [0, 52],
-    outputRange: [1, 0],
-    extrapolate: 'clamp',
-  });
+  let useShadowHeader = useShadowHeaderProp;
+  if (inputSearchProps && Platform.OS === 'android') {
+    useShadowHeader = false;
+  }
 
-  useEffect(() => {
-    const listener = animatedValue.addListener(({ value }) => {
-      animated.current.setValue(value);
-    });
-    return () => {
-      animatedValue?.removeListener(listener);
-    };
-  }, [animatedValue]);
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const height = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [heightHeader + 52, heightHeader],
-    extrapolate: 'clamp',
-  });
+  const heightStyle = useAnimatedStyle(() => ({
+    height: interpolate(
+      sv.value,
+      [0, 100],
+      [heightHeader + 52, heightHeader],
+      Extrapolation.CLAMP,
+    ),
+  }));
 
-  const translateX = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [SCREEN_PADDING, leftPosition],
-    extrapolate: 'clamp',
-  });
+  const gradientOpacityStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(sv.value, [0, 52], [1, 0], Extrapolation.CLAMP),
+  }));
 
-  const backgroundColor = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [
-      theme.colors.background.surface,
-      theme.colors.background.default,
+  const searchTranslateStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX: interpolate(
+          sv.value,
+          [0, 100],
+          [SCREEN_PADDING, leftPosition],
+          Extrapolation.CLAMP,
+        ),
+      },
     ],
-    extrapolate: 'clamp',
+    width: interpolate(
+      sv.value,
+      [0, 100],
+      [
+        screenWidth - SCREEN_PADDING * 2,
+        screenWidth - leftPosition - 12 - headerRightWidth,
+      ],
+      Extrapolation.CLAMP,
+    ),
+  }));
+
+  const searchBackgroundStyle = useAnimatedStyle(() => {
+    const t = Math.min(Math.max(sv.value / 100, 0), 1);
+    return { backgroundColor: t === 0
+      ? theme.colors.background.surface
+      : theme.colors.background.default };
   });
 
-  if (inputSearchProps && Platform.OS === 'android') {
-    useShadowHeader = false;
-  }
+  const extendedHeightStyle = useAnimatedStyle(() => ({
+    height: interpolate(
+      sv.value,
+      [0, 100],
+      [heightHeader + 52, heightHeader],
+      Extrapolation.CLAMP,
+    ),
+  }));
 
   if (inputSearchProps) {
     return (
       <View style={[{ zIndex: 0 }, showBaseLineDebug && styles.debugBaseLine]}>
-        <Animated.View style={{ height: height }} />
+        <Animated.View style={heightStyle} />
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
-          opacityBackground={opacityBackground}
+          animatedValue={sv}
           headerBackground={headerBackground}
         />
         <Animated.View
           style={[
             styles.headerBox,
-            { height: headerType === 'extended' ? height : heightHeader },
+            headerType === 'extended'
+              ? heightStyle
+              : { height: heightHeader },
           ]}
         >
           {!!gradientColor && (
-            <LinearGradientAnimated
-              colors={[gradientColor, gradientColor + '00']}
-              style={[styles.extendedHeader, { opacity: opacityGradient }]}
+            <Animated.View
+              style={[styles.extendedHeader, gradientOpacityStyle]}
             >
-              {!!theme.assets?.headerBackground && (
-                <Image
-                  style={styles.headerBackground}
-                  source={{ uri: theme.assets?.headerBackground }}
-                  loading={false}
-                />
-              )}
-            </LinearGradientAnimated>
+              <LinearGradient
+                colors={[gradientColor, gradientColor + '00']}
+                style={StyleSheet.absoluteFill}
+              >
+                {!!theme.assets?.headerBackground && (
+                  <Image
+                    style={styles.headerBackground}
+                    source={{ uri: theme.assets?.headerBackground }}
+                    loading={false}
+                  />
+                )}
+              </LinearGradient>
+            </Animated.View>
           )}
         </Animated.View>
         <Animated.View
-          style={{
-            justifyContent: 'flex-end',
-            height,
-            position: 'absolute',
-            zIndex: 2,
-          }}
+          style={[
+            {
+              justifyContent: 'flex-end',
+              position: 'absolute',
+              zIndex: 2,
+            },
+            heightStyle,
+          ]}
         >
           <Animated.View
-            style={{
-              transform: [{ translateX }],
-              marginVertical: Spacing.S,
-              width: animated.current.interpolate({
-                inputRange: [0, 100],
-                outputRange: [
-                  screenWidth - SCREEN_PADDING * 2,
-                  screenWidth - leftPosition - 12 - headerRightWidth,
-                ],
-                extrapolate: 'clamp',
-              }),
-            }}
+            style={[{ marginVertical: Spacing.S }, searchTranslateStyle]}
           >
-            <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
+            <Animated.View
+              style={[
+                { borderRadius: Radius.XL },
+                searchBackgroundStyle,
+              ]}
+            >
               <InputSearch
                 {...inputSearchProps}
                 ref={inputSearchRef}
@@ -169,22 +185,26 @@ const HeaderExtendHeader: React.FC<{
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
-          opacityBackground={opacityBackground}
+          animatedValue={sv}
           headerBackground={headerBackground}
         />
         {!!gradientColor && (
-          <LinearGradientAnimated
-            colors={[gradientColor, gradientColor + '00']}
-            style={[styles.extendedHeader, { opacity: opacityGradient }]}
+          <Animated.View
+            style={[styles.extendedHeader, gradientOpacityStyle, extendedHeightStyle]}
           >
-            {!!headerBackground && (
-              <Image
-                style={styles.headerBackground}
-                source={{ uri: headerBackground }}
-                loading={false}
-              />
-            )}
-          </LinearGradientAnimated>
+            <LinearGradient
+              colors={[gradientColor, gradientColor + '00']}
+              style={StyleSheet.absoluteFill}
+            >
+              {!!headerBackground && (
+                <Image
+                  style={styles.headerBackground}
+                  source={{ uri: headerBackground }}
+                  loading={false}
+                />
+              )}
+            </LinearGradient>
+          </Animated.View>
         )}
         <View style={{ height: heightHeader }} />
       </View>

package/Application/Components/HeaderTitle.tsx

@@ -1,11 +1,16 @@
 import React, { useContext } from 'react';
 import {
-  Animated,
   Dimensions,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  type SharedValue,
+} from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { exportFontFamily, Text, useScaleSize } from '../../Text';
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
@@ -18,21 +23,45 @@ import { Image } from '../../Image';
 import { Icon } from '../../Icon';
 import { Skeleton } from '../../Skeleton';
 
+type HeaderTitleInterpolate = {
+  inputRange: number[];
+  outputRange: number[];
+};
+
+type HeaderTitleExtraProps = {
+  animatedValue?: SharedValue<number>;
+  interpolate?: HeaderTitleInterpolate;
+  tintColor?: string;
+  children?: React.ReactNode;
+};
+
 /**
  * default header title used for nav
  */
-const HeaderTitle: React.FC<any> = props => {
+const HeaderTitle: React.FC<HeaderTitleExtraProps & { [key: string]: any }> = props => {
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const opacity = props.animatedValue?.interpolate(
-    props.interpolate ?? {
-      inputRange: [0, 200],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    },
-  );
+  const interpolateConfig = props.interpolate ?? {
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+  };
+  const animatedValue = props.animatedValue;
+
+  const animatedStyle = useAnimatedStyle(() => {
+    if (!animatedValue) {
+      return { opacity: 1 };
+    }
+    return {
+      opacity: interpolate(
+        animatedValue.value,
+        interpolateConfig.inputRange,
+        interpolateConfig.outputRange,
+        Extrapolation.CLAMP,
+      ),
+    };
+  });
 
   return (
     <View
@@ -57,9 +86,9 @@ const HeaderTitle: React.FC<any> = props => {
           },
           {
             fontFamily: exportFontFamily('bold', 'action_xs_bold'),
-            opacity,
             color: props.tintColor,
           },
+          animatedStyle,
         ]}
         numberOfLines={1}
       />

package/Application/Components/SearchHeader.tsx

@@ -1,13 +1,16 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
 import {
-  Animated,
   Dimensions,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import React, { useContext, useEffect, useRef } from 'react';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+import React, { useContext } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
@@ -28,28 +31,18 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const BACK_WIDTH = 28;
     const { width: screenWidth } = Dimensions.get('window');
 
-    const animated = useRef(new Animated.Value(0));
+    const fallback = useSharedValue(0);
+    const sv = animatedValue ?? fallback;
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
     const headerRightWidth = props?.headerRightWidth ?? 73;
 
-    useEffect(() => {
-      const listener = animatedValue?.addListener(({ value }) => {
-        animated.current.setValue(value);
-      });
-      return () => {
-        if (listener) {
-          animatedValue?.removeListener(listener);
-        }
+    const backgroundStyle = useAnimatedStyle(() => {
+      const t = Math.min(Math.max(sv.value / 100, 0), 1);
+      return {
+        backgroundColor: t === 0
+          ? theme.colors.background.surface
+          : theme.colors.background.default,
       };
-    }, [animatedValue]);
-
-    const backgroundColor = animated.current?.interpolate({
-      inputRange: [0, 100],
-      outputRange: [
-        theme.colors.background.surface,
-        theme.colors.background.default,
-      ],
-      extrapolate: 'clamp',
     });
 
     const goBack = () => {
@@ -77,7 +70,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
       return true;
     };
 
-    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
     return (
       <View
@@ -91,7 +84,9 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
             },
           ]}
         >
-          <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
+          <Animated.View
+            style={[{ borderRadius: Radius.XL }, backgroundStyle]}
+          >
             <InputSearch
               ref={ref}
               {...props}

package/Application/NavigationContainer.tsx

@@ -16,6 +16,7 @@ import { DeviceEventEmitter } from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
+import ScaleSizeProvider from './ScaleSizeProvider';
 import { getModalOptions, getStackOptions } from './utils';
 import { NavigationContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
@@ -35,44 +36,39 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   maxApi,
   initialParams,
   localize = new Localize({ vi: {}, en: {} }),
+  features = {
+    enableBottomTabAnimation: true,
+    enableHapticDialog: true,
+    enableForceFoundationList: false,
+    enableHapticBottomTab: true,
+  },
 }) => {
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState<any>({});
-  const [allowFontScale, setAllowFontScale] = useState<boolean>(
-    context?.designSystemConfig?.allowFontScale ?? true,
-  );
-
-  useEffect(() => {
-    const sub = maxApi?.observer?.('use_font_scale', (value: boolean) => {
-      setAllowFontScale(value ?? true);
-    });
-
-    return () => {
-      sub?.remove?.();
-    };
-  }, []);
 
   const mergedContext = {
     ...context,
     ...currentContext,
-    designSystemConfig: {
-      ...context?.designSystemConfig,
-      allowFontScale,
+    features: {
+      ...context?.features,
+      ...features,
     },
   };
 
   return (
     <SafeAreaProvider>
       <MiniAppContext.Provider value={mergedContext}>
-        <Navigation
-          screen={screen}
-          theme={theme}
-          options={options}
-          maxApi={maxApi}
-          setCurrentContext={setCurrentContext}
-          initialParams={initialParams}
-          localize={localize}
-        />
+        <ScaleSizeProvider scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}>
+          <Navigation
+            screen={screen}
+            theme={theme}
+            options={options}
+            maxApi={maxApi}
+            setCurrentContext={setCurrentContext}
+            initialParams={initialParams}
+            localize={localize}
+          />
+        </ScaleSizeProvider>
       </MiniAppContext.Provider>
     </SafeAreaProvider>
   );

package/Application/ScaleSizeProvider.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import { ScaleSizeContext } from '../Context';
+import { ScaleSizeProviderProps } from './types';
+
+const ScaleSizeProvider: FC<ScaleSizeProviderProps> = ({
+  scaleSizeMaxRate,
+  children,
+}) => {
+  return (
+    <ScaleSizeContext.Provider value={{ scaleSizeMaxRate }}>
+      {children}
+    </ScaleSizeContext.Provider>
+  );
+};
+
+export default ScaleSizeProvider;

package/Application/WidgetContainer.tsx

@@ -1,6 +1,7 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
+import ScaleSizeProvider from './ScaleSizeProvider';
 import { WidgetContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import Localize from './Localize';
@@ -42,19 +43,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady, true));
   const [currentContext, setCurrentContext] = useState({});
-  const [allowFontScale, setAllowFontScale] = useState<boolean>(
-    context?.designSystemConfig?.allowFontScale ?? true,
-  );
-
-  useEffect(() => {
-    const sub = maxApi?.observer?.('use_font_scale', (value: boolean) => {
-      setAllowFontScale(value ?? true);
-    });
 
-    return () => {
-      sub?.remove?.();
-    };
-  }, []);
   let headerBackground = context?.designConfig?.headerBar;
   let headerGradient = theme.colors?.gradient;
 
@@ -82,16 +71,15 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
   const mergedContext = {
     ...context,
     ...currentContext,
-    designSystemConfig: {
-      ...context?.designSystemConfig,
-      allowFontScale,
-    },
   };
 
   return (
-    <View style={{ height: height ?? '100%', minHeight: 1 }}>
+    <View style={{ height: height ?? '100%', minHeight:1 }}>
       <SafeAreaProvider>
         <MiniAppContext.Provider value={mergedContext}>
+          <ScaleSizeProvider
+            scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}
+          >
           <ApplicationContext.Provider
             value={{
               navigator: navigator.current,
@@ -169,6 +157,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
               </ReactNavigationContainer>
             </NavigationIndependentTree>
           </ApplicationContext.Provider>
+          </ScaleSizeProvider>
         </MiniAppContext.Provider>
       </SafeAreaProvider>
     </View>

package/Application/index.ts

@@ -16,6 +16,7 @@ export * from './Components/SearchHeader';
 import { exportHeaderTitle, setAutomationID, useComponentId } from './utils';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
+import ScaleSizeProvider from './ScaleSizeProvider';
 import { useTooltipPortal } from './TooltipPortal';
 
 export {
@@ -28,5 +29,6 @@ export {
   Navigation,
   Navigator,
   exportHeaderTitle,
+  ScaleSizeProvider,
   useTooltipPortal,
 };

package/Application/types.ts

@@ -2,11 +2,11 @@ import { EventArg } from '@react-navigation/core';
 import { StackNavigationOptions } from '@react-navigation/stack';
 import React, { ReactNode } from 'react';
 import {
-  Animated,
   TouchableOpacityProps,
   ViewProps,
   ViewStyle,
 } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 import { PopupNotifyProps } from '../Popup/types';
 import { InputRef, InputSearchProps } from '../Input';
 import Navigation from './Navigation';
@@ -107,6 +107,11 @@ export type Theme = {
   };
 };
 
+export type ScaleSizeProviderProps = {
+  scaleSizeMaxRate?: number;
+  children: ViewProps['children'];
+};
+
 export type Context = {
   [key: string]: any;
   theme: Theme;
@@ -153,6 +158,7 @@ export type NavigationContainerProps = {
   maxApi: any;
   initialParams?: any;
   localize: LocalizeProps;
+  features?: FeatureFlags;
 };
 
 export type WidgetContainerProps = {
@@ -252,7 +258,7 @@ export interface HeaderBackProps extends NavigationButtonProps {
 }
 
 export type HeaderBackgroundProps = {
-  animatedValue?: Animated.Value;
+  animatedValue?: SharedValue<number>;
   useGradient?: boolean;
   useShadowHeader?: boolean;
   backgroundColor?: string;
@@ -292,7 +298,7 @@ export type TitleJourneyProps = {
 };
 
 export interface HeaderAnimatedProps extends ViewProps {
-  animatedValue: Animated.Value;
+  animatedValue: SharedValue<number>;
   image: string;
   useScale?: boolean;
 }
@@ -336,7 +342,7 @@ export type AnimatedHeader = {
 
 export interface SearchHeaderProps extends InputSearchProps {
   ref?: React.RefObject<InputRef>;
-  animatedValue?: Animated.Value;
+  animatedValue?: SharedValue<number>;
   headerRightWidth?: 0 | 74 | 110 | number;
   leftPosition?: 12 | 48 | number;
   renderButtons?: () => ReactNode;