@momo-kits/foundation 0.162.2-test.8 → 0.162.3-fontscale.1

package/Application/Components/HeaderExtendHeader.tsx

@@ -1,7 +1,12 @@
-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,
+} 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';
@@ -9,20 +14,19 @@ import { Colors, Radius, Spacing } from '../../Consts';
 import { Image } from '../../Image';
 import { SearchHeaderProps } from '../types';
 import BackgroundImageView from './BackgroundImageView';
+import {
+  AnimatedCompatValue,
+  useNormalizedSharedValue,
+} from '../utils';
 
 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: AnimatedCompatValue;
   heightHeader: number;
   headerRightWidth: number;
   inputSearchProps?: SearchHeaderProps;
@@ -38,118 +42,131 @@ 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 sharedValue = useNormalizedSharedValue(animatedValue);
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  let useShadowHeader = useShadowHeaderProp;
+  if (inputSearchProps && Platform.OS === 'android') {
+    useShadowHeader = false;
+  }
 
-  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 showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  useEffect(() => {
-    const listener = animatedValue.addListener(({ value }) => {
-      animated.current.setValue(value);
-    });
-    return () => {
-      animatedValue?.removeListener(listener);
-    };
-  }, [animatedValue]);
+  const heightStyle = useAnimatedStyle(() => ({
+    height: interpolate(
+      sharedValue.value,
+      [0, 100],
+      [heightHeader + 52, heightHeader],
+      Extrapolation.CLAMP,
+    ),
+  }));
 
-  const height = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [heightHeader + 52, heightHeader],
-    extrapolate: 'clamp',
-  });
+  const gradientOpacityStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(sharedValue.value, [0, 52], [1, 0], Extrapolation.CLAMP),
+  }));
 
-  const translateX = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [SCREEN_PADDING, leftPosition],
-    extrapolate: 'clamp',
-  });
-
-  const backgroundColor = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [
-      theme.colors.background.surface,
-      theme.colors.background.default,
+  const searchTranslateStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX: interpolate(
+          sharedValue.value,
+          [0, 100],
+          [SCREEN_PADDING, leftPosition],
+          Extrapolation.CLAMP,
+        ),
+      },
     ],
-    extrapolate: 'clamp',
+    width: interpolate(
+      sharedValue.value,
+      [0, 100],
+      [
+        screenWidth - SCREEN_PADDING * 2,
+        screenWidth - leftPosition - 12 - headerRightWidth,
+      ],
+      Extrapolation.CLAMP,
+    ),
+  }));
+
+  const searchBackgroundStyle = useAnimatedStyle(() => {
+    const t = Math.min(Math.max(sharedValue.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(
+      sharedValue.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={sharedValue}
           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 +186,26 @@ const HeaderExtendHeader: React.FC<{
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
-          opacityBackground={opacityBackground}
+          animatedValue={sharedValue}
           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/HeaderLeft.tsx

@@ -86,7 +86,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
 const styles = StyleSheet.create({
   headerLeft: {
-    marginLeft: 8,
+    marginLeft: 12,
   },
 });
 

package/Application/Components/HeaderTitle.tsx

@@ -1,11 +1,15 @@
 import React, { useContext } from 'react';
 import {
-  Animated,
   Dimensions,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { exportFontFamily, Text, useScaleSize } from '../../Text';
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
@@ -17,22 +21,51 @@ import {
 import { Image } from '../../Image';
 import { Icon } from '../../Icon';
 import { Skeleton } from '../../Skeleton';
+import {
+  AnimatedCompatValue,
+  useNormalizedSharedValue,
+} from '../utils';
+
+type HeaderTitleInterpolate = {
+  inputRange: number[];
+  outputRange: number[];
+};
+
+type HeaderTitleExtraProps = {
+  animatedValue?: AnimatedCompatValue;
+  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?.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 hasAnimated = props.animatedValue != null;
+  const sharedValue = useNormalizedSharedValue(props.animatedValue);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    if (!hasAnimated) {
+      return { opacity: 1 };
+    }
+    return {
+      opacity: interpolate(
+        sharedValue.value,
+        interpolateConfig.inputRange,
+        interpolateConfig.outputRange,
+        Extrapolation.CLAMP,
+      ),
+    };
+  });
 
   return (
     <View
@@ -57,9 +90,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,16 +1,17 @@
 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 } from 'react-native-reanimated';
+import React, { useContext } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
+import { useNormalizedSharedValue } from '../utils';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
@@ -28,28 +29,17 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const BACK_WIDTH = 28;
     const { width: screenWidth } = Dimensions.get('window');
 
-    const animated = useRef(new Animated.Value(0));
+    const sharedValue = useNormalizedSharedValue(animatedValue);
     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(sharedValue.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 = () => {
@@ -91,7 +81,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

@@ -19,7 +19,7 @@ import Navigator from './Navigator';
 import ScaleSizeProvider from './ScaleSizeProvider';
 import { getModalOptions, getStackOptions } from './utils';
 import { NavigationContainerProps } from './types';
-import { ApplicationContext, FontScaleConfig, MiniAppContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
 import { HeaderLeft } from './Components/HeaderLeft';
@@ -29,9 +29,6 @@ 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,
@@ -48,11 +45,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState<any>({});
-  // Default = the host-seeded fontScaleConfig from MiniAppContext, so the first frame is already
-  // scaled (no flash). The observer below overwrites it on later host writes (live rate changes).
-  const [observerFontScaleConfig, setObserverFontScaleConfig] = useState<
-    FontScaleConfig | undefined
-  >(context?.fontScaleConfig);
 
   const mergedContext = {
     ...context,
@@ -63,27 +55,10 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     },
   };
 
-  useEffect(() => {
-    // The initial value is seeded by the host into MiniAppContext and used as this state's default
-    // above, 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
-          fontScaleConfig={observerFontScaleConfig}
-        >
+        <ScaleSizeProvider scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}>
           <Navigation
             screen={screen}
             theme={theme}
@@ -142,6 +117,12 @@ const Navigation: React.FC<any> = ({
       },
     );
 
+    // TEMP: verify FontScale MaxApi end-to-end — remove after test
+    // @ts-ignore getFontScale added in newer @momo-platform/api
+    maxApi?.getFontScale?.((scale: any) =>
+      console.log('[FontScale][momo-kit] getFontScale ->', scale),
+    );
+
     return () => {
       subscription?.remove?.();
     };

package/Application/ScaleSizeProvider.tsx

@@ -1,15 +1,13 @@
-import React, { FC, useContext } from 'react';
+import React, { FC } from 'react';
 import { ScaleSizeContext } from '../Context';
 import { ScaleSizeProviderProps } from './types';
 
 const ScaleSizeProvider: FC<ScaleSizeProviderProps> = ({
-  fontScaleConfig,
+  scaleSizeMaxRate,
   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={fontScaleConfig ?? parent}>
+    <ScaleSizeContext.Provider value={{ scaleSizeMaxRate }}>
       {children}
     </ScaleSizeContext.Provider>
   );

package/Application/WidgetContainer.tsx

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

package/Application/types.ts

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

package/Application/utils.tsx

@@ -6,6 +6,8 @@ import {
 import type { HeaderTitleProps, NavigationOptions } from './types';
 import { Colors, Spacing } from '../Consts';
 import { Animated, AppState, Platform } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import { useSharedValue } from 'react-native-reanimated';
 import {
   MiniAppContext,
   ScreenContext,
@@ -60,7 +62,7 @@ const getModalOptions = (): StackNavigationOptions => {
  */
 const getOptions = (
   params: NavigationOptions,
-  animatedValue?: Animated.Value,
+  animatedValue?: SharedValue<number>,
 ) => {
   let options: StackNavigationOptions = {};
 
@@ -131,7 +133,7 @@ const getOptions = (
 
 const exportHeaderTitle = (
   params: NavigationOptions,
-  animatedValue?: Animated.Value,
+  animatedValue?: SharedValue<number>,
 ): StackNavigationOptions => {
   if (typeof params.headerTitle === 'object') {
     return {
@@ -228,6 +230,43 @@ const useAppState = () => {
   };
 };
 
+/**
+ * Union of the two animation runtimes an internal foundation component might
+ * receive. Public Screen props still accept React Native Animated.Value only;
+ * this type keeps lower-level header/floating components compatible while they
+ * render with reanimated.
+ */
+export type AnimatedCompatValue = Animated.Value | SharedValue<number>;
+
+const isRNAnimatedValue = (v: unknown): v is Animated.Value =>
+  !!v &&
+  typeof (v as Animated.Value).setValue === 'function' &&
+  typeof (v as Animated.Value).interpolate === 'function';
+
+const isSharedValue = (v: unknown): v is SharedValue<number> =>
+  !!v && !isRNAnimatedValue(v) && 'value' in (v as object);
+
+const useNormalizedSharedValue = (
+  input?: AnimatedCompatValue,
+): SharedValue<number> => {
+  const fallback = useSharedValue(0);
+
+  useEffect(() => {
+    if (!isRNAnimatedValue(input)) {
+      return;
+    }
+    const id = input.addListener(({ value }) => {
+      fallback.value = value;
+    });
+    return () => input.removeListener(id);
+  }, [input, fallback]);
+
+  if (isSharedValue(input)) {
+    return input;
+  }
+  return fallback;
+};
+
 export {
   getStackOptions,
   getModalOptions,
@@ -236,4 +275,5 @@ export {
   setAutomationID,
   useComponentId,
   useAppState,
+  useNormalizedSharedValue,
 };