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

package/Layout/layoutMetrics.ts

@@ -1,66 +1,57 @@
-/** Header geometry. */
+/**
+ * Header geometry
+ * - barHeight: navigation bar row below the status bar
+ * - iPhoneMinHeight: header never shorter than this on iPhone (landscape, iPhone Duo)
+ * - statusBarMinInset: a smaller top inset means the status bar is not on the top edge
+ * - largeWidth / largeMargin: @react-navigation/elements Header gives its content row
+ *   5pt side margins on iOS from 414pt wide
+ */
 export const HeaderMetrics = {
-  /** Navigation bar row below the status bar. */
   barHeight: 52,
-  /** Header never shorter than this on iPhone (landscape, iPhone Duo). */
   iPhoneMinHeight: 72,
-  /** A smaller top inset means the status bar is not on the top edge. */
   statusBarMinInset: 20,
-  /**
-   * From this width @react-navigation/elements Header gives its content row
-   * `largeMargin` (5pt) side margins on iOS.
-   */
   largeWidth: 414,
   largeMargin: 5,
 };
 
-/** iPhone Duo geometry, iOS 27.1 (Xcode 27.1 simulator). */
+/**
+ * iPhone Duo geometry, iOS 27.1 (Xcode 27.1 simulator)
+ * - maxAspectRatio: both displays are near 1.42 (inner) and 1.45 (outer), every slab
+ *   iPhone is 1.77 or taller
+ * - innerMinHeight: window height from which the inner display is in use (outer display
+ *   is 466pt tall in landscape, inner display 669pt)
+ * - controlSize / itemPitch: vertical bar of 48pt circular controls, item groups as 48pt
+ *   wide capsules at a 50pt pitch, 12pt from the strip's inner edge and 12pt apart
+ * - firstItemTop: with the status bar in the strip, the first control sits under the
+ *   camera, clock and connectivity cluster (cluster ends near y 151 on the outer display,
+ *   y 98 on the inner display in landscape)
+ * - outerHeaderHeight / outerCameraCenterY: on the outer display in portrait the header
+ *   is 4pt taller than iPhoneMinHeight and its title lines up with the camera punchout
+ *   (y 24–66 at the top of the strip)
+ * - edgeInset: on the outer display in landscape the strip holds no status bar, so its
+ *   controls start this far from the top and stay this far above the bottom, unless a
+ *   reserved region (the camera at either end) asks for more
+ * - innerStatusBarCenterY / innerStatusBarWidth: on the inner display in portrait the
+ *   clock and connectivity cluster sits at the top right corner (x 550–643 of 669, clock
+ *   digits centered on y 47); its reserved region, when reported, is taller than the glyphs
+ * - floatingTabBarHeight / floatingTabBarMargin / floatingTabBarInsetOverlap: the host
+ *   app's iOS 26 system tab bar on the inner display in portrait, a 62pt Liquid Glass pill
+ *   sized to its tabs with the QR as a pinned 62pt platter beside it, centered and at
+ *   least 20pt from the side edges; it overlaps the home indicator inset by 13pt (21pt
+ *   above the screen bottom with a 34pt inset)
+ */
 export const DuoMetrics = {
-  /**
-   * Both displays are near 1.42 (inner) and 1.45 (outer); every slab iPhone is
-   * 1.77 or taller.
-   */
   maxAspectRatio: 1.6,
-  /**
-   * Window height from which the inner display is in use (outer display is
-   * 466pt tall in landscape, inner display 669pt).
-   */
   innerMinHeight: 600,
-  /**
-   * Vertical bar of 48pt circular controls; item groups are 48pt wide capsules
-   * at a 50pt pitch, 12pt from the strip's inner edge and 12pt apart.
-   */
   controlSize: 48,
   itemPitch: 50,
-  /**
-   * With the status bar in the strip, the first control sits under the camera,
-   * clock and connectivity cluster (ends near y 151 outer, y 98 inner
-   * landscape).
-   */
   firstItemTop: 170,
   firstItemTopLandscape: 120,
-  /**
-   * Outer display in portrait: the header is 4pt taller than iPhoneMinHeight
-   * and its title lines up with the camera punchout (y 24–66 at the strip's
-   * top).
-   */
   outerHeaderHeight: 76,
   outerCameraCenterY: 45,
-  /**
-   * Outer display in landscape: no status bar in the strip, so controls keep
-   * this gap from both ends unless a reserved region (the camera) needs more.
-   */
   edgeInset: 24,
-  /**
-   * Inner display in portrait: clock and connectivity cluster at the top right
-   * (x 550–643 of 669, digits on y 47); a reported reserved region is taller.
-   */
   innerStatusBarCenterY: 47,
   innerStatusBarWidth: 120,
-  /**
-   * Host app's iOS 26 tab bar, inner display in portrait: a 62pt Liquid Glass
-   * pill plus 62pt QR platter, ≥ 20pt from the sides, 13pt over the home inset.
-   */
   floatingTabBarHeight: 62,
   floatingTabBarMargin: 20,
   floatingTabBarInsetOverlap: 13,

package/Layout/screenHeader.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { StatusBar, StatusBarStyle } from 'react-native';
 import { StackNavigationOptions } from '@react-navigation/stack';
+import type { SharedValue } from 'react-native-reanimated';
 import Navigation from '../Application/Navigation';
 import { AnimatedHeader, SearchHeaderProps } from '../Application/types';
 import { exportHeaderTitle } from '../Application/navigationOptions';
@@ -12,6 +13,11 @@ import {
   SearchHeader,
 } from '../Application';
 import { DuoGlassBackground } from '../Application/Components/DuoGlassBackground';
+import {
+  type HeaderContentLayout,
+  useHeaderFrameOptions,
+  useHeaderLayout,
+} from '../Application/headerLayout';
 import { getHeaderMargin } from './utils';
 import { ANIMATED_BANNER_HEIGHT } from './screenTypes';
 import { HeaderType } from './types';
@@ -29,6 +35,31 @@ type ScreenHeaderParams = {
   gradientColor?: string;
   headerBackground?: string;
   layoutOffset: number;
+  contentLayout?: HeaderContentLayout;
+};
+
+/**
+ * Transparent header for an `inputSearchProps` Screen: its title fades out over the
+ * first 50pt of scroll while the search collapses into the bar.
+ */
+const getSearchTitleOptions = (
+  sharedValue: SharedValue<number>,
+): StackNavigationOptions => {
+  return {
+    headerShown: true,
+    headerTransparent: true,
+    headerBackground: () => null,
+    headerTitle: (props: any) => (
+      <HeaderTitle
+        {...props}
+        interpolate={{
+          inputRange: [0, 50],
+          outputRange: [1, 0],
+        }}
+        animatedValue={sharedValue}
+      />
+    ),
+  };
 };
 
 /**
@@ -48,9 +79,12 @@ export const useScreenHeader = ({
   gradientColor,
   headerBackground,
   layoutOffset,
+  contentLayout,
 }: ScreenHeaderParams) => {
   const currentTint = useRef<string | undefined>(undefined);
   const appliedHeaderMode = useRef<string | undefined>(undefined);
+  const headerLayout = useHeaderLayout(contentLayout);
+  const frameOptions = useHeaderFrameOptions(contentLayout);
 
   // keepTitle leaves a title the screen set itself when the same type is re-applied
   const setHeaderType = useCallback(
@@ -79,21 +113,7 @@ export const useScreenHeader = ({
             headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
-            options = {
-              headerShown: true,
-              headerTransparent: true,
-              headerBackground: () => null,
-              headerTitle: (props: any) => (
-                <HeaderTitle
-                  {...props}
-                  interpolate={{
-                    inputRange: [0, 50],
-                    outputRange: [1, 0],
-                  }}
-                  animatedValue={sharedValue}
-                />
-              ),
-            };
+            options = getSearchTitleOptions(sharedValue);
           }
           break;
 
@@ -127,21 +147,7 @@ export const useScreenHeader = ({
             headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
-            options = {
-              headerShown: true,
-              headerTransparent: true,
-              headerBackground: () => null,
-              headerTitle: (props: any) => (
-                <HeaderTitle
-                  {...props}
-                  interpolate={{
-                    inputRange: [0, 50],
-                    outputRange: [1, 0],
-                  }}
-                  animatedValue={sharedValue}
-                />
-              ),
-            };
+            options = getSearchTitleOptions(sharedValue);
           }
       }
 
@@ -149,7 +155,11 @@ export const useScreenHeader = ({
         delete options.headerTitle;
       }
 
-      navigation?.instance?.setOptions({ header: undefined, ...options });
+      navigation?.instance?.setOptions({
+        header: undefined,
+        ...frameOptions,
+        ...options,
+      });
     },
     [
       gradientColor,
@@ -160,6 +170,7 @@ export const useScreenHeader = ({
       useShadowHeader,
       hasSideBar,
       quickReturnOptions,
+      frameOptions,
     ],
   );
 
@@ -207,7 +218,7 @@ export const useScreenHeader = ({
         };
       }
 
-      navigation?.instance?.setOptions(options);
+      navigation?.instance?.setOptions({ ...frameOptions, ...options });
     },
     [
       gradientColor,
@@ -218,32 +229,23 @@ export const useScreenHeader = ({
       hasSideBar,
       layoutOffset,
       quickReturnOptions,
+      frameOptions,
     ],
   );
 
   const setAnimatedSearch = useCallback(() => {
-    const options: StackNavigationOptions = {
-      headerShown: true,
-      headerTransparent: true,
-      headerBackground: () => null,
-      headerTitle: (props: any) => (
-        <HeaderTitle
-          {...props}
-          interpolate={{
-            inputRange: [0, 50],
-            outputRange: [1, 0],
-          }}
-          animatedValue={sharedValue}
-        />
-      ),
-    };
-
-    navigation?.instance?.setOptions({ header: undefined, ...options });
-  }, [navigation?.instance, sharedValue]);
+    const options = getSearchTitleOptions(sharedValue);
+    navigation?.instance?.setOptions({
+      header: undefined,
+      ...frameOptions,
+      ...options,
+    });
+  }, [navigation?.instance, sharedValue, frameOptions]);
 
-  // the search field spans the content, clear of the side bar and status bar clusters
+  // the search field spans the content (or the stretch frame), clear of the side bar
+  // and status bar clusters
   const setSearchHeader = (params: SearchHeaderProps) => {
-    let searchWidth = layout.width - 24;
+    let searchWidth = headerLayout.frameWidth;
     let searchLeft = Spacing.M;
     if (layout.sideBar) {
       searchWidth = layout.contentWidth - Spacing.M * 2;
@@ -254,6 +256,7 @@ export const useScreenHeader = ({
       searchWidth -= clearance.left + clearance.right;
     }
     const options: StackNavigationOptions = {
+      ...frameOptions,
       headerRight: undefined,
       headerTitleContainerStyle: {
         width: searchWidth,

package/Layout/screenTypes.ts

@@ -9,6 +9,7 @@ import {
 import { FloatingButtonProps } from './FloatingButton';
 import { HeaderType } from './types';
 import { InputRef } from '../Input';
+import type { HeaderContentLayout } from '../Application/headerLayout';
 
 export const ANIMATED_BANNER_HEIGHT = 210;
 
@@ -59,8 +60,9 @@ export interface ScreenProps extends ViewProps {
 
   /**
    * Optional. If `true`, the footer is inset by the standard horizontal margin
-   * (12pt each side); `false` spans the full width, e.g. for a footer with its
-   * own horizontal padding. Defaults to `true`, on every platform.
+   * (12pt each side). Set `false` for a footer that should span the full width —
+   * e.g. one that already carries its own horizontal padding.
+   * Defaults to `true`, on every platform.
    */
   marginFooter?: boolean;
 
@@ -76,10 +78,17 @@ export interface ScreenProps extends ViewProps {
   layoutOffset?: -8 | -24 | -56 | number;
 
   /**
-   * Optional. Width of the right header. Defaults to the toolkit width (73), or 0 when
+   * Optional. Width of the right header. Defaults to the toolkit width (84), or 0 when
    * iPhone Duo floats the toolkit into its side bar.
    */
-  headerRightWidth?: 0 | 73 | 110 | number;
+  headerRightWidth?: 0 | 84 | 124 | number;
+
+  /**
+   * Optional. `stretch` centers back, title or search and the right cluster of the
+   * header in a 600pt frame on wide windows (foldable inner display, tablet); the
+   * background and status bar stay full width. Defaults to `grid`.
+   */
+  contentLayout?: HeaderContentLayout;
 
   /**
    * Optional. Props for the floating action button.

package/Pagination/PaginationScroll.tsx

@@ -13,8 +13,6 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;
-// one frame at 60 fps
-const SCROLL_EVENT_THROTTLE = 16;
 
 /**
  * Horizontal scroll view with a small indicator that tracks the scroll offset.
@@ -33,7 +31,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const handleScroll = useAnimatedScrollHandler({
+  const onScroll = useAnimatedScrollHandler({
     onScroll: (event) => {
       left.value = event.contentOffset.x;
     },
@@ -56,8 +54,8 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
     return (
       <Animated.ScrollView
         ref={scrollViewRef as any}
-        onScroll={handleScroll}
-        scrollEventThrottle={SCROLL_EVENT_THROTTLE}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
         alwaysBounceHorizontal={false}
         showsHorizontalScrollIndicator={false}
         horizontal

package/Pagination/types.ts

@@ -3,9 +3,11 @@ import {Ref} from 'react';
 
 export type PaginationProps = {
   /**
-   * Optional. Visual style: 'default' dots, 'black_white' dots on a translucent
-   * dark background, 'number' page numbers. 'scroll' renders as 'default'; use
-   * `PaginationScroll` instead.
+   * Optional. Defines the visual style of the Pagination component.
+   * - 'default': Represents the default style.
+   * - 'black_white': Represents dots on a translucent dark background.
+   * - 'number': Represents a style where pages are represented by numbers.
+   * - 'scroll': Rendered as 'default'; use `PaginationScroll` instead.
    */
   type?: 'default' | 'black_white' | 'number' | 'scroll';
 

package/Popup/PopupNotify.tsx

@@ -12,9 +12,6 @@ import { ModalIconButton } from '../Application/ModalIconButton';
 import { splitHighlightText } from './utils';
 
 const MAX_ROW_TITLE_LENGTH = 12;
-const DESCRIPTION_MAX_HEIGHT = 172;
-const MAX_DESCRIPTION_LINES = 8.5;
-const IMAGE_ASPECT_RATIO = 1.7777;
 
 /**
  * Notify popup body: optional image, title, description, error code and one or
@@ -35,10 +32,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator, translate } = useContext(ApplicationContext);
-  const [isDescriptionScrollable, setIsDescriptionScrollable] = useState(false);
+  const [scrollContent, setScrollContent] = useState(false);
   const { isFoldable, popup } = useModalLayout();
   const { width: popupWidth, maxHeight, radius } = popup;
-  const scaledMaxHeight = useScaleSize(DESCRIPTION_MAX_HEIGHT);
+  const scaledMaxHeight = useScaleSize(172);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   const closeAction = useRef('touch_outside');
@@ -48,12 +45,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     // foldables cap the popup height, the description takes what is left
     Description = ScrollView;
     descriptionStyle = styles.shrink;
-  } else if (isDescriptionScrollable) {
+  } else if (scrollContent) {
     Description = ScrollView;
     descriptionStyle = { maxHeight: scaledMaxHeight };
   }
 
-  const handleAction = (callback?: () => void) => {
+  const onAction = (callback?: () => void) => {
     if (typeof onRequestClose === 'function') {
       onRequestClose?.(callback);
     } else {
@@ -75,7 +72,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                   size="medium"
                   onPress={() => {
                     closeAction.current = 'button_action';
-                    handleAction(secondary?.onPress);
+                    onAction(secondary?.onPress);
                   }}
                   accessibilityLabel={'btn_popup_cancel'}
                 />
@@ -89,7 +86,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               size="medium"
               onPress={() => {
                 closeAction.current = 'button_action';
-                handleAction(primary.onPress);
+                onAction(primary.onPress);
               }}
               accessibilityLabel={'btn_popup_allow'}
             />
@@ -106,7 +103,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             size="medium"
             onPress={() => {
               closeAction.current = 'button_action';
-              handleAction(primary.onPress);
+              onAction(primary.onPress);
             }}
           />
           {!!secondary?.title && (
@@ -119,7 +116,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 size="medium"
                 onPress={() => {
                   closeAction.current = 'button_action';
-                  handleAction(secondary?.onPress);
+                  onAction(secondary?.onPress);
                 }}
               />
             </>
@@ -153,7 +150,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       return text;
     }
     return segments.map((segment, index) => {
-      if (segment.isHighlighted) {
+      if (segment.highlight) {
         return (
           <Text key={index} typography={'header_s_semibold'}>
             {segment.text}
@@ -175,7 +172,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         style={styles.iconClose}
         onPress={() => {
           closeAction.current = 'icon_close';
-          handleAction(onIconClose);
+          onAction(onIconClose);
         }}
       />
     );
@@ -192,9 +189,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         accessibilityLabel={'description_popup_notify'}
         typography={'body_default_regular'}
         onTextLayout={({ nativeEvent: { lines } }) => {
-          const shouldScroll = lines.length > MAX_DESCRIPTION_LINES;
-          if (shouldScroll !== isDescriptionScrollable) {
-            setIsDescriptionScrollable(shouldScroll);
+          const enableScroll = lines.length > 8.5;
+          if (enableScroll !== scrollContent) {
+            setScrollContent(enableScroll);
           }
         }}
       >
@@ -263,7 +260,7 @@ const styles = StyleSheet.create({
   // clips the image and content to the card radius
   card: { overflow: 'hidden' },
   image: {
-    aspectRatio: IMAGE_ASPECT_RATIO,
+    aspectRatio: 1.7777,
   },
   shrink: { flexShrink: 1 },
   content: { padding: Spacing.XL },

package/Popup/PopupPromotion.tsx

@@ -9,7 +9,6 @@ import { useModalLayout } from '../Application/modalLayout';
 
 const ASPECT_RATIO = 0.72;
 const ICON_CLOSE_SIZE = 20;
-const CLOSE_GLYPH_SIZE = 14;
 // close button row under the image: marginTop + vertical padding + icon
 const CLOSE_ROW_HEIGHT = Spacing.S * 3 + ICON_CLOSE_SIZE;
 
@@ -38,7 +37,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const handleAction = (callback?: () => void) => {
+  const onAction = (callback?: () => void) => {
     if (typeof onRequestClose === 'function') {
       onRequestClose?.(callback);
     } else {
@@ -54,7 +53,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
           accessibilityLabel={'ic_popup_close'}
           onPress={() => {
             closeAction.current = 'icon_close';
-            handleAction(onIconClose);
+            onAction(onIconClose);
           }}
           style={styles.iconButton}
         >
@@ -70,7 +69,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
             <Icon
               source="navigation_close"
               color={theme.colors.background.surface}
-              size={CLOSE_GLYPH_SIZE}
+              size={14}
             />
           </View>
         </TouchableOpacity>
@@ -83,7 +82,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       accessibilityLabel={'popup_promotion'}
       style={[{ width: imageWidth }, showBaseLineDebug && styles.debugBaseLine]}
     >
-      <TouchableOpacity onPress={() => handleAction(onActionClick)}>
+      <TouchableOpacity onPress={() => onAction(onActionClick)}>
         <Image
           source={{
             uri: image,

package/Popup/types.ts

@@ -43,8 +43,10 @@ export type PopupNotifyProps = {
   primary: PopupAction;
 
   /**
-   * `buttonDirection`: Optional. Layout of the action buttons: 'row' horizontal,
-   * 'column' vertical, 'auto' column only when a title is too long for a row.
+   * `buttonDirection`: Optional. Represents the direction in which the action buttons are laid out.
+   * - 'row': Buttons are laid out horizontally.
+   * - 'column': Buttons are laid out vertically.
+   * - 'auto': The layout is automatically determined by title length.
    */
   buttonDirection?: PopupActionDirection;
 

package/Popup/utils.ts

@@ -1,4 +1,4 @@
-type HighlightSegment = { text: string; isHighlighted: boolean };
+type HighlightSegment = { text: string; highlight: boolean };
 
 /**
  * True for cased-script letters, digits and `_`; caseless scripts (CJK, Thai)
@@ -46,15 +46,12 @@ const splitHighlightText = (
       continue;
     }
     if (start > lastIndex) {
-      segments.push({
-        text: text.slice(lastIndex, start),
-        isHighlighted: false,
-      });
+      segments.push({ text: text.slice(lastIndex, start), highlight: false });
     }
-    segments.push({ text: match[0], isHighlighted: true });
+    segments.push({ text: match[0], highlight: true });
     lastIndex = end;
   }
-  segments.push({ text: text.slice(lastIndex), isHighlighted: false });
+  segments.push({ text: text.slice(lastIndex), highlight: false });
   return segments;
 };
 

package/Skeleton/index.tsx

@@ -21,12 +21,6 @@ import { Colors, Styles } from '../Consts';
 import styles from './styles';
 import { ScreenContext, SkeletonContext } from '../Context';
 
-const PRIMARY_COLOR = Colors.black_05;
-const HIGHLIGHT_COLOR1 = Colors.black_05;
-const HIGHLIGHT_COLOR2 = Colors.black_03;
-const SHIMMER_DURATION = 1000;
-const LAYOUT_ANIMATION_DURATION = 500;
-
 /**
  * Shimmering placeholder that fills its parent. Reports loading to the screen
  * context while mounted.
@@ -34,6 +28,9 @@ const LAYOUT_ANIMATION_DURATION = 500;
 const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   const screen = useContext<any>(ScreenContext);
   const [width, setWidth] = useState(0);
+  const PRIMARY_COLOR = Colors.black_05;
+  const HIGHLIGHT_COLOR1 = Colors.black_05;
+  const HIGHLIGHT_COLOR2 = Colors.black_03;
   const progress = useSharedValue(0);
 
   const shimmerColors = [HIGHLIGHT_COLOR1, HIGHLIGHT_COLOR2, HIGHLIGHT_COLOR1];
@@ -42,7 +39,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
     progress.value = 0;
     progress.value = withRepeat(
       withTiming(1, {
-        duration: SHIMMER_DURATION,
+        duration: 1000,
         easing: Easing.linear,
       }),
       -1,
@@ -60,7 +57,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
     return { transform: [{ translateX }] };
   });
 
-  const handleLayout = (newWidth: number) => {
+  const onLayout = (newWidth: number) => {
     if (newWidth !== width) {
       setWidth(newWidth);
     }
@@ -69,7 +66,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   return (
     <View style={[styles.container, style]}>
       <View
-        onLayout={e => handleLayout(e.nativeEvent.layout.width)}
+        onLayout={e => onLayout(e.nativeEvent.layout.width)}
         style={[Styles.flex, { backgroundColor: PRIMARY_COLOR }]}
       >
         <Animated.View style={[styles.shimmer, shimmerStyle]}>
@@ -99,28 +96,28 @@ const SkeletonProvider: React.FC<{ loading: boolean; children: any }> = ({
   loading = true,
   children,
 }) => {
-  const [isLoadingShown, setIsLoadingShown] = useState(loading);
+  const [previous, setPrevious] = useState(loading);
 
   useEffect(() => {
-    if (isLoadingShown !== loading) {
+    if (previous !== loading) {
       if (Platform.OS === 'android') {
         if (UIManager.setLayoutAnimationEnabledExperimental) {
           UIManager.setLayoutAnimationEnabledExperimental(true);
         }
       }
       LayoutAnimation.configureNext({
-        duration: LAYOUT_ANIMATION_DURATION,
+        duration: 500,
         create: {
           type: LayoutAnimation.Types.easeInEaseOut,
           property: LayoutAnimation.Properties.opacity,
         },
       });
-      setIsLoadingShown(loading);
+      setPrevious(loading);
     }
-  }, [loading, isLoadingShown]);
+  }, [loading, previous]);
 
   return (
-    <SkeletonContext.Provider value={{ loading: isLoadingShown }}>
+    <SkeletonContext.Provider value={{ loading: previous }}>
       {children}
     </SkeletonContext.Provider>
   );

package/package.json

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