@momo-kits/foundation 0.162.2-beta.22 → 0.162.2-rn.86.2

package/Application/BottomSheet.tsx

@@ -255,7 +255,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       onRequestClose={() => {
         onDismiss();
       }}
-      style={StyleSheet.absoluteFillObject}
+      style={StyleSheet.absoluteFill}
       isModalKit={true}
     >
       <KeyboardAvoidingView
@@ -269,7 +269,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

@@ -128,7 +128,7 @@ const Modal: React.FC<ModalParams> = props => {
       transparent
       visible={true}
       onRequestClose={onDismiss}
-      style={StyleSheet.absoluteFillObject}
+      style={StyleSheet.absoluteFill}
       isModalKit={true}
     >
       <KeyboardAvoidingView
@@ -136,7 +136,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

@@ -315,6 +315,7 @@ const StackScreen: React.FC<any> = props => {
     <ScreenContext.Provider
       value={{
         screenName,
+        bottomTab: !!bottomTab,
         onElementLoad: (item: any) => {
           /**
            * widget handle

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/Layout/Screen.tsx

@@ -25,10 +25,7 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import {
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ApplicationContext, ScreenContext } from '../Context';
 import Navigation from '../Application/Navigation';
@@ -166,13 +163,6 @@ export interface ScreenProps extends ViewProps {
   trackingParams?: ScreenTrackingParams;
 }
 
-/**
- * Scroll distance (px) over which the animated search header collapses from its
- * expanded to its docked state — the input range consumed by `HeaderExtendHeader`
- * and the settle threshold in `handleScrollEnd`.
- */
-const SEARCH_HEADER_COLLAPSE_DISTANCE = 100;
-
 const Screen = forwardRef(
   (
     {
@@ -202,8 +192,8 @@ const Screen = forwardRef(
     ref: any,
   ) => {
     const screenRef = useRef<View | ScrollView>(null);
-    const { width: widthDevice, height: heightDevice } = useWindowDimensions();
-    const { theme } = useContext(ApplicationContext);
+    const { width: widthDevice } = useWindowDimensions();
+    const { theme, navigator } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
@@ -242,7 +232,8 @@ const Screen = forwardRef(
     }, [customAnimatedValue, internalShared]);
 
     const currentTint = useRef<string | undefined>(undefined);
-    const isTab = navigation?.instance?.getState?.()?.type === 'tab';
+    
+    const isTab = !!screen?.bottomTab;
 
     let handleScroll;
     let Component: any = View;
@@ -657,23 +648,9 @@ const Screen = forwardRef(
             onScroll={handleScroll}
             onScrollEndDrag={handleScrollEnd}
             scrollEventThrottle={16}
-            style={[
-              Styles.flex,
-              !scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
-            ]}
+            style={[Styles.flex]}
             contentContainerStyle={[
               scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
-              // The animated search header collapses as the body scrolls. When the
-              // body is short (e.g. no search history) the ScrollView is barely
-              // scrollable, so overscroll bounce feeds the scroll-driven animation
-              // and the input jitters on its way up to the header. A ScrollView
-              // frame can never exceed the window, so forcing the content to be at
-              // least one screen plus the collapse distance guarantees the animation
-              // always has room to complete smoothly, independent of body content.
-              scrollable &&
-                inputSearchProps && {
-                  minHeight: heightDevice + SEARCH_HEADER_COLLAPSE_DISTANCE,
-                },
               scrollViewProps?.contentContainerStyle,
             ]}
           >
@@ -687,9 +664,7 @@ const Screen = forwardRef(
               <FloatingButton
                 {...floatingButtonProps}
                 animatedValue={sharedValue}
-                bottom={
-                  Footer || isTab ? 12 : bottomInset + Spacing.S
-                }
+                bottom={Footer || isTab ? 12 : bottomInset + Spacing.S}
               />
             </View>
           )}

package/package.json

@@ -1,35 +1,35 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.162.2-beta.22",
+    "version": "0.162.2-rn.86.2",
     "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:k_r5y_gV6sX9-TqQxgcd@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:k_r5y_gV6sX9-TqQxgcd@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-        "react-native-reanimated": "4.1.3",
-        "react-native-safe-area-context": "5.5.2",
         "@shopify/flash-list": "2.1.0",
-        "lottie-react-native": "7.2.4"
-    },
-    "peerDependencies": {
-        "react-native": "*"
+        "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": "2.31.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.2.2",
+        "react-native-safe-area-context": "5.7.0"
     },
     "devDependencies": {
         "@types/color": "3.0.6"
     },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "license": "MoMo"
+    "peerDependencies": {
+        "react-native": "*"
+    }
 }