@momo-kits/foundation 0.168.1-beta.1 → 0.168.1-rn.88.0

package/Application/BottomSheet.tsx

@@ -333,7 +333,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       onRequestClose={() => {
         onDismiss();
       }}
-      style={StyleSheet.absoluteFillObject}
+      style={StyleSheet.absoluteFill}
       isModalKit={true}
     >
       <KeyboardAvoidingView
@@ -347,7 +347,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         style={styles.container}
       >
         <Pressable
-          style={StyleSheet.absoluteFillObject}
+          style={StyleSheet.absoluteFill}
           onPress={() => {
             action.current = 'touch';
             onDismiss();

package/Application/ModalScreen.tsx

@@ -133,7 +133,7 @@ const Modal: React.FC<ModalParams> = props => {
       transparent
       visible={true}
       onRequestClose={onDismiss}
-      style={StyleSheet.absoluteFillObject}
+      style={StyleSheet.absoluteFill}
       isModalKit={true}
     >
       <KeyboardAvoidingView
@@ -141,7 +141,7 @@ const Modal: React.FC<ModalParams> = props => {
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
       >
         <Pressable
-          style={StyleSheet.absoluteFillObject}
+          style={StyleSheet.absoluteFill}
           onPress={() => onDismiss(undefined, barrierDismissible)}
         >
           <Animated.View style={[styles.overlayContent, { opacity }]} />

package/Application/StackScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
-import { Alert, InteractionManager } from 'react-native';
+import { Alert } from 'react-native';
 import { useHeaderHeight } from '@react-navigation/elements';
 import { ScreenTrackingParams } from './types';
 import Navigation from './Navigation';
@@ -8,7 +8,12 @@ import { version } from '../package.json';
 import { SwipeBackHaptic, useAppState } from './utils';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
 
-const runAfterInteractions = InteractionManager.runAfterInteractions;
+// RN 0.87+: InteractionManager đã bị xoá khỏi react-native → thay bằng requestIdleCallback.
+// Giữ nguyên shape trả về { cancel } để code bên dưới (timeoutInteraction?.cancel?.()) không đổi.
+const runAfterInteractions = (task: () => void) => {
+  const handle = requestIdleCallback(() => task());
+  return { cancel: () => cancelIdleCallback(handle) };
+};
 
 /**
  * container for stack screen

package/Divider/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { View, ViewStyle } from 'react-native';
+import { StyleProp, View, ViewStyle } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Spacing } from '../Consts';
 import { DashDivider } from './DashDivider';
@@ -8,7 +8,7 @@ export interface DividerProps {
   /**
    * Custom styles for divider
    */
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
 
   /**
    * Enable margin vertical 4px
@@ -30,13 +30,13 @@ const Divider: React.FC<DividerProps> = ({
   return (
     <View
       style={[
-        style,
         {
           height: 1,
           width: '100%',
           backgroundColor: theme.colors.border.default,
           marginVertical: useMargin ? Spacing.XS : 0,
         },
+        style,
       ]}
     />
   );

package/Image/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Image as RNImage, StyleSheet, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styles from './styles';
 import {
@@ -23,6 +23,10 @@ export const getImageName = (source: any): string => {
   return '';
 };
 
+const isDataUriSource = (source: any): boolean => {
+  return typeof source?.uri === 'string' && source.uri.startsWith('data:');
+};
+
 const Image: React.FC<ImageProps> = ({
   style,
   source,
@@ -43,6 +47,7 @@ const Image: React.FC<ImageProps> = ({
   const [status, setStatus] = useState<Status>('success');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const useFastImage = !isDataUriSource(source);
 
   let accessibilityLabel: any = `img|${getImageName(source)}`;
   if (component?.componentId) {
@@ -79,6 +84,46 @@ const Image: React.FC<ImageProps> = ({
     return children;
   };
 
+  if (!useFastImage) {
+    return (
+      <RNImage
+        {...rest}
+        {...{
+          accessibilityLabel: rest.accessibilityLabel ?? accessibilityLabel,
+        }}
+        source={source}
+        style={[
+          styles.container,
+          style,
+          showBaseLineDebug && styles.debugBaseLine,
+        ]}
+        onLoadStart={() => {
+          error.current = false;
+          if (status !== 'loading' && loading) {
+            setStatus('loading');
+          }
+        }}
+        onLoad={() => {
+          error.current = false;
+        }}
+        onLoadEnd={() => {
+          let current: Status = 'success';
+          if (error.current) {
+            current = 'error';
+          }
+          setStatus(prevState =>
+            prevState !== current ? current : prevState,
+          );
+        }}
+        onError={() => {
+          error.current = true;
+        }}
+      >
+        {renderContent()}
+      </RNImage>
+    );
+  }
+
   return (
     <FastImage
       {...rest}

package/package.json

@@ -1,38 +1,40 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.168.1-beta.1",
+    "version": "0.168.1-rn.88.0",
     "description": "React Native Component Kits",
-    "main": "index.ts",
-    "scripts": {},
     "keywords": [
         "@momo-kits/foundation"
     ],
+    "license": "MoMo",
+    "main": "index.ts",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "scripts": {},
     "dependencies": {
-        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
-        "@react-navigation/bottom-tabs": "7.4.2",
-        "@react-navigation/core": "7.12.1",
-        "@react-navigation/elements": "2.5.2",
-        "@react-navigation/native": "7.1.14",
-        "@react-navigation/routers": "7.4.1",
-        "@react-navigation/stack": "7.4.2",
-        "react-native-gesture-handler": "2.27.1",
-        "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-        "react-native-reanimated": "4.2.2",
-        "react-native-worklets": "0.6.1",
-        "react-native-safe-area-context": "5.5.2",
-        "react-native-reserved-regions": "0.2.0",
+        "@react-navigation/bottom-tabs": "7.21.0",
+        "@react-navigation/core": "7.24.0",
+        "@react-navigation/elements": "2.9.45",
+        "@react-navigation/native": "7.5.1",
+        "@react-navigation/routers": "7.6.5",
+        "@react-navigation/stack": "7.12.1",
         "@shopify/flash-list": "2.1.0",
-        "lottie-react-native": "7.2.4"
-    },
-    "peerDependencies": {
-        "react-native": "*",
-        "react-native-worklets": "0.6.1"
+        "lottie-react-native": "7.3.6",
+        "react-native-fast-image": "git+https://oauth2:k_r5y_gV6sX9-TqQxgcd@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
+        "react-native-gesture-handler": "3.4.0",
+        "react-native-linear-gradient": "git+https://oauth2:k_r5y_gV6sX9-TqQxgcd@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
+        "react-native-reanimated": "4.7.1",
+        "react-native-safe-area-context": "5.7.0",
+        "react-native-reserved-regions": "0.2.0"
     },
     "devDependencies": {
-        "@types/color": "3.0.6"
+        "@types/color": "3.0.6",
+        "react-native-reanimated": "4.7.1",
+        "react-native-worklets": "0.13.0"
     },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "license": "MoMo"
+    "peerDependencies": {
+        "react-native": "*",
+        "react-native-reanimated": ">=4.7.0",
+        "react-native-worklets": ">=0.13.0"
+    }
 }