@momo-kits/foundation 0.161.2-test.1 → 0.162.2-test.7

package/Application/Components/HeaderExtendHeader.tsx

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

package/Application/Components/HeaderTitle.tsx

@@ -1,16 +1,11 @@
 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';
@@ -23,45 +18,21 @@ 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<HeaderTitleExtraProps & { [key: string]: any }> = props => {
+const HeaderTitle: React.FC<any> = props => {
   const context = useContext<any>(MiniAppContext);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  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,
-      ),
-    };
-  });
+  const opacity = props.animatedValue?.interpolate(
+    props.interpolate ?? {
+      inputRange: [0, 200],
+      outputRange: [0, 1],
+      extrapolate: 'clamp',
+    },
+  );
 
   return (
     <View
@@ -86,9 +57,9 @@ const HeaderTitle: React.FC<HeaderTitleExtraProps & { [key: string]: any }> = pr
           },
           {
             fontFamily: exportFontFamily('bold', 'action_xs_bold'),
+            opacity,
             color: props.tintColor,
           },
-          animatedStyle,
         ]}
         numberOfLines={1}
       />

package/Application/Components/SearchHeader.tsx

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

package/Application/NavigationContainer.tsx

@@ -19,7 +19,7 @@ import Navigator from './Navigator';
 import ScaleSizeProvider from './ScaleSizeProvider';
 import { getModalOptions, getStackOptions } from './utils';
 import { NavigationContainerProps } from './types';
-import { ApplicationContext, MiniAppContext } from '../Context';
+import { ApplicationContext, FontScaleConfig, MiniAppContext } from '../Context';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
 import { HeaderLeft } from './Components/HeaderLeft';
@@ -29,6 +29,9 @@ import { HeaderBackground } from './Components/HeaderBackground';
 
 const Stack = createStackNavigator();
 
+// Observer storage key the host app writes FontScaleConfig to. Lowercased natively.
+const FONT_SCALE_OBSERVER_KEY = 'font_scale_config';
+
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme = defaultTheme,
@@ -45,6 +48,10 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState<any>({});
+  // FontScaleConfig the host writes to observer storage (single source of truth when present).
+  const [observerFontScaleConfig, setObserverFontScaleConfig] = useState<
+    FontScaleConfig | undefined
+  >(undefined);
 
   const mergedContext = {
     ...context,
@@ -55,10 +62,28 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     },
   };
 
+  useEffect(() => {
+    if (!maxApi) return;
+    // The initial value is seeded by the host into MiniAppContext (mergedContext.fontScaleConfig)
+    // before the miniapp mounts, so the first frame is already scaled (no flash). Here we only
+    // subscribe to later host writes so a rate change applies live while the miniapp is open.
+    const sub = maxApi.observer?.(
+      FONT_SCALE_OBSERVER_KEY,
+      (data: FontScaleConfig) => {
+        setObserverFontScaleConfig(data ?? undefined);
+      },
+    );
+    return () => {
+      sub?.remove?.();
+    };
+  }, [maxApi]);
+
   return (
     <SafeAreaProvider>
       <MiniAppContext.Provider value={mergedContext}>
-        <ScaleSizeProvider scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}>
+        <ScaleSizeProvider
+          fontScaleConfig={observerFontScaleConfig ?? mergedContext?.fontScaleConfig}
+        >
           <Navigation
             screen={screen}
             theme={theme}

package/Application/ScaleSizeProvider.tsx

@@ -1,13 +1,15 @@
-import React, { FC } from 'react';
+import React, { FC, useContext } from 'react';
 import { ScaleSizeContext } from '../Context';
 import { ScaleSizeProviderProps } from './types';
 
 const ScaleSizeProvider: FC<ScaleSizeProviderProps> = ({
-  scaleSizeMaxRate,
+  fontScaleConfig,
   children,
 }) => {
+  // Inherit the config from an upper layer (e.g. app root) when the host doesn't set it via MiniAppContext.
+  const parent = useContext(ScaleSizeContext);
   return (
-    <ScaleSizeContext.Provider value={{ scaleSizeMaxRate }}>
+    <ScaleSizeContext.Provider value={fontScaleConfig ?? parent}>
       {children}
     </ScaleSizeContext.Provider>
   );

package/Application/WidgetContainer.tsx

@@ -78,7 +78,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
       <SafeAreaProvider>
         <MiniAppContext.Provider value={mergedContext}>
           <ScaleSizeProvider
-            scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}
+            fontScaleConfig={mergedContext?.fontScaleConfig}
           >
           <ApplicationContext.Provider
             value={{

package/Application/types.ts

@@ -2,13 +2,14 @@ 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 { FontScaleConfig } from '../Context';
 import Navigation from './Navigation';
 
 export type NavigationProps = {
@@ -108,7 +109,7 @@ export type Theme = {
 };
 
 export type ScaleSizeProviderProps = {
-  scaleSizeMaxRate?: number;
+  fontScaleConfig?: FontScaleConfig;
   children: ViewProps['children'];
 };
 
@@ -258,7 +259,7 @@ export interface HeaderBackProps extends NavigationButtonProps {
 }
 
 export type HeaderBackgroundProps = {
-  animatedValue?: SharedValue<number>;
+  animatedValue?: Animated.Value;
   useGradient?: boolean;
   useShadowHeader?: boolean;
   backgroundColor?: string;
@@ -298,7 +299,7 @@ export type TitleJourneyProps = {
 };
 
 export interface HeaderAnimatedProps extends ViewProps {
-  animatedValue: SharedValue<number>;
+  animatedValue: Animated.Value;
   image: string;
   useScale?: boolean;
 }
@@ -342,7 +343,7 @@ export type AnimatedHeader = {
 
 export interface SearchHeaderProps extends InputSearchProps {
   ref?: React.RefObject<InputRef>;
-  animatedValue?: SharedValue<number>;
+  animatedValue?: Animated.Value;
   headerRightWidth?: 0 | 74 | 110 | number;
   leftPosition?: 12 | 48 | number;
   renderButtons?: () => ReactNode;

package/Application/utils.tsx

@@ -5,8 +5,7 @@ import {
 } from '@react-navigation/stack';
 import type { HeaderTitleProps, NavigationOptions } from './types';
 import { Colors, Spacing } from '../Consts';
-import { AppState, Platform } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
+import { Animated, AppState, Platform } from 'react-native';
 import {
   MiniAppContext,
   ScreenContext,
@@ -61,7 +60,7 @@ const getModalOptions = (): StackNavigationOptions => {
  */
 const getOptions = (
   params: NavigationOptions,
-  animatedValue?: SharedValue<number>,
+  animatedValue?: Animated.Value,
 ) => {
   let options: StackNavigationOptions = {};
 
@@ -132,7 +131,7 @@ const getOptions = (
 
 const exportHeaderTitle = (
   params: NavigationOptions,
-  animatedValue?: SharedValue<number>,
+  animatedValue?: Animated.Value,
 ): StackNavigationOptions => {
   if (typeof params.headerTitle === 'object') {
     return {