@momo-kits/foundation 0.169.9 → 0.169.10-beta.1

package/Application/Components/useToolkitActions.tsx

@@ -4,7 +4,6 @@ import { PopupNotify } from '../../Popup';
 import { Tool, ToolGroup } from '../types';
 
 const DID_SYNC_NEW_HOME = 'did_sync_new_home';
-const LOADING_RESET_DELAY = 1000;
 
 type ToolkitActionsParams = {
   preventClose?: any;
@@ -50,8 +49,8 @@ const useToolkitActions = ({
       const favoriteObserver = navigator?.maxApi?.observer?.(
         DID_SYNC_NEW_HOME,
         (updatedData: any) => {
-          const isInFavorites = updatedData?.items?.includes(context?.code);
-          setIsFavorite(isInFavorites);
+          const status = updatedData?.items?.includes(context?.code);
+          setIsFavorite(status);
         },
       );
       return () => {
@@ -60,7 +59,7 @@ const useToolkitActions = ({
     }
   }, [useShortcut, context, checkAppIsFavorite, navigator?.maxApi]);
 
-  const handleDismiss = () => {
+  const onDismiss = () => {
     if (useCloseIcon) {
       navigator?.maxApi?.dispatchFunction?.(
         'dismiss',
@@ -72,7 +71,7 @@ const useToolkitActions = ({
     }
   };
 
-  const handleClose = () => {
+  const onClose = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
       ...context,
@@ -90,24 +89,24 @@ const useToolkitActions = ({
               title: preventClose.primary.title,
               onPress: () => {
                 preventClose?.primary.onPress();
-                handleDismiss();
+                onDismiss();
               },
             }}
           />
         ),
       });
     } else {
-      handleDismiss();
+      onDismiss();
     }
   };
 
-  const handlePressShortcut = () => {
+  const onPressShortcut = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
-    const shouldBeFavorite = !isFavorite;
+    const expected = !isFavorite;
     context?.autoTracking?.({
       ...context,
       componentName: 'IconButton',
-      componentId: `${shouldBeFavorite ? 'pin' : 'unpin'}_shortcut`,
+      componentId: `${expected ? 'pin' : 'unpin'}_shortcut`,
       screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
     });
     setIsLoading(true);
@@ -121,16 +120,16 @@ const useToolkitActions = ({
       },
       ({ success }: { success: boolean }) => {
         if (success) {
-          setIsFavorite(shouldBeFavorite);
+          setIsFavorite(expected);
         }
       },
     );
     setTimeout(() => {
       setIsLoading(false);
-    }, LOADING_RESET_DELAY);
+    }, 1000);
   };
 
-  const handlePressHelpCenter = () => {
+  const onPressHelpCenter = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
       ...context,
@@ -142,7 +141,7 @@ const useToolkitActions = ({
     navigator?.maxApi?.dispatchFunction?.('showHelpCenter', context);
   };
 
-  const handlePressIconMore = () => {
+  const onPressIconMore = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
       ...context,
@@ -173,18 +172,18 @@ const useToolkitActions = ({
   };
 
   let iconShortcut = isFavorite ? 'pin_star_checked' : 'pin_star';
-  let shortcutOnPress = handlePressShortcut;
+  let shortcutOnPress = onPressShortcut;
   const totalTools = tools.reduce(
     (count: number, group: ToolGroup) => count + group?.items?.length,
     0,
   );
-  const hasManyTools = tools && totalTools > 1;
-  const hasOneTool = tools && totalTools === 1;
+  const showIconMore = tools && totalTools > 1;
+  const isHaveOneTool = tools && totalTools === 1;
 
-  if (hasManyTools || useMore) {
+  if (showIconMore || useMore) {
     iconShortcut = 'navigation_more_icon';
-    shortcutOnPress = handlePressIconMore;
-  } else if (hasOneTool) {
+    shortcutOnPress = onPressIconMore;
+  } else if (isHaveOneTool) {
     const singleToolGroup = tools.find(
       (group: ToolGroup) => group?.items?.length === 1,
     );
@@ -211,8 +210,8 @@ const useToolkitActions = ({
     iconShortcut,
     shortcutOnPress,
     showBadge,
-    handlePressHelpCenter,
-    handleClose,
+    onPressHelpCenter,
+    onClose,
   };
 };
 

package/Application/ModalScreen.tsx

@@ -27,12 +27,6 @@ import { isIPhoneDuo } from './utils';
 import { useModalLayout } from './modalLayout';
 import { scheduleOnRN } from 'react-native-worklets';
 
-const DUO_ORIENTATIONS = ['portrait', 'landscape'];
-const ENTER_DURATION = 250;
-const EXIT_DURATION = 200;
-const INITIAL_SCALE = 0.8;
-const ENTER_EASING = Easing.bezier(0.2, 0.0, 0, 1.0);
-
 /**
  * Screen of the `Modal` route: a bottom sheet when pushed by
  * `showBottomSheet`, otherwise a centered popup.
@@ -78,7 +72,7 @@ const Modal: React.FC<ModalParams> = props => {
   }, [context, description, navigator?.maxApi, title]);
 
   const opacity = useRef(new Animated.Value(0)).current;
-  const scale = useRef(new Animated.Value(INITIAL_SCALE)).current;
+  const scale = useRef(new Animated.Value(0.8)).current;
   const scrimStyle = useMemo(
     () => ({
       opacity: opacity.interpolate({
@@ -104,13 +98,13 @@ const Modal: React.FC<ModalParams> = props => {
     Animated.parallel([
       Animated.timing(opacity, {
         toValue: 1,
-        duration: ENTER_DURATION,
+        duration: 250,
         useNativeDriver: true,
       }),
       Animated.timing(scale, {
         toValue: 1,
-        duration: ENTER_DURATION,
-        easing: ENTER_EASING,
+        duration: 250,
+        easing: Easing.bezier(0.2, 0.0, 0, 1.0),
         useNativeDriver: true,
       }),
     ]).start();
@@ -120,7 +114,7 @@ const Modal: React.FC<ModalParams> = props => {
     };
   }, [opacity, props.route.params, scale]);
 
-  const handleDismiss = useCallback(
+  const onDismiss = useCallback(
     (callback = () => {}, preventClose = false) => {
       if (preventClose) {
         return;
@@ -128,12 +122,12 @@ const Modal: React.FC<ModalParams> = props => {
       Animated.parallel([
         Animated.timing(opacity, {
           toValue: 0,
-          duration: EXIT_DURATION,
+          duration: 200,
           useNativeDriver: true,
         }),
         Animated.timing(scale, {
-          toValue: INITIAL_SCALE,
-          duration: EXIT_DURATION,
+          toValue: 0.8,
+          duration: 200,
           easing: Easing.linear,
           useNativeDriver: true,
         }),
@@ -149,18 +143,18 @@ const Modal: React.FC<ModalParams> = props => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
-        handleDismiss(undefined, barrierDismissible);
+        onDismiss(undefined, barrierDismissible);
         return true;
       },
     );
     return () => backHandler.remove();
-  }, [barrierDismissible, handleDismiss]);
+  }, [barrierDismissible, onDismiss]);
 
   return (
     <Container
       transparent
       visible={true}
-      onRequestClose={handleDismiss}
+      onRequestClose={onDismiss}
       style={StyleSheet.absoluteFillObject}
       isModalKit={true}
       supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
@@ -171,7 +165,7 @@ const Modal: React.FC<ModalParams> = props => {
       >
         <Pressable
           style={StyleSheet.absoluteFillObject}
-          onPress={() => handleDismiss(undefined, barrierDismissible)}
+          onPress={() => onDismiss(undefined, barrierDismissible)}
         >
           <Animated.View style={[styles.overlayContent, scrimStyle]} />
         </Pressable>
@@ -194,13 +188,15 @@ const Modal: React.FC<ModalParams> = props => {
             modalStyle,
           ]}
         >
-          <Component {...params} onRequestClose={handleDismiss} />
+          <Component {...params} onRequestClose={onDismiss} />
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>
   );
 };
 
+const DUO_ORIENTATIONS = ['portrait', 'landscape'];
+
 const styles = StyleSheet.create({
   overlayContent: {
     flex: 1,

package/Application/StackScreen.tsx

@@ -8,10 +8,7 @@ import { SwipeBackHaptic } from './Components/SwipeBackHaptic';
 import { useAppState } from './hooks';
 import { createScreenTracking } from './StackScreen.tracking';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
-
-const TRACKING_TIMEOUT = 5000;
-const ELEMENT_IDLE_TIMEOUT = 2000;
-const LOADING_IDLE_TIMEOUT = 2000;
+import { useHeaderFrameOptions } from './headerLayout';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
@@ -55,6 +52,7 @@ const StackScreen: React.FC<any> = props => {
   const navigation = useRef(new Navigation(props.navigation, context)).current;
   const heightHeader = useHeaderHeight();
   const { isBackgroundToForeground } = useAppState();
+  const headerFrameOptions = useHeaderFrameOptions(options?.contentLayout);
 
   const data = {
     ...initialParams,
@@ -73,9 +71,16 @@ const StackScreen: React.FC<any> = props => {
     }
   }, [navigation, options]);
 
+  // re-applied on fold, unfold and rotation, apart from the other options
+  useLayoutEffect(() => {
+    if (headerFrameOptions) {
+      navigation.instance.setOptions(headerFrameOptions);
+    }
+  }, [navigation, headerFrameOptions]);
+
   useEffect(() => {
     let focusScreen: any;
-    let focusAppListener: { remove?: () => void } | undefined;
+    let onFocusApp: any;
     if (['Invalid', 'screen'].includes(screenName)) {
       navigator?.maxApi?.showPopup?.('notice', {
         title: 'Invalid screen name',
@@ -89,19 +94,19 @@ const StackScreen: React.FC<any> = props => {
     if (!bottomTab) {
       focusScreen = props.navigation.addListener('focus', () => {
         navigator?.maxApi?.getDataObserver?.('current_screen', (item: any) => {
-          handleScreenNavigated(item?.screenName, screenName);
+          onScreenNavigated(item?.screenName, screenName);
           navigator?.maxApi?.setDataObserver?.('current_screen', {
             screenName,
             startTime,
           });
         });
       });
-      focusAppListener = navigator?.maxApi?.listen?.('onFocusApp', () => {
+      onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
         if (props.navigation.isFocused()) {
           navigator?.maxApi?.getDataObserver?.(
             'current_screen',
             (item: any) => {
-              handleScreenNavigated(item?.screenName, screenName);
+              onScreenNavigated(item?.screenName, screenName);
               navigator?.maxApi?.setDataObserver?.('current_screen', {
                 screenName,
                 startTime,
@@ -130,7 +135,7 @@ const StackScreen: React.FC<any> = props => {
     tracking.current.timeoutTracking = setTimeout(() => {
       onScreenLoad();
       onScreenInteraction();
-    }, TRACKING_TIMEOUT);
+    }, 5000);
 
     return () => {
       onScreenLoad();
@@ -141,13 +146,13 @@ const StackScreen: React.FC<any> = props => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       clearTimeout(tracking.current.timeoutLoading);
       focusScreen?.();
-      focusAppListener?.remove?.();
+      onFocusApp?.remove?.();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /** Reports a navigation to this screen: `back` if it was shown before. */
-  const handleScreenNavigated = (pre: string, current: string) => {
+  const onScreenNavigated = (pre: string, current: string) => {
     if (!isBackgroundToForeground) {
       const item: any = {
         preScreenName: pre,
@@ -238,7 +243,7 @@ const StackScreen: React.FC<any> = props => {
 
             onScreenLoad();
             onScreenInteraction();
-          }, ELEMENT_IDLE_TIMEOUT);
+          }, 2000);
         },
         onLoading: (loading: boolean) => {
           if (loading && tracking.current.timeStartLoading === 0) {
@@ -252,7 +257,7 @@ const StackScreen: React.FC<any> = props => {
           clearTimeout(tracking.current.timeoutLoading);
           tracking.current.timeoutLoading = setTimeout(() => {
             onScreenLoading();
-          }, LOADING_IDLE_TIMEOUT);
+          }, 2000);
         },
         onSetParams: (item: ScreenTrackingParams) => {
           tracking.current.params = item;

package/Application/headerLayout.ts

@@ -0,0 +1,165 @@
+import { useMemo } from 'react';
+import { useWindowDimensions, type ViewStyle } from 'react-native';
+import type { StackNavigationOptions } from '@react-navigation/stack';
+import { Spacing } from '../Consts';
+import { getHeaderMargin } from '../Layout/utils';
+import { FOLDABLE_MIN_WIDTH } from './modalLayout';
+import { isIPhoneDuo } from './utils';
+
+// Top navigation spec, shared with the Compose / SwiftUI kits
+const HEADER_FRAME_MAX_WIDTH = 600;
+
+/**
+ * Top navigation geometry on every device
+ * - buttonSize / iconSize: round back and shortcut buttons, icons inside them and the pill
+ * - pillWidth / pillHeight: help center | home capsule
+ * - clusterWidth: shortcut, gap and pill on the right of the bar
+ * - searchHeight: search field inside the header
+ * - titleGap: space between back and the title, and the title and the right cluster
+ * - sidePadding: bar edge to back and to the right cluster
+ * - gradientHeight: header gradient, kept at the phone height on wide windows
+ * - bannerWidth: animated banner image, kept at the phone width on wide windows
+ */
+const HeaderBarMetrics = {
+  buttonSize: 32,
+  iconSize: 20,
+  pillWidth: 72,
+  pillHeight: 32,
+  clusterWidth: 112,
+  searchHeight: 32,
+  titleGap: Spacing.S,
+  sidePadding: Spacing.M,
+  gradientHeight: 154,
+  bannerWidth: 375,
+};
+
+/**
+ * `grid` keeps the header row at the bar edges, `stretch` centers it in a 600pt
+ * frame on wide windows. Background and status bar always span the window.
+ */
+type HeaderContentLayout = 'grid' | 'stretch';
+
+type HeaderLayout = typeof HeaderBarMetrics & {
+  /**
+   * Window whose short side is at least 600 (Galaxy Z Fold / Pixel Fold inner
+   * display, tablets), iPhone Duo excluded. Phones, landscape included, are not.
+   */
+  isWide: boolean;
+  /**
+   * Banner kept at `bannerWidth`, centered: wide windows plus the iPhone Duo
+   * inner display, portrait and landscape.
+   */
+  isBannerCentered: boolean;
+  /**
+   * Window edge to back and to the right cluster: `sidePadding`, or centering the
+   * row in the 600pt frame with `stretch` on a wide window.
+   */
+  frameInset: number;
+  /**
+   * Header row width between the two `frameInset`s.
+   */
+  frameWidth: number;
+};
+
+type HeaderLayoutInput = {
+  width: number;
+  height: number;
+  isDuo: boolean;
+  contentLayout?: HeaderContentLayout;
+};
+
+/**
+ * Header geometry for a window, pure so it can be tested without a device.
+ */
+const getHeaderLayout = ({
+  width,
+  height,
+  isDuo,
+  contentLayout = 'grid',
+}: HeaderLayoutInput): HeaderLayout => {
+  const { sidePadding } = HeaderBarMetrics;
+  const isLargeWindow = Math.min(width, height) >= FOLDABLE_MIN_WIDTH;
+  const isWide = !isDuo && isLargeWindow;
+  let frameInset = sidePadding;
+  if (isWide && contentLayout === 'stretch') {
+    const centered = (width - HEADER_FRAME_MAX_WIDTH) / 2;
+    frameInset = Math.max(sidePadding, centered);
+  }
+  return {
+    ...HeaderBarMetrics,
+    isWide,
+    isBannerCentered: isLargeWindow,
+    frameInset,
+    frameWidth: width - frameInset * 2,
+  };
+};
+
+/**
+ * Widest a title can be between back and the right cluster of the header row.
+ */
+const getTitleBudget = (layout: HeaderLayout) => {
+  const { buttonSize, titleGap, clusterWidth } = layout;
+  return layout.frameWidth - buttonSize - titleGap * 2 - clusterWidth;
+};
+
+/**
+ * Header geometry for the current window; follows fold, unfold and rotation.
+ */
+const useHeaderLayout = (contentLayout?: HeaderContentLayout): HeaderLayout => {
+  const { width, height } = useWindowDimensions();
+  const isDuo = isIPhoneDuo();
+  return useMemo(() => {
+    return getHeaderLayout({ width, height, isDuo, contentLayout });
+  }, [width, height, isDuo, contentLayout]);
+};
+
+const TITLE_CONTAINER_RESET: ViewStyle = {
+  marginLeft: 0,
+  marginEnd: 0,
+  marginStart: 0,
+  marginHorizontal: 0,
+  marginVertical: 0,
+  margin: 0,
+};
+
+/**
+ * React Navigation container styles that keep back, title and the right cluster
+ * in the `stretch` frame. `undefined` for `grid`, and on iPhone Duo, which keeps
+ * its own header row.
+ */
+const useHeaderFrameOptions = (
+  contentLayout?: HeaderContentLayout,
+): StackNavigationOptions | undefined => {
+  const layout = useHeaderLayout(contentLayout);
+  const { width } = useWindowDimensions();
+  const isDuo = isIPhoneDuo();
+  return useMemo(() => {
+    if (contentLayout !== 'stretch' || isDuo) {
+      return undefined;
+    }
+    // the header content row already sits this far in on large iOS windows
+    const shift = layout.frameInset - layout.sidePadding;
+    const containerShift = Math.max(0, shift - getHeaderMargin(width));
+    return {
+      headerLeftContainerStyle: { paddingLeft: containerShift },
+      headerRightContainerStyle: { paddingRight: containerShift },
+      headerTitleContainerStyle: {
+        ...TITLE_CONTAINER_RESET,
+        left: layout.titleGap,
+        maxWidth: getTitleBudget(layout),
+      },
+    };
+  }, [contentLayout, isDuo, layout, width]);
+};
+
+export type { HeaderContentLayout, HeaderLayout };
+
+export {
+  HeaderBarMetrics,
+  HEADER_FRAME_MAX_WIDTH,
+  TITLE_CONTAINER_RESET,
+  getHeaderLayout,
+  getTitleBudget,
+  useHeaderLayout,
+  useHeaderFrameOptions,
+};

package/Application/index.ts

@@ -26,6 +26,13 @@ import {
   type ModalLayout,
   type ModalRect,
 } from './modalLayout';
+import {
+  HeaderBarMetrics,
+  getHeaderLayout,
+  useHeaderLayout,
+  type HeaderContentLayout,
+  type HeaderLayout,
+} from './headerLayout';
 
 export {
   NavigationContainer,
@@ -41,6 +48,9 @@ export {
   useTooltipPortal,
   getModalLayout,
   useModalLayout,
+  HeaderBarMetrics,
+  getHeaderLayout,
+  useHeaderLayout,
 };
 
-export type { ModalLayout, ModalRect };
+export type { ModalLayout, ModalRect, HeaderContentLayout, HeaderLayout };

package/Application/modalLayout.ts

@@ -73,7 +73,6 @@ type ModalLayoutInput = {
   hinge?: ReservedRegion;
 };
 
-/** `value` limited to the `[min, max]` range. */
 const clamp = (value: number, min: number, max: number) => {
   return Math.min(Math.max(value, min), max);
 };

package/Application/navigationOptions.tsx

@@ -8,11 +8,12 @@ import {
   TransitionPresets,
 } from '@react-navigation/stack';
 import type { SharedValue } from 'react-native-reanimated';
-import { Colors, Spacing } from '../Consts';
+import { Colors } from '../Consts';
 import { HeaderBackground } from './Components/HeaderBackground';
 import { HeaderLeft } from './Components/HeaderLeft';
 import { HeaderRight } from './Components/HeaderRight';
 import { HeaderTitle, TitleCustom } from './Components/HeaderTitle';
+import { HeaderBarMetrics, TITLE_CONTAINER_RESET } from './headerLayout';
 import type { HeaderTitleProps, NavigationOptions } from './types';
 
 const CARD_SHADOW_OPACITY = 0.3;
@@ -55,13 +56,8 @@ const getStackOptions = (): StackNavigationOptions => {
     headerTitleAlign: 'left',
     headerTitle: props => <HeaderTitle {...props} />,
     headerTitleContainerStyle: {
-      marginLeft: 0,
-      marginEnd: 0,
-      marginStart: 0,
-      marginHorizontal: 0,
-      marginVertical: 0,
-      margin: 0,
-      left: Spacing.S,
+      ...TITLE_CONTAINER_RESET,
+      left: HeaderBarMetrics.titleGap,
     },
     headerBackground: (props: any) => <HeaderBackground {...props} />,
     headerLeft: (props: any) => <HeaderLeft {...props} floating />,
@@ -172,13 +168,8 @@ const getOptions = (
     if (params.hiddenBack) {
       headerLeft = null;
       options.headerTitleContainerStyle = {
-        marginLeft: 0,
-        marginEnd: 0,
-        marginStart: 0,
-        marginHorizontal: 0,
-        marginVertical: 0,
-        margin: 0,
-        left: Spacing.M,
+        ...TITLE_CONTAINER_RESET,
+        left: HeaderBarMetrics.sidePadding,
       };
     }
     options = {

package/Application/types.header.ts

@@ -98,6 +98,11 @@ export interface HeaderAnimatedProps extends ViewProps {
   image: string;
   useScale?: boolean;
   aspectRatio?: '16/9' | '3/2' | '1/1';
+  /**
+   * Optional. On wide windows the image keeps its phone width, centered; this
+   * color fills the sides and fades to transparent downward. No fill when unset.
+   */
+  bannerBackgroundColor?: string;
 }
 
 export type AnimatedHeader = {
@@ -109,8 +114,8 @@ export type AnimatedHeader = {
 export interface SearchHeaderProps extends InputSearchProps {
   ref?: React.RefObject<InputRef>;
   animatedValue?: Animated.Value | SharedValue<number>;
-  headerRightWidth?: 0 | 74 | 110 | number;
-  leftPosition?: 12 | 48 | number;
+  headerRightWidth?: 0 | 84 | 124 | number;
+  leftPosition?: 12 | 52 | number;
   renderButtons?: () => ReactNode;
   hiddenBack?: boolean;
 }

package/Application/types.ts

@@ -9,6 +9,7 @@ import type {
   OnBoarding,
 } from './types.header';
 import type { LocalizeProps, Theme } from './types.theme';
+import type { HeaderContentLayout } from './headerLayout';
 
 export * from './types.theme';
 export * from './types.header';
@@ -128,4 +129,10 @@ export interface NavigationOptions
   hiddenBack?: boolean;
   headerTitle?: HeaderTitleProps | string;
   headerRight?: OnBoarding | HeaderRightToolkit | any;
+  /**
+   * Optional. `stretch` centers back, title and the right cluster in a 600pt
+   * frame on wide windows (foldable inner display, tablet); the background stays
+   * full width. Defaults to `grid`, the header row at the window edges.
+   */
+  contentLayout?: HeaderContentLayout;
 }

package/Context/index.ts

@@ -5,11 +5,9 @@ import { defaultContext } from '../Consts';
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
 
-/** Mini app context shared by the host via `Platform`; local if standalone. */
+// Shared by the host app via `Platform`; standalone falls back to a local one.
 const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
-/** Screen context shared by the host via `Platform`; local if standalone. */
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
-/** Component context shared by the host via `Platform`; local if standalone. */
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
 const SkeletonContext = createContext({ loading: false });
 /**

package/Image/index.tsx

@@ -44,7 +44,7 @@ const Image: React.FC<ImageProps> = ({
   const component: any = useContext(ComponentContext);
   const context = useContext<any>(MiniAppContext);
   const skeleton = useContext(SkeletonContext);
-  const hasErrorRef = useRef(false);
+  const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -92,30 +92,30 @@ const Image: React.FC<ImageProps> = ({
         showBaseLineDebug && styles.debugBaseLine,
       ]}
       onProgress={event => {
-        hasErrorRef.current = false;
+        error.current = false;
         if (status !== 'loading' && loading) {
           setStatus('loading');
         }
         onProgress?.(event);
       }}
       onLoadStart={() => {
-        hasErrorRef.current = false;
+        error.current = false;
         onLoadStart?.();
       }}
       onLoad={event => {
-        hasErrorRef.current = false;
+        error.current = false;
         onLoad?.(event);
       }}
       onLoadEnd={() => {
         let current: Status = 'success';
-        if (hasErrorRef.current) {
+        if (error.current) {
           current = 'error';
         }
         setStatus(prevState => (prevState !== current ? current : prevState));
         onLoadEnd?.();
       }}
       onError={() => {
-        hasErrorRef.current = true;
+        error.current = true;
         onError?.();
       }}
     >