@momo-kits/foundation 0.156.2-adoption.1 → 0.157.1-beta.2-viewboundary-test

package/Badge/Badge.tsx

@@ -6,7 +6,6 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { BadgeProps } from './types';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Text, useScaleSize } from '../Text';
-import { useScreenRegistry } from '../Layout/utils';
 
 const Badge: FC<BadgeProps> = ({
   label = '',
@@ -14,7 +13,6 @@ const Badge: FC<BadgeProps> = ({
   backgroundColor,
   accessibilityLabel,
 }) => {
-  useScreenRegistry('Badge');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { componentId } = useComponentId('Badge', accessibilityLabel);

package/Badge/BadgeDot.tsx

@@ -3,10 +3,8 @@ import { View } from 'react-native';
 import { BadgeDotProps } from './types';
 import styles from './styles';
 import { MiniAppContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const BadgeDot: FC<BadgeDotProps> = ({ size = 'large', style }) => {
-  useScreenRegistry('BadgeDot');
   const context = useContext<any>(MiniAppContext);
   let dotStyle;
   let dotContainerStyle;

package/Badge/BadgeDotAnimation.tsx

@@ -2,12 +2,10 @@ import React, { useEffect, useRef } from 'react';
 import { Animated, View } from 'react-native';
 import { BadgeDotProps } from './types';
 import styles from './styles';
-import { useScreenRegistry } from '../Layout/utils';
 
 const DURATION = 500;
 
 const BadgeDotAnimation = ({ size, style }: BadgeDotProps) => {
-  useScreenRegistry('BadgeDotAnimation');
   // Refs for animated values
   const scaleAnim = useRef(new Animated.Value(1)).current;
   const waveScaleAnim = useRef(new Animated.Value(1)).current;

package/Badge/BadgeRibbon.tsx

@@ -7,7 +7,6 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { Text } from '../Text';
 import { Colors } from '../Consts';
 import { Image } from '../Image';
-import { useScreenRegistry } from '../Layout/utils';
 
 const BadgeRibbon: FC<BadgeRibbonProps> = ({
   position = 'top_right',
@@ -15,7 +14,6 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
   isRound = false,
   style = {},
 }) => {
-  useScreenRegistry('BadgeRibbon');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const isRight = position === 'top_right' || position === 'bottom_right';

package/Button/index.tsx

@@ -28,7 +28,6 @@ import Reanimated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { useScreenRegistry } from '../Layout';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -74,7 +73,6 @@ const Button: FC<ButtonProps> = ({
 }) => {
   const { theme, config } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  useScreenRegistry('Button');
   const skeleton = useContext(SkeletonContext);
   const animationRef = useRef<LottieView>(null);
   const pressAnim = useSharedValue(0);

package/CheckBox/index.tsx

@@ -10,7 +10,6 @@ import {
 } from '../Context';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
-import { useScreenRegistry } from '../Layout';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -25,7 +24,6 @@ const CheckBox: FC<CheckBoxProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  useScreenRegistry('CheckBox');
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;

package/Context/index.ts

@@ -2,17 +2,8 @@ import { Platform } from 'react-native';
 import { createContext } from 'react';
 import { defaultContext } from '../Consts';
 
-export type ScreenRegistryContextType = {
-  register: (id: string, name: string) => void;
-  unregister: (id: string) => void;
-};
-
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
-const ScreenRegistryContext = createContext<ScreenRegistryContextType>({
-  register: () => {},
-  unregister: () => {},
-});
 
 const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
@@ -29,7 +20,6 @@ export {
   ApplicationContext,
   MiniAppContext,
   ScreenContext,
-  ScreenRegistryContext,
   ComponentContext,
   SkeletonContext,
   TrackingScopeContext,

package/Divider/DashDivider.tsx

@@ -3,7 +3,6 @@ import { View, ViewStyle } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Spacing } from '../Consts';
 import Svg, { Line } from 'react-native-svg';
-import { useScreenRegistry } from '../Layout/utils';
 
 export interface DashDividerProps {
   /**
@@ -13,7 +12,6 @@ export interface DashDividerProps {
 }
 
 const DashDivider: React.FC<DashDividerProps> = ({ style }) => {
-  useScreenRegistry('DashDivider');
   const { theme } = useContext(ApplicationContext);
   const borderColor = theme.colors.border.default;
 

package/Divider/index.tsx

@@ -3,7 +3,6 @@ import { View, ViewStyle } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Spacing } from '../Consts';
 import { DashDivider } from './DashDivider';
-import { useScreenRegistry } from '../Layout';
 
 export interface DividerProps {
   /**
@@ -26,9 +25,8 @@ const Divider: React.FC<DividerProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
 
-  useScreenRegistry('Divider');
-
   if (type === 'dash') return <DashDivider style={style} />;
+
   return (
     <View
       style={[

package/Icon/index.tsx

@@ -6,7 +6,6 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
 import { StyleSheet } from 'react-native';
 import { Colors } from '../Consts';
-import { useScreenRegistry } from '../Layout';
 
 const Icon: React.FC<IconProps> = ({
   source = 'ic_back',
@@ -17,7 +16,6 @@ const Icon: React.FC<IconProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  useScreenRegistry('Icon');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 

package/IconButton/index.tsx

@@ -43,7 +43,6 @@ const IconButton: React.FC<IconButtonProps> = ({
   params,
   ...rest
 }) => {
-  useScreenRegistry('IconButton');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 

package/Image/index.tsx

@@ -12,7 +12,6 @@ import { Skeleton } from '../Skeleton';
 import { Icon } from '../Icon';
 import { Styles } from '../Consts';
 import { ImageProps } from './types';
-import { useScreenRegistry } from '../Layout';
 
 type Status = 'success' | 'loading' | 'error';
 
@@ -37,7 +36,6 @@ const Image: React.FC<ImageProps> = ({
   const skeleton = useContext(SkeletonContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
-  useScreenRegistry('Image');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 

package/Input/Input.tsx

@@ -31,7 +31,6 @@ import {
   ComponentContext,
   MiniAppContext,
 } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 /**
  * Input default component
@@ -73,7 +72,6 @@ const Input = forwardRef(
     }: InputProps,
     ref,
   ) => {
-    useScreenRegistry('Input');
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const scaledFontSize = useScaleSize(14);

package/Input/InputDropDown.tsx

@@ -17,7 +17,6 @@ import { InputDropDownProps } from './index';
 import { Text, useScaleSize } from '../Text';
 import styles from './styles';
 import { Spacing } from '../Consts';
-import { useScreenRegistry } from '../Layout/utils';
 
 const InputDropDown = ({
   value,
@@ -39,7 +38,6 @@ const InputDropDown = ({
   multiline,
   ...props
 }: InputDropDownProps) => {
-  useScreenRegistry('InputDropDown');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);

package/Input/InputMoney.tsx

@@ -34,7 +34,6 @@ import { InputMoneyProps } from './index';
 import styles from './styles';
 import { formatNumberToMoney } from './utils';
 import SystemTextInput from './SystemTextInput';
-import { useScreenRegistry } from '../Layout/utils';
 
 const InputMoney = forwardRef(
   (
@@ -66,7 +65,6 @@ const InputMoney = forwardRef(
     }: InputMoneyProps,
     ref,
   ) => {
-    useScreenRegistry('InputMoney');
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);

package/Input/InputOTP.tsx

@@ -28,7 +28,6 @@ import {
   ComponentContext,
   MiniAppContext,
 } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const OTPCaret: FC<CaretProps> = ({ index, length }) => {
   const DURATION = 300;
@@ -91,7 +90,6 @@ const InputOTP = forwardRef(
     }: InputOTPProps,
     ref,
   ) => {
-    useScreenRegistry('InputOTP');
     const MAX_LENGTH = 10;
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);

package/Input/InputPhoneNumber.tsx

@@ -33,7 +33,6 @@ import styles from './styles';
 import SystemTextInput from './SystemTextInput';
 import { Image } from '../Image';
 import { Typography } from '../Text/types';
-import { useScreenRegistry } from '../Layout/utils';
 
 /**
  * Input default component
@@ -66,7 +65,6 @@ const InputPhoneNumber = forwardRef(
     }: InputPhoneNumberProps,
     ref,
   ) => {
-    useScreenRegistry('InputPhoneNumber');
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);

package/Input/InputSearch.tsx

@@ -28,7 +28,6 @@ import { InputRef, InputSearchProps } from './index';
 import styles from './styles';
 import { Styles } from '../Consts';
 import SystemTextInput from './SystemTextInput';
-import { useScreenRegistry } from '../Layout/utils';
 
 const TextTyping: FC<any> = ({
   data = [],
@@ -142,7 +141,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   },
   ref,
 ) => {
-  useScreenRegistry('InputSearch');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const scaledFontSize = useScaleSize(14);
@@ -350,6 +348,4 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   );
 };
 
-const ForwardedInputSearch = forwardRef(InputSearch);
-ForwardedInputSearch.displayName = 'InputSearch';
-export default ForwardedInputSearch;
+export default forwardRef(InputSearch);

package/Input/InputTextArea.tsx

@@ -22,7 +22,6 @@ import { InputTextAreaProps } from './index';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
 import { useComponentId } from '../Application';
-import { useScreenRegistry } from '../Layout/utils';
 
 const InputTextArea = forwardRef(
   (
@@ -48,7 +47,6 @@ const InputTextArea = forwardRef(
     }: InputTextAreaProps,
     ref,
   ) => {
-    useScreenRegistry('InputTextArea');
     const componentName = 'InputTextArea';
 
     const { componentId } = useComponentId(

package/Layout/Card.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem, useScreenRegistry } from './utils';
+import { useGridSystem } from './utils';
 import { GridContextProps } from './types';
 import { GridContext, GridSystem } from './index';
 import { Image } from '../Image';
@@ -27,7 +27,6 @@ const Card: React.FC<CardProps> = ({
   useShadow = false,
   ...props
 }) => {
-  useScreenRegistry('Card');
   const { showGrid, theme } = useContext(ApplicationContext);
   const { numberOfColumns } = useGridSystem();
 

package/Layout/FloatingButton.tsx

@@ -14,7 +14,6 @@ import {
 } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
-import { useScreenRegistry } from './utils';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -39,7 +38,6 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   animatedValue,
   bottom = 12,
 }: FloatingButtonProps) => {
-  useScreenRegistry('FloatingButton');
   const { theme } = useContext(ApplicationContext);
   const maxWidth = useRef(0);
   const minWidth = size === 'small' ? 36 : 48;

package/Layout/Item.tsx

@@ -2,7 +2,6 @@ import React, { useContext } from 'react';
 import { View, ViewProps } from 'react-native';
 import { GridContext } from './index';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useScreenRegistry } from './utils';
 import styles from './styles';
 import { SpanNumber } from './types';
 
@@ -24,7 +23,6 @@ const Item: React.FC<ItemProps> = ({
   children,
   style,
 }) => {
-  useScreenRegistry('Item');
   const { showGrid } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const grid = useContext(GridContext);

package/Layout/ItemList.tsx

@@ -4,7 +4,6 @@ import Item from './Item';
 import { GridContext } from './index';
 import styles from './styles';
 import { SpanNumber } from './types';
-import { useScreenRegistry } from './utils';
 
 export interface ItemListProps extends FlatListProps<any> {
   /**
@@ -25,7 +24,6 @@ const ItemList = forwardRef(
     }: ItemListProps,
     ref,
   ) => {
-    useScreenRegistry('ItemList');
     const { gutterSize, numberOfColumns } = useContext(GridContext);
     const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
     const numColumns = Math.floor(numberOfColumns / widthItem);

package/Layout/ItemSectionList.tsx

@@ -4,7 +4,6 @@ import Item from './Item';
 import { GridContext } from './index';
 import styles from './styles';
 import { SpanNumber } from './types';
-import { useScreenRegistry } from './utils';
 
 export interface ItemSectionListProps extends SectionListProps<any> {
   /**
@@ -20,7 +19,6 @@ const ItemSectionList: FC<ItemSectionListProps> = ({
   contentContainerStyle,
   ...props
 }) => {
-  useScreenRegistry('ItemSectionList');
   const { gutterSize, numberOfColumns } = useContext(GridContext);
   const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
   const _renderItem = (item: any) => {

package/Layout/Screen.tsx

@@ -9,7 +9,6 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
-  useMemo,
   useRef,
 } from 'react';
 import {
@@ -22,18 +21,12 @@ import {
   ScrollViewProps,
   StatusBar,
   StatusBarStyle,
-  TouchableOpacity,
   useWindowDimensions,
   View,
   ViewProps,
-  Text,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import {
-  ApplicationContext,
-  ScreenContext,
-  ScreenRegistryContext,
-} from '../Context';
+import { ApplicationContext, ScreenContext } from '../Context';
 import Navigation from '../Application/Navigation';
 import {
   AnimatedHeader,
@@ -523,135 +516,6 @@ const Screen = forwardRef(
       }
     };
 
-    const registryRef = useRef<Map<string, string>>(new Map());
-    const registeredNamesRef = useRef<Set<string>>(new Set());
-
-    const register = useCallback((id: string, name: string) => {
-      registryRef.current.set(id, name);
-      registeredNamesRef.current.add(name);
-    }, []);
-
-    const unregister = useCallback((id: string) => {
-      const name = registryRef.current.get(id);
-      registryRef.current.delete(id);
-      const stillHasName = Array.from(registryRef.current.values()).includes(
-        name!,
-      );
-      if (!stillHasName) {
-        registeredNamesRef.current.delete(name!);
-      }
-    }, []);
-
-    const registryValue = useMemo(
-      () => ({ register, unregister }),
-      [register, unregister],
-    );
-
-    const WHITELISTED_COMPONENTS = useMemo(
-      () =>
-        new Set([
-          'View',
-          'TouchableOpacity',
-          'TouchableHighlight',
-          'TouchableWithoutFeedback',
-          'Pressable',
-          'ScrollView',
-          'FlatList',
-          'SectionList',
-          'SafeAreaView',
-          'KeyboardAvoidingView',
-          'ActivityIndicator',
-          'ImageBackground',
-          'Fragment',
-        ]),
-      [],
-    );
-
-    const [usageStats, setUsageStats] = React.useState<{
-      total: number;
-      internal: number;
-      external: number;
-      breakdown: Record<string, number>;
-      externalNames: string[];
-    }>({
-      total: 0,
-      internal: 0,
-      external: 0,
-      breakdown: {},
-      externalNames: [],
-    });
-    const [isUsageExpanded, setIsUsageExpanded] = React.useState(false);
-
-    const countExternalChildren = useCallback(
-      (node: React.ReactNode): { count: number; names: string[] } => {
-        let count = 0;
-        const names: string[] = [];
-        const traverse = (n: React.ReactNode) => {
-          React.Children.forEach(n, child => {
-            if (!React.isValidElement(child)) return;
-            const name =
-              (child.type as any)?.displayName ||
-              (child.type as any)?.name ||
-              '';
-            if (
-              !registeredNamesRef.current.has(name) &&
-              !WHITELISTED_COMPONENTS.has(name)
-            ) {
-              count++;
-              if (name) {
-                names.push(name);
-              } else {
-                names.push('Anonymous');
-              }
-            }
-            if ((child as any).props?.children) {
-              traverse((child as any).props.children);
-            }
-          });
-        };
-        traverse(node);
-        return { count, names };
-      },
-      [WHITELISTED_COMPONENTS],
-    );
-
-    useEffect(() => {
-      if (__DEV__) {
-        const allRegistered = Array.from(registryRef.current.values());
-        const internal = allRegistered.length;
-        const { count: external, names: externalNames } =
-          countExternalChildren(children);
-        const total = internal + external;
-        const counts: Record<string, number> = {};
-        allRegistered.forEach(name => {
-          counts[name] = (counts[name] || 0) + 1;
-        });
-        console.log(
-          `[Screen] Total: ${total}, Internal: ${internal}, External: ${external}`,
-        );
-        console.log(`[Screen] Internal components:`, counts);
-        if (externalNames.length > 0) {
-          console.log(`[Screen] External components:`, externalNames);
-        }
-        setUsageStats(prev => {
-          if (
-            prev.total === total &&
-            prev.internal === internal &&
-            prev.external === external
-          ) {
-            return prev;
-          }
-          return {
-            total,
-            internal,
-            external,
-            breakdown: counts,
-            externalNames,
-          };
-        });
-      }
-    });
-
     /**
      * build content for screen for grid rule
      */
@@ -699,144 +563,82 @@ const Screen = forwardRef(
       }
     };
 
-    const renderUsageRate = () => {
-      if (!__DEV__ || usageStats.total === 0) return null;
-      const rate = Math.round((usageStats.internal / usageStats.total) * 100);
-      let color = '#4caf50';
-      if (rate < 50) color = '#f44336';
-      else if (rate < 80) color = '#ff9800';
-
-      const hasExternals = usageStats.externalNames.length > 0;
-
-      return (
-        <TouchableOpacity
-          activeOpacity={0.8}
-          onPress={() => hasExternals && setIsUsageExpanded(prev => !prev)}
-          style={{
-            position: 'absolute',
-            bottom: insets.bottom + 100,
-            right: 16,
-            backgroundColor: 'rgba(0,0,0,0.7)',
-            padding: isUsageExpanded ? 12 : 8,
-            borderRadius: 8,
-            zIndex: 9999,
-            alignItems: 'flex-end',
-            minWidth: isUsageExpanded ? 160 : undefined,
-          }}
-        >
-          <Text style={{ color: 'white', fontSize: 12, fontWeight: 'bold' }}>
-            Kit Usage: <Text style={{ color }}>{rate}%</Text>
-            {hasExternals && !isUsageExpanded && ' ▼'}
-          </Text>
-          <Text style={{ color: '#ccc', fontSize: 10, marginTop: 4 }}>
-            {usageStats.internal} / {usageStats.total} Components
-          </Text>
-          {isUsageExpanded && hasExternals && (
-            <View style={{ marginTop: 8, alignSelf: 'stretch' }}>
-              <Text style={{ color: '#aaa', fontSize: 9, marginBottom: 4 }}>
-                External ({usageStats.externalNames.length}):
-              </Text>
-              <Text
-                style={{ color: '#f88', fontSize: 10 }}
-                numberOfLines={8}
-              >
-                {usageStats.externalNames.slice(0, 15).join(', ')}
-                {usageStats.externalNames.length > 15 &&
-                  ` ... +${usageStats.externalNames.length - 15} more`}
-              </Text>
-              <Text style={{ color: '#666', fontSize: 9, marginTop: 4 }}>
-                Tap to collapse ▲
-              </Text>
-            </View>
-          )}
-        </TouchableOpacity>
-      );
-    };
-
     return (
-      <ScreenRegistryContext.Provider value={registryValue}>
-        <View
-          style={[
-            Styles.flex,
-            {
-              backgroundColor:
-                backgroundColor ?? theme.colors.background.default,
-            },
-          ]}
+      <View
+        style={[
+          Styles.flex,
+          {
+            backgroundColor: backgroundColor ?? theme.colors.background.default,
+          },
+        ]}
+      >
+        <HeaderExtendHeader
+          headerType={headerType}
+          heightHeader={heightHeader}
+          headerRightWidth={headerRightWidth}
+          animatedValue={animatedValue.current}
+          inputSearchProps={inputSearchProps}
+          navigation={navigation}
+          inputSearchRef={inputSearchRef}
+          useShadowHeader={useShadowHeader}
+          gradientColor={gradientColor}
+          headerBackground={headerBackground}
+        />
+
+        <KeyboardAvoidingView
+          style={Styles.flex}
+          enabled={enableKeyboardAvoidingView}
+          keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
+          behavior={Platform.select({
+            ios: 'padding',
+            android: undefined,
+          })}
         >
-          <HeaderExtendHeader
-            headerType={headerType}
-            heightHeader={heightHeader}
-            headerRightWidth={headerRightWidth}
-            animatedValue={animatedValue.current}
-            inputSearchProps={inputSearchProps}
-            navigation={navigation}
-            inputSearchRef={inputSearchRef}
-            useShadowHeader={useShadowHeader}
-            gradientColor={gradientColor}
-            headerBackground={headerBackground}
-          />
-
-          <KeyboardAvoidingView
+          {Header}
+
+          <Component
+            {...scrollViewProps}
+            ref={screenRef}
+            showsVerticalScrollIndicator={false}
+            onScroll={handleScroll}
+            onScrollEndDrag={handleScrollEnd}
+            scrollEventThrottle={16}
             style={Styles.flex}
-            enabled={enableKeyboardAvoidingView}
-            keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
-            behavior={Platform.select({
-              ios: 'padding',
-              android: undefined,
-            })}
           >
-            {Header}
-
-            <Component
-              {...scrollViewProps}
-              ref={screenRef}
-              showsVerticalScrollIndicator={false}
-              onScroll={handleScroll}
-              onScrollEndDrag={handleScrollEnd}
-              scrollEventThrottle={16}
-              style={Styles.flex}
-            >
-              {renderAnimatedHeader()}
-
-              {useGridLayout ? renderContent(children) : children}
-            </Component>
-
-            {floatingButtonProps && (
-              <View>
-                <FloatingButton
-                  {...floatingButtonProps}
-                  animatedValue={animatedValue.current}
-                  bottom={
-                    Footer || isTab
-                      ? 12
-                      : Math.min(insets.bottom, 21) + Spacing.S
-                  }
-                />
-              </View>
-            )}
-
-            {Footer && (
-              <View
-                style={[
-                  styles.shadow,
-                  {
-                    paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
-                    backgroundColor: theme.colors.background.surface,
-                  },
-                ]}
-              >
-                <Section>{Footer}</Section>
-              </View>
-            )}
-          </KeyboardAvoidingView>
+            {renderAnimatedHeader()}
+
+            {useGridLayout ? renderContent(children) : children}
+          </Component>
+
+          {floatingButtonProps && (
+            <View>
+              <FloatingButton
+                {...floatingButtonProps}
+                animatedValue={animatedValue.current}
+                bottom={
+                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
+                }
+              />
+            </View>
+          )}
 
-          {renderUsageRate()}
-        </View>
-      </ScreenRegistryContext.Provider>
+          {Footer && (
+            <View
+              style={[
+                styles.shadow,
+                {
+                  paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
+                  backgroundColor: theme.colors.background.surface,
+                },
+              ]}
+            >
+              <Section>{Footer}</Section>
+            </View>
+          )}
+        </KeyboardAvoidingView>
+      </View>
     );
   },
 );
 
-Screen.displayName = 'Screen';
 export default Screen;

package/Layout/Section.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem, useScreenRegistry } from './utils';
+import { useGridSystem } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import { ApplicationContext, MiniAppContext } from '../Context';
@@ -34,7 +34,6 @@ const Section: React.FC<SectionProps> = ({
   style,
   ...props
 }) => {
-  useScreenRegistry('Section');
   const { showGrid } = useContext(ApplicationContext);
   const { numberOfColumns } = useGridSystem();
 

package/Layout/TrackingScope.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { TrackingScopeContext } from '../Context';
-import { useScreenRegistry } from './utils';
 
 const TrackingScope = ({
   scopeName,
@@ -9,7 +8,6 @@ const TrackingScope = ({
   scopeName: string;
   children: any;
 }) => {
-  useScreenRegistry('TrackingScope');
   return (
     <TrackingScopeContext.Provider value={{ scopeName }}>
       {children}

package/Layout/index.ts

@@ -1,7 +1,7 @@
 import Card from './Card';
 import Section from './Section';
 import GridSystem from './GridSystem';
-import { validateChildren, useScreenRegistry } from './utils';
+import { validateChildren } from './utils';
 import { createContext } from 'react';
 import { GridContextProps } from './types';
 import Item from './Item';
@@ -26,7 +26,6 @@ export {
   Section,
   GridSystem,
   validateChildren,
-  useScreenRegistry,
   Item,
   ItemList,
   ItemSectionList,

package/Layout/utils.ts

@@ -1,6 +1,5 @@
-import React, { Fragment, ReactElement, useContext, useEffect, useRef } from 'react';
+import React, { Fragment, ReactElement } from 'react';
 import { useWindowDimensions } from 'react-native';
-import { ScreenRegistryContext } from '../Context';
 
 /**
  * validate children type
@@ -45,16 +44,4 @@ const useGridSystem = () => {
   return { numberOfColumns };
 };
 
-let registryIdCounter = 0;
-
-const useScreenRegistry = (name: string) => {
-  const { register, unregister } = useContext(ScreenRegistryContext);
-  const id = useRef(`__sr_${name}_${registryIdCounter++}`).current;
-
-  useEffect(() => {
-    register(id, name);
-    return () => unregister(id);
-  }, [id, name, register, unregister]);
-};
-
-export { useGridSystem, validateChildren, useScreenRegistry };
+export { useGridSystem, validateChildren };

package/Loader/DotLoader.tsx

@@ -4,10 +4,8 @@ import animation from '../Assets/DotAnimation.json';
 import { ApplicationContext } from '../Context';
 import { hexToRGBA } from './utils';
 import { LoaderProps } from './types';
-import { useScreenRegistry } from '../Layout/utils';
 
 const DotLoader: FC<LoaderProps> = ({ color, style }) => {
-  useScreenRegistry('DotLoader');
   const { theme } = useContext(ApplicationContext);
 
   const arrayColor = [

package/Loader/Loader.tsx

@@ -2,10 +2,8 @@ import React, {FC} from 'react';
 import {LoaderProps} from './types';
 import DotLoader from './DotLoader';
 import Spinner from './Spinner';
-import { useScreenRegistry } from '../Layout';
 
-const Loader: FC<LoaderProps> = ({type = 'dot', ...props}) => { 
-  useScreenRegistry('Loader');
+const Loader: FC<LoaderProps> = ({type = 'dot', ...props}) => {
   if (type === 'spinner') {
     return <Spinner {...props} key={props.color} />;
   }

package/Loader/ProgressBar.tsx

@@ -4,10 +4,8 @@ import styles from './styles';
 import { ProgressBarProps } from './types';
 import { ApplicationContext } from '../Context';
 import { Radius } from '../Consts';
-import { useScreenRegistry } from '../Layout/utils';
 
 const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
-  useScreenRegistry('ProgressBar');
   const { theme } = useContext(ApplicationContext);
   const animation = useRef(new Animated.Value(0)).current;
 

package/Loader/Spinner.tsx

@@ -4,10 +4,8 @@ import animation from '../Assets/SpinnerAnimation.json';
 import { hexToRGBA } from './utils';
 import { ApplicationContext } from '../Context';
 import { LoaderProps } from './types';
-import { useScreenRegistry } from '../Layout/utils';
 
 const Spinner: FC<LoaderProps> = ({ color, style }) => {
-  useScreenRegistry('Spinner');
   const { theme } = useContext(ApplicationContext);
 
   let source: any = animation;

package/Pagination/Dot.tsx

@@ -3,10 +3,8 @@ import { Animated } from 'react-native';
 import styles from './styles';
 import { DotProps } from './types';
 import { ApplicationContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const Dot: FC<DotProps> = ({ active, style }) => {
-  useScreenRegistry('Dot');
   const { theme } = useContext(ApplicationContext);
   const dotStyle = active
     ? [styles.activeDot]

package/Pagination/PaginationDot.tsx

@@ -5,14 +5,12 @@ import Dot from './Dot';
 import styles from './styles';
 import { Spacing } from '../Consts';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const PaginationDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
   style,
 }) => {
-  useScreenRegistry('PaginationDot');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 

package/Pagination/PaginationNumber.tsx

@@ -5,14 +5,12 @@ import styles from './styles';
 import { Text } from '../Text';
 import { Colors } from '../Consts';
 import { MiniAppContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const PaginationNumber: FC<ChildPaginationProps> = ({
   activeIndex = 0,
   dataLength = 2,
   style,
 }) => {
-  useScreenRegistry('PaginationNumber');
   const context = useContext<any>(MiniAppContext);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

package/Pagination/PaginationScroll.tsx

@@ -3,7 +3,6 @@ import { Animated, View } from 'react-native';
 import { ScrollIndicatorProps } from './types';
 import styles from './styles';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;
@@ -12,7 +11,6 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   children,
   scrollViewRef,
 }) => {
-  useScreenRegistry('PaginationScroll');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const left = useRef(new Animated.Value(0)).current;

package/Pagination/PaginationWhiteDot.tsx

@@ -5,14 +5,12 @@ import styles from './styles';
 import Dot from './Dot';
 import { Colors, Spacing } from '../Consts';
 import { MiniAppContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
   style,
 }) => {
-  useScreenRegistry('PaginationWhiteDot');
   const context = useContext<any>(MiniAppContext);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

package/Popup/PopupNotify.tsx

@@ -14,7 +14,6 @@ import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
 import { runOnJS } from 'react-native-reanimated';
-import { useScreenRegistry } from '../Layout/utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
@@ -27,7 +26,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   onIconClose,
   onRequestClose,
 }) => {
-  useScreenRegistry('PopupNotify');
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator, translate } = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);

package/Popup/PopupPromotion.tsx

@@ -5,7 +5,6 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Icon } from '../Icon';
-import { useScreenRegistry } from '../Layout/utils';
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   image,
@@ -13,7 +12,6 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   onRequestClose,
   onActionClick,
 }) => {
-  useScreenRegistry('PopupPromotion');
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator } = useContext(ApplicationContext);
   const { width: widthDevice } = Dimensions.get('window');

package/Radio/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useContext } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useScreenRegistry } from '../Layout';
+
 import { RadioProps } from './types';
 import { Text } from '../Text';
 import styles from './styles';
@@ -24,7 +24,6 @@ const Radio: FC<RadioProps> = ({
   accessibilityLabel,
   ...props
 }) => {
-  useScreenRegistry('Radio');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const selected = value === groupValue;

package/Skeleton/index.tsx

@@ -13,10 +13,8 @@ import { SkeletonTypes } from './types';
 import { Colors, Styles } from '../Consts';
 import styles from './styles';
 import { ScreenContext, SkeletonContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
-  useScreenRegistry('Skeleton');
   const screen = useContext<any>(ScreenContext);
   const [width, setWidth] = useState(0);
   const PRIMARY_COLOR = Colors.black_05;

package/Switch/index.tsx

@@ -5,7 +5,6 @@ import styles from './styles';
 import { Colors } from '../Consts';
 import { useComponentId } from '../Application';
 import { ComponentContext, MiniAppContext } from '../Context';
-import { useScreenRegistry } from '@momo-kits/foundation';
 
 const Switch: FC<SwitchProps> = ({
   value = false,
@@ -16,7 +15,6 @@ const Switch: FC<SwitchProps> = ({
   accessibilityLabel,
   ...props
 }) => {
-  useScreenRegistry('Switch');
   const context = useContext<any>(MiniAppContext);
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';

package/Tag/index.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useContext } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { TagProps } from './types';
-import { useScreenRegistry } from '../Layout/utils';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Icon } from '../Icon';
 import { Text, useScaleSize } from '../Text';
@@ -35,7 +34,6 @@ const Tag: FC<TagProps> = ({
   customColor,
   accessibilityLabel,
 }) => {
-  useScreenRegistry('Tag');
   const context = useContext<any>(MiniAppContext);
   const scaledHeight24 = useScaleSize(24);
   const scaledHeight18 = useScaleSize(18);

package/Text/index.tsx

@@ -9,7 +9,6 @@ import {
 } from '../Context';
 import { scaleSize, useScaleSize } from './utils';
 import { Skeleton } from '../Skeleton';
-import { useScreenRegistry } from '@momo-kits/foundation';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -159,7 +158,6 @@ const Text: React.FC<TextProps> = ({
   maxScaleRate,
   ...rest
 }) => {
-  useScreenRegistry('Text');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const skeleton = useContext(SkeletonContext);

package/ViewBoundary/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+
+export interface ViewBoundaryProps {
+  children: React.ReactNode;
+  /** Custom fallback UI when error occurs. Defaults to hiding the crashed view. */
+  fallback?: React.ReactNode;
+  /** Style for the fallback container */
+  fallbackStyle?: StyleProp<ViewStyle>;
+  /** Called when an error is caught. Use for logging/reporting. */
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+interface ViewBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ViewBoundary extends React.Component<ViewBoundaryProps, ViewBoundaryState> {
+  constructor(props: ViewBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ViewBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.props.onError?.(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback !== undefined) {
+        return this.props.fallback;
+      }
+      return null;
+    }
+    return this.props.children;
+  }
+}
+
+export default ViewBoundary;
+export { ViewBoundary };

package/index.ts

@@ -47,4 +47,5 @@ export * from './Badge';
 export * from './Badge/types';
 export * from './FoundationList';
 export * from './FoundationList/types';
+export * from './ViewBoundary';
 export { TouchableOpacity };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.156.2-adoption.1",
+    "version": "0.157.1-beta.2-viewboundary-test",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/internal.ts

@@ -1,2 +0,0 @@
-export * from './Context/ScreenRegistryContext';
-export { useScreenRegistry } from './Layout/utils';