fix: adjust bottom tabs sidebar for rtl

react-navigation · Jun 26, 2024 · 480ab04 · 480ab04
1 parent 06209b9
commit 480ab04
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 16 deletions.
diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -10,6 +10,7 @@ import {
   type ParamListBase,
   type TabNavigationState,
   useLinkBuilder,
+  useLocale,
   useTheme,
 } from '@react-navigation/native';
 import Color from 'color';
@@ -143,6 +144,7 @@ export function BottomTabBar({
   style,
 }: Props) {
   const { colors } = useTheme();
+  const { direction } = useLocale();
   const { buildHref } = useLinkBuilder();
 
   const focusedRoute = state.routes[state.index];
@@ -274,6 +276,23 @@ export function BottomTabBar({
           : tabBarPosition === 'right'
             ? styles.end
             : styles.bottom,
+        (
+          Platform.OS === 'web'
+            ? tabBarPosition === 'right'
+            : (direction === 'rtl' && tabBarPosition === 'left') ||
+              (direction !== 'rtl' && tabBarPosition === 'right')
+        )
+          ? { borderLeftWidth: StyleSheet.hairlineWidth }
+          : (
+                Platform.OS === 'web'
+                  ? tabBarPosition === 'left'
+                  : (direction === 'rtl' && tabBarPosition === 'right') ||
+                    (direction !== 'rtl' && tabBarPosition === 'left')
+              )
+            ? { borderRightWidth: StyleSheet.hairlineWidth }
+            : tabBarPosition === 'top'
+              ? { borderBottomWidth: StyleSheet.hairlineWidth }
+              : { borderTopWidth: StyleSheet.hairlineWidth },
         {
           backgroundColor:
             tabBarBackgroundElement != null ? 'transparent' : colors.card,
@@ -428,19 +447,16 @@ const styles = StyleSheet.create({
     top: 0,
     bottom: 0,
     start: 0,
-    borderEndWidth: StyleSheet.hairlineWidth,
   },
   end: {
     top: 0,
     bottom: 0,
     end: 0,
-    borderStartWidth: StyleSheet.hairlineWidth,
   },
   bottom: {
     start: 0,
     end: 0,
     bottom: 0,
-    borderTopWidth: StyleSheet.hairlineWidth,
     elevation: 8,
   },
   bottomContent: {

diff --git a/packages/bottom-tabs/src/views/BottomTabView.tsx b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -9,6 +9,7 @@ import {
   type ParamListBase,
   StackActions,
   type TabNavigationState,
+  useLocale,
 } from '@react-navigation/native';
 import * as React from 'react';
 import { Animated, Platform, StyleSheet } from 'react-native';
@@ -81,6 +82,8 @@ export function BottomTabView(props: Props) {
 
   const focusedRouteKey = state.routes[state.index].key;
 
+  const { direction } = useLocale();
+
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
    */
@@ -213,13 +216,13 @@ export function BottomTabView(props: Props) {
 
   return (
     <SafeAreaProviderCompat
-      style={
-        tabBarPosition === 'left'
-          ? styles.start
-          : tabBarPosition === 'right'
-            ? styles.end
-            : null
-      }
+      style={{
+        flexDirection:
+          (tabBarPosition === 'left' && direction === 'ltr') ||
+          (tabBarPosition === 'right' && direction === 'rtl')
+            ? 'row-reverse'
+            : 'row',
+      }}
     >
       {tabBarPosition === 'top' ? (
         <BottomTabBarHeightCallbackContext.Provider value={setTabBarHeight}>
@@ -331,12 +334,6 @@ export function BottomTabView(props: Props) {
 }
 
 const styles = StyleSheet.create({
-  start: {
-    flexDirection: 'row-reverse',
-  },
-  end: {
-    flexDirection: 'row',
-  },
   screens: {
     flex: 1,
     overflow: 'hidden',