@momo-kits/foundation 0.165.2-beta.3 → 0.167.1-beta.2

package/Application/BottomTab/BottomTabBar.tsx

@@ -58,11 +58,13 @@ 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 / (state.routes.length + (useFloating ? 1 : 0));
+  const itemWidth =
+    (widthDevice - insets.left - insets.right) /
+    (state.routes.length + (useFloating ? 1 : 0));
   // const buildLink = useLinkBuilder();
   const indicatorAnimated = useSharedValue(0);
-  const insets = useSafeAreaInsets();
 
   const indicatorStyle = useAnimatedStyle(() => ({
     width: itemWidth,
@@ -246,7 +248,8 @@ export default function BottomTabBar({
         },
         {
           paddingBottom: paddingBottom,
-          paddingHorizontal: Math.max(insets.left, insets.right),
+          paddingLeft: insets.left,
+          paddingRight: 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 { Dimensions, Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -18,12 +18,11 @@ 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;
@@ -52,6 +51,8 @@ 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') {
@@ -79,7 +80,7 @@ const HeaderExtendHeader: React.FC<{
         translateX: interpolate(
           sharedValue.value,
           [0, 100],
-          [SCREEN_PADDING, leftPosition],
+          [layout.marginLeft, leftPosition + insets.left],
           Extrapolation.CLAMP,
         ),
       },
@@ -88,8 +89,8 @@ const HeaderExtendHeader: React.FC<{
       sharedValue.value,
       [0, 100],
       [
-        screenWidth - SCREEN_PADDING * 2,
-        screenWidth - leftPosition - 12 - headerRightWidth,
+        layout.width,
+        layout.width + SCREEN_PADDING - leftPosition - headerRightWidth,
       ],
       Extrapolation.CLAMP,
     ),

package/Application/Components/SearchHeader.tsx

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

package/Layout/Card.tsx

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

package/Layout/FloatingButton.tsx

@@ -19,6 +19,7 @@ import {
   AnimatedCompatValue,
   useNormalizedSharedValue,
 } from '../Application/utils';
+import { useHorizontalLayout } from './utils';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -56,6 +57,7 @@ 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;
@@ -119,7 +121,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
         style={[
           styles.container,
           {
-            right: position === 'right' ? 12 : undefined,
+            right: position === 'right' ? marginRight : undefined,
             alignSelf: position === 'center' ? 'center' : 'flex-end',
             bottom,
           },
@@ -136,7 +138,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
       style={[
         styles.container,
         {
-          right: position === 'right' ? 12 : undefined,
+          right: position === 'right' ? marginRight : 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 { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem } from './utils';
+import { useWindowDimensions, View, ViewProps } from 'react-native';
+import { useGridSystem, useHorizontalLayout } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import { ApplicationContext, MiniAppContext } from '../Context';
@@ -38,14 +38,9 @@ const Section: React.FC<SectionProps> = ({
   const { numberOfColumns } = useGridSystem();
 
   const gutterSize = 12;
-  let margin = 0;
-  if (useMargin) {
-    margin = 12;
-  }
-  let widthSection = Dimensions.get('window').width;
-  if (useMargin) {
-    widthSection = widthSection - margin * 2;
-  }
+  const layout = useHorizontalLayout(12);
+  const { width: windowWidth } = useWindowDimensions();
+  const widthSection = useMargin ? layout.width : windowWidth;
 
   const sizePerSpan =
     (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
@@ -77,7 +72,8 @@ const Section: React.FC<SectionProps> = ({
           styles.protectedStyle,
           {
             width: widthSection,
-            marginHorizontal: margin,
+            marginLeft: useMargin ? layout.marginLeft : 0,
+            marginRight: useMargin ? layout.marginRight : 0,
             flexDirection: 'row',
             flexWrap: 'wrap',
             gap: gutterSize,

package/Layout/utils.ts

@@ -1,5 +1,6 @@
 import React, { Fragment, ReactElement } from 'react';
 import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 /**
  * validate children type
@@ -44,4 +45,18 @@ const useGridSystem = () => {
   return { numberOfColumns };
 };
 
-export { useGridSystem, validateChildren };
+// 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 };

package/package.json

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