@momo-kits/foundation 0.167.1-beta.2 → 0.167.1-beta.5

package/Application/BottomTab/BottomTabBar.tsx

@@ -58,13 +58,11 @@ export default function BottomTabBar({
   const { theme } = useContext(ApplicationContext);
   const { routes } = state;
   const widthDevice = useWindowDimensions()?.width;
-  const insets = useSafeAreaInsets();
   const useFloating = floatingButton && state.routes.length % 2 === 0;
-  const itemWidth =
-    (widthDevice - insets.left - insets.right) /
-    (state.routes.length + (useFloating ? 1 : 0));
+  const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
   // const buildLink = useLinkBuilder();
   const indicatorAnimated = useSharedValue(0);
+  const insets = useSafeAreaInsets();
 
   const indicatorStyle = useAnimatedStyle(() => ({
     width: itemWidth,
@@ -248,8 +246,7 @@ export default function BottomTabBar({
         },
         {
           paddingBottom: paddingBottom,
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
+          paddingHorizontal: Math.max(insets.left, insets.right),
         },
         style,
       ]}

package/Application/Components/HeaderExtendHeader.tsx

@@ -1,6 +1,6 @@
 import React, { Ref, useContext } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Dimensions, Platform, StyleSheet, View } from 'react-native';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -18,11 +18,12 @@ import {
   AnimatedCompatValue,
   useNormalizedSharedValue,
 } from '../utils';
-import { useHorizontalLayout } from '../../Layout/utils';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
 
+const { width: screenWidth } = Dimensions.get('window');
+
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
   animatedValue: AnimatedCompatValue;
@@ -51,8 +52,6 @@ const HeaderExtendHeader: React.FC<{
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
-  const layout = useHorizontalLayout(SCREEN_PADDING);
-  const { insets } = layout;
 
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {
@@ -80,7 +79,7 @@ const HeaderExtendHeader: React.FC<{
         translateX: interpolate(
           sharedValue.value,
           [0, 100],
-          [layout.marginLeft, leftPosition + insets.left],
+          [SCREEN_PADDING, leftPosition],
           Extrapolation.CLAMP,
         ),
       },
@@ -89,8 +88,8 @@ const HeaderExtendHeader: React.FC<{
       sharedValue.value,
       [0, 100],
       [
-        layout.width,
-        layout.width + SCREEN_PADDING - leftPosition - headerRightWidth,
+        screenWidth - SCREEN_PADDING * 2,
+        screenWidth - leftPosition - 12 - headerRightWidth,
       ],
       Extrapolation.CLAMP,
     ),

package/Application/Components/SearchHeader.tsx

@@ -1,13 +1,17 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import {
+  Dimensions,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import React, { useContext } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../utils';
-import { useHorizontalLayout } from '../../Layout/utils';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
@@ -23,7 +27,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const BACK_WIDTH = 28;
-    const { width: safeWidth } = useHorizontalLayout(0);
+    const { width: screenWidth } = Dimensions.get('window');
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
@@ -73,7 +77,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
           style={[
             Styles.flex,
             renderButtons && {
-              maxWidth: safeWidth - leftPosition - 12 - headerRightWidth,
+              maxWidth: screenWidth - leftPosition - 12 - headerRightWidth,
             },
           ]}
         >

package/Layout/Card.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { View, ViewProps } from 'react-native';
-import { useGridSystem, useHorizontalLayout } from './utils';
+import { Dimensions, View, ViewProps } from 'react-native';
+import { useGridSystem } from './utils';
 import { GridContextProps } from './types';
 import { GridContext, GridSystem } from './index';
 import { Image } from '../Image';
@@ -32,8 +32,7 @@ const Card: React.FC<CardProps> = ({
 
   const gutterSize = 8;
   const margin = 12;
-  const layout = useHorizontalLayout(margin);
-  const widthSection = layout.width;
+  const widthSection = Dimensions.get('window').width - margin * 2;
   let sizePerSpan =
     (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
       numberOfColumns -
@@ -77,8 +76,7 @@ const Card: React.FC<CardProps> = ({
           styles.card,
           {
             width: widthSection,
-            marginLeft: layout.marginLeft,
-            marginRight: layout.marginRight,
+            marginHorizontal: margin,
             gap: gutterSize,
           },
           !!backgroundImage && { backgroundColor: undefined },

package/Layout/FloatingButton.tsx

@@ -19,7 +19,6 @@ import {
   AnimatedCompatValue,
   useNormalizedSharedValue,
 } from '../Application/utils';
-import { useHorizontalLayout } from './utils';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -57,7 +56,6 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const lastOffset = useSharedValue(0);
   const lastDirection = useSharedValue<string | null>(null);
   const [showText, setShowText] = useState(true);
-  const { marginRight } = useHorizontalLayout(12);
 
   useEffect(() => {
     if (!label) return;
@@ -121,7 +119,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
         style={[
           styles.container,
           {
-            right: position === 'right' ? marginRight : undefined,
+            right: position === 'right' ? 12 : undefined,
             alignSelf: position === 'center' ? 'center' : 'flex-end',
             bottom,
           },
@@ -138,7 +136,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
       style={[
         styles.container,
         {
-          right: position === 'right' ? marginRight : undefined,
+          right: position === 'right' ? 12 : undefined,
           alignSelf: position === 'center' ? 'center' : 'flex-end',
           height: size === 'small' ? 36 : 48,
           backgroundColor: theme.colors.primary,

package/Layout/Section.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { useWindowDimensions, View, ViewProps } from 'react-native';
-import { useGridSystem, useHorizontalLayout } from './utils';
+import { Dimensions, View, ViewProps } from 'react-native';
+import { useGridSystem } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import { ApplicationContext, MiniAppContext } from '../Context';
@@ -38,9 +38,14 @@ const Section: React.FC<SectionProps> = ({
   const { numberOfColumns } = useGridSystem();
 
   const gutterSize = 12;
-  const layout = useHorizontalLayout(12);
-  const { width: windowWidth } = useWindowDimensions();
-  const widthSection = useMargin ? layout.width : windowWidth;
+  let margin = 0;
+  if (useMargin) {
+    margin = 12;
+  }
+  let widthSection = Dimensions.get('window').width;
+  if (useMargin) {
+    widthSection = widthSection - margin * 2;
+  }
 
   const sizePerSpan =
     (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
@@ -72,8 +77,7 @@ const Section: React.FC<SectionProps> = ({
           styles.protectedStyle,
           {
             width: widthSection,
-            marginLeft: useMargin ? layout.marginLeft : 0,
-            marginRight: useMargin ? layout.marginRight : 0,
+            marginHorizontal: margin,
             flexDirection: 'row',
             flexWrap: 'wrap',
             gap: gutterSize,

package/Layout/utils.ts

@@ -1,6 +1,5 @@
 import React, { Fragment, ReactElement } from 'react';
 import { useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 /**
  * validate children type
@@ -45,18 +44,4 @@ const useGridSystem = () => {
   return { numberOfColumns };
 };
 
-// Side insets are 0 on portrait iPhones; iPhone Duo and landscape report them
-const useHorizontalLayout = (margin: number) => {
-  const { width } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
-  const marginLeft = margin + insets.left;
-  const marginRight = margin + insets.right;
-  return {
-    marginLeft,
-    marginRight,
-    width: width - marginLeft - marginRight,
-    insets,
-  };
-};
-
-export { useGridSystem, useHorizontalLayout, validateChildren };
+export { useGridSystem, validateChildren };

package/package.json

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