Merge branch 'main' into fix-native-stack-titles-styles

react-navigation · Mar 10, 2024 · 5104ced · 5104ced
2 parents 3b895c4 + 3799b16
commit 5104ced
Show file tree

Hide file tree

Showing 21 changed files with 201 additions and 121 deletions.
diff --git a/example/src/Screens/BottomTabs.tsx b/example/src/Screens/BottomTabs.tsx
@@ -15,6 +15,7 @@ import {
   type NavigatorScreenParams,
   type PathConfigMap,
   useIsFocused,
+  useLocale,
 } from '@react-navigation/native';
 import { BlurView } from 'expo-blur';
 import * as React from 'react';
@@ -83,6 +84,7 @@ const animations = ['none', 'fade', 'shift'] as const;
 
 export function BottomTabs() {
   const { showActionSheetWithOptions } = useActionSheet();
+  const { direction } = useLocale();
 
   const dimensions = useWindowDimensions();
 
@@ -129,7 +131,11 @@ export function BottomTabs() {
               />
             </HeaderButton>
           ),
-          tabBarPosition: isLargeScreen ? 'left' : 'bottom',
+          tabBarPosition: isLargeScreen
+            ? direction === 'ltr'
+              ? 'left'
+              : 'right'
+            : 'bottom',
           tabBarLabelPosition:
             isLargeScreen && isCompact ? 'below-icon' : undefined,
           animation,
@@ -201,7 +207,7 @@ export function BottomTabs() {
                   intensity={100}
                   style={{
                     ...StyleSheet.absoluteFillObject,
-                    right: isLargeScreen
+                    end: isLargeScreen
                       ? // Offset for right border of the sidebar
                         -StyleSheet.hairlineWidth
                       : 0,
@@ -218,7 +224,7 @@ export function BottomTabs() {
           style={{
             position: 'absolute',
             bottom: 0,
-            left: 0,
+            start: 0,
             padding: 16,
           }}
         >

diff --git a/example/src/Screens/DrawerView.tsx b/example/src/Screens/DrawerView.tsx
@@ -131,8 +131,8 @@ const styles = StyleSheet.create({
   realDrawer: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 8,
+    start: 0,
+    end: 8,
     bottom: 0,
     backgroundColor: '#ebdec1',
     borderColor: '#3e3a3a',

diff --git a/example/src/Screens/TabView/CustomIndicator.tsx b/example/src/Screens/TabView/CustomIndicator.tsx
@@ -178,7 +178,7 @@ const styles = StyleSheet.create({
   },
   badge: {
     marginTop: 4,
-    marginRight: 32,
+    marginEnd: 32,
     backgroundColor: '#f44336',
     height: 24,
     width: 24,

diff --git a/example/src/Screens/TabView/CustomTabBar.tsx b/example/src/Screens/TabView/CustomTabBar.tsx
@@ -93,8 +93,8 @@ export const CustomTabBar = () => {
         styles.tabbar,
         {
           paddingBottom: insets.bottom,
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
+          paddingStart: insets.left,
+          paddingEnd: insets.right,
         },
       ]}
     >
@@ -147,8 +147,8 @@ const styles = StyleSheet.create({
   activeItem: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     bottom: 0,
   },
   active: {

diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -278,9 +278,9 @@ export function BottomTabBar({
     <Animated.View
       style={[
         tabBarPosition === 'left'
-          ? styles.left
+          ? styles.start
           : tabBarPosition === 'right'
-            ? styles.right
+            ? styles.end
             : styles.bottom,
         {
           backgroundColor:
@@ -316,8 +316,8 @@ export function BottomTabBar({
           : {
               paddingTop: insets.top,
               paddingBottom: insets.bottom,
-              paddingLeft: tabBarPosition === 'left' ? insets.left : 0,
-              paddingRight: tabBarPosition === 'right' ? insets.right : 0,
+              paddingStart: tabBarPosition === 'left' ? insets.left : 0,
+              paddingEnd: tabBarPosition === 'right' ? insets.right : 0,
               minWidth: hasHorizontalLabels
                 ? getDefaultSidebarWidth(dimensions)
                 : 0,
@@ -431,21 +431,21 @@ export function BottomTabBar({
 }
 
 const styles = StyleSheet.create({
-  left: {
+  start: {
     top: 0,
     bottom: 0,
-    left: 0,
-    borderRightWidth: StyleSheet.hairlineWidth,
+    start: 0,
+    borderEndWidth: StyleSheet.hairlineWidth,
   },
-  right: {
+  end: {
     top: 0,
     bottom: 0,
-    right: 0,
-    borderLeftWidth: StyleSheet.hairlineWidth,
+    end: 0,
+    borderStartWidth: StyleSheet.hairlineWidth,
   },
   bottom: {
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     bottom: 0,
     borderTopWidth: StyleSheet.hairlineWidth,
     elevation: 8,

diff --git a/packages/bottom-tabs/src/views/BottomTabItem.tsx b/packages/bottom-tabs/src/views/BottomTabItem.tsx
@@ -300,6 +300,6 @@ const styles = StyleSheet.create({
   },
   labelBeside: {
     fontSize: 13,
-    marginLeft: 20,
+    marginStart: 20,
   },
 });
diff --git a/packages/bottom-tabs/src/views/BottomTabView.tsx b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -185,9 +185,9 @@ export function BottomTabView(props: Props) {
     <SafeAreaProviderCompat
       style={
         tabBarPosition === 'left'
-          ? styles.left
+          ? styles.start
           : tabBarPosition === 'right'
-            ? styles.right
+            ? styles.end
             : null
       }
     >
@@ -306,10 +306,10 @@ export function BottomTabView(props: Props) {
 }
 
 const styles = StyleSheet.create({
-  left: {
+  start: {
     flexDirection: 'row-reverse',
   },
-  right: {
+  end: {
     flexDirection: 'row',
   },
   screens: {

diff --git a/packages/bottom-tabs/src/views/TabBarIcon.tsx b/packages/bottom-tabs/src/views/TabBarIcon.tsx
@@ -96,7 +96,7 @@ const styles = StyleSheet.create({
   },
   badge: {
     position: 'absolute',
-    right: -5,
+    end: -5,
     top: -5,
   },
 });
diff --git a/packages/drawer/src/views/DrawerItem.tsx b/packages/drawer/src/views/DrawerItem.tsx
@@ -146,7 +146,7 @@ export function DrawerItem(props: Props) {
       >
         <View style={[styles.wrapper, { borderRadius }]}>
           {iconNode}
-          <View style={[styles.label, { marginLeft: iconNode ? 16 : 0 }]}>
+          <View style={[styles.label, { marginStart: iconNode ? 16 : 0 }]}>
             {typeof label === 'string' ? (
               <Text
                 numberOfLines={1}
@@ -175,11 +175,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: 12,
-    paddingLeft: 16,
-    paddingRight: 24,
+    paddingStart: 16,
+    paddingEnd: 24,
   },
   label: {
-    marginRight: 12,
+    marginEnd: 12,
     marginVertical: 4,
     flex: 1,
   },

diff --git a/packages/drawer/src/views/DrawerView.tsx b/packages/drawer/src/views/DrawerView.tsx
@@ -291,12 +291,12 @@ function DrawerViewBase({
           drawerType === 'permanent' &&
             (drawerPosition === 'left'
               ? {
-                  borderRightColor: colors.border,
-                  borderRightWidth: StyleSheet.hairlineWidth,
+                  borderEndColor: colors.border,
+                  borderEndWidth: StyleSheet.hairlineWidth,
                 }
               : {
-                  borderLeftColor: colors.border,
-                  borderLeftWidth: StyleSheet.hairlineWidth,
+                  borderStartColor: colors.border,
+                  borderStartWidth: StyleSheet.hairlineWidth,
                 }),
           drawerStyle,
         ]}

diff --git a/packages/elements/src/Header/Header.tsx b/packages/elements/src/Header/Header.tsx
@@ -239,7 +239,7 @@ export function Header(props: Props) {
         <Animated.View
           pointerEvents="box-none"
           style={[
-            styles.left,
+            styles.start,
             headerTitleAlign === 'center' && styles.expand,
             { marginStart: insets.left },
             leftContainerStyle,
@@ -270,7 +270,7 @@ export function Header(props: Props) {
                       insets.right),
             },
             headerTitleAlign === 'left' && leftButton
-              ? { marginLeft: 4 }
+              ? { marginStart: 4 }
               : null,
             titleContainerStyle,
           ]}
@@ -285,7 +285,7 @@ export function Header(props: Props) {
         <Animated.View
           pointerEvents="box-none"
           style={[
-            styles.right,
+            styles.end,
             styles.expand,
             { marginEnd: insets.right },
             rightContainerStyle,
@@ -308,11 +308,11 @@ const styles = StyleSheet.create({
     marginHorizontal: 16,
     justifyContent: 'center',
   },
-  left: {
+  start: {
     justifyContent: 'center',
     alignItems: 'flex-start',
   },
-  right: {
+  end: {
     justifyContent: 'center',
     alignItems: 'flex-end',
   },

diff --git a/packages/elements/src/Header/HeaderBackButton.tsx b/packages/elements/src/Header/HeaderBackButton.tsx
@@ -203,8 +203,8 @@ const styles = StyleSheet.create({
     ios: {
       height: 21,
       width: 13,
-      marginLeft: 8,
-      marginRight: 22,
+      marginStart: 8,
+      marginEnd: 22,
       marginVertical: 12,
     },
     default: {
@@ -216,7 +216,7 @@ const styles = StyleSheet.create({
   iconWithLabel:
     Platform.OS === 'ios'
       ? {
-          marginRight: 6,
+          marginEnd: 6,
         }
       : {},
   iconMaskContainer: {
@@ -231,7 +231,7 @@ const styles = StyleSheet.create({
   iconMask: {
     height: 21,
     width: 13,
-    marginLeft: -14.5,
+    marginStart: -14.5,
     marginVertical: 12,
     alignSelf: 'center',
   },

diff --git a/packages/elements/src/SafeAreaProviderCompat.tsx b/packages/elements/src/SafeAreaProviderCompat.tsx
@@ -9,6 +9,8 @@ import {
 } from 'react-native';
 import {
   initialWindowMetrics,
+  type Metrics,
+  SafeAreaFrameContext,
   SafeAreaInsetsContext,
   SafeAreaProvider,
 } from 'react-native-safe-area-context';
@@ -41,13 +43,86 @@ export function SafeAreaProviderCompat({ children, style }: Props) {
     return <View style={[styles.container, style]}>{children}</View>;
   }
 
+  if (Platform.OS === 'web') {
+    children = (
+      <SafeAreaFrameProvider initialMetrics={initialMetrics}>
+        {children}
+      </SafeAreaFrameProvider>
+    );
+  }
+
   return (
     <SafeAreaProvider initialMetrics={initialMetrics} style={style}>
       {children}
     </SafeAreaProvider>
   );
 }
 
+// FIXME: On the Web, the safe area frame value doesn't update on resize
+// So we workaround this by measuring the frame on resize
+const SafeAreaFrameProvider = ({
+  initialMetrics,
+  children,
+}: {
+  initialMetrics: Metrics;
+  children: React.ReactNode;
+}) => {
+  const element = React.useRef<HTMLDivElement>(null);
+  const [frame, setFrame] = React.useState(initialMetrics.frame);
+
+  React.useEffect(() => {
+    if (element.current == null) {
+      return;
+    }
+
+    const rect = element.current.getBoundingClientRect();
+
+    setFrame({
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+    });
+
+    let timeout: NodeJS.Timeout;
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+
+      if (entry) {
+        const { x, y, width, height } = entry.contentRect;
+
+        // Debounce the frame updates to avoid too many updates in a short time
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          setFrame({ x, y, width, height });
+        }, 100);
+      }
+    });
+
+    observer.observe(element.current);
+
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return (
+    <SafeAreaFrameContext.Provider value={frame}>
+      <div
+        ref={element}
+        style={{
+          ...StyleSheet.absoluteFillObject,
+          pointerEvents: 'none',
+          visibility: 'hidden',
+        }}
+      />
+      {children}
+    </SafeAreaFrameContext.Provider>
+  );
+};
+
 SafeAreaProviderCompat.initialMetrics = initialMetrics;
 
 const styles = StyleSheet.create({