feat: add direction prop to TabView (#11322)

**Motivation** Goal of this PR is to add direction prop to unify usage of RTL layouts across packages. **Test plan** Turn ON / OFF RTL in example app.
react-navigation · Sep 4, 2023 · 46735a3 · 46735a3
1 parent 8309636
commit 46735a3
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 25 deletions.
diff --git a/example/src/Screens/TabView/AutoWidthTabBar.tsx b/example/src/Screens/TabView/AutoWidthTabBar.tsx
@@ -1,3 +1,4 @@
+import { useLocale } from '@react-navigation/native';
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import {
@@ -28,6 +29,7 @@ const renderScene = SceneMap({
 });
 
 export const AutoWidthTabBar = () => {
+  const { direction } = useLocale();
   const [index, onIndexChange] = React.useState(1);
   const [routes] = React.useState([
     { key: 'article', title: 'Article' },
@@ -50,6 +52,7 @@ export const AutoWidthTabBar = () => {
       labelStyle={styles.label}
       tabStyle={styles.tabStyle}
       gap={20}
+      direction={direction}
     />
   );
 
@@ -59,6 +62,7 @@ export const AutoWidthTabBar = () => {
         index,
         routes,
       }}
+      direction={direction}
       renderScene={renderScene}
       renderTabBar={renderTabBar}
       onIndexChange={onIndexChange}

diff --git a/example/src/Screens/TabView/Coverflow.tsx b/example/src/Screens/TabView/Coverflow.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-commonjs */
-
+import { useLocale } from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
@@ -88,6 +88,8 @@ const Scene = ({ route, position, layout, index, length }: Props) => {
 };
 
 export function Coverflow() {
+  const { direction } = useLocale();
+
   const [index, onIndexChange] = React.useState(2);
   const [routes] = React.useState(Object.keys(ALBUMS).map((key) => ({ key })));
 
@@ -100,6 +102,7 @@ export function Coverflow() {
         index,
         routes,
       }}
+      direction={direction}
       onIndexChange={onIndexChange}
       renderTabBar={() => null}
       renderScene={(props: SceneRendererProps & { route: Route }) => (

diff --git a/example/src/Screens/TabView/CustomIndicator.tsx b/example/src/Screens/TabView/CustomIndicator.tsx
@@ -1,8 +1,8 @@
 import { Ionicons } from '@expo/vector-icons';
+import { useLocale } from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
-  I18nManager,
   StyleProp,
   StyleSheet,
   Text,
@@ -36,6 +36,7 @@ const renderScene = SceneMap({
 });
 
 export const CustomIndicator = () => {
+  const { direction } = useLocale();
   const insets = useSafeAreaInsets();
   const [index, onIndexChange] = React.useState(0);
   const [routes] = React.useState<Route[]>([
@@ -85,7 +86,7 @@ export const CustomIndicator = () => {
       outputRange: inputRange.map((x) => {
         const i = Math.round(x);
         return (
-          (i * getTabWidth(i) + i * (gap ?? 0)) * (I18nManager.isRTL ? -1 : 1)
+          (i * getTabWidth(i) + i * (gap ?? 0)) * (direction === 'rtl' ? -1 : 1)
         );
       }),
     });
@@ -129,6 +130,7 @@ export const CustomIndicator = () => {
     <View style={[styles.tabbar, { paddingBottom: insets.bottom }]}>
       <TabBar
         {...props}
+        direction={direction}
         renderIcon={renderIcon}
         renderBadge={renderBadge}
         renderIndicator={renderIndicator}
@@ -145,6 +147,7 @@ export const CustomIndicator = () => {
         index,
         routes,
       }}
+      direction={direction}
       renderScene={renderScene}
       renderTabBar={renderTabBar}
       tabBarPosition="bottom"

diff --git a/example/src/Screens/TabView/CustomTabBar.tsx b/example/src/Screens/TabView/CustomTabBar.tsx
@@ -1,4 +1,5 @@
 import { Ionicons } from '@expo/vector-icons';
+import { useLocale } from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
@@ -36,6 +37,7 @@ const renderScene = SceneMap({
 });
 
 export const CustomTabBar = () => {
+  const { direction } = useLocale();
   const insets = useSafeAreaInsets();
   const [index, onIndexChange] = React.useState(0);
   const [routes] = React.useState<Route[]>([
@@ -121,6 +123,7 @@ export const CustomTabBar = () => {
         index,
         routes,
       }}
+      direction={direction}
       renderScene={renderScene}
       renderTabBar={renderTabBar}
       tabBarPosition="bottom"

diff --git a/example/src/Screens/TabView/ScrollableTabBar.tsx b/example/src/Screens/TabView/ScrollableTabBar.tsx
@@ -1,3 +1,4 @@
+import { useLocale } from '@react-navigation/native';
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import {
@@ -27,6 +28,7 @@ const renderScene = SceneMap({
 
 export const ScrollableTabBar = () => {
   const [index, onIndexChange] = React.useState(1);
+  const { direction } = useLocale();
   const [routes] = React.useState([
     { key: 'article', title: 'Article' },
     { key: 'contacts', title: 'Contacts' },
@@ -46,6 +48,7 @@ export const ScrollableTabBar = () => {
       tabStyle={styles.tab}
       labelStyle={styles.label}
       gap={20}
+      direction={direction}
     />
   );
 
@@ -56,6 +59,7 @@ export const ScrollableTabBar = () => {
         index,
         routes,
       }}
+      direction={direction}
       renderScene={renderScene}
       renderTabBar={renderTabBar}
       onIndexChange={onIndexChange}

diff --git a/example/src/Screens/TabView/TabBarIcon.tsx b/example/src/Screens/TabView/TabBarIcon.tsx
@@ -1,4 +1,5 @@
 import { Ionicons } from '@expo/vector-icons';
+import { useLocale } from '@react-navigation/native';
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import {
@@ -27,6 +28,7 @@ const renderScene = SceneMap({
 });
 
 export const TabBarIcon = () => {
+  const { direction } = useLocale();
   const [index, onIndexChange] = React.useState(0);
   const [routes] = React.useState<Route[]>([
     { key: 'chat', icon: 'md-chatbubbles' },
@@ -43,6 +45,7 @@ export const TabBarIcon = () => {
   ) => (
     <TabBar
       {...props}
+      direction={direction}
       indicatorStyle={styles.indicator}
       renderIcon={renderIcon}
       style={styles.tabbar}
@@ -58,6 +61,7 @@ export const TabBarIcon = () => {
         index,
         routes,
       }}
+      direction={direction}
       renderScene={renderScene}
       renderTabBar={renderTabBar}
       onIndexChange={onIndexChange}

diff --git a/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx b/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx
@@ -2,6 +2,7 @@ import {
   ParamListBase,
   Route,
   TabNavigationState,
+  useLocale,
   useTheme,
 } from '@react-navigation/native';
 import Color from 'color';
@@ -18,6 +19,7 @@ export function MaterialTopTabBar({
   ...rest
 }: MaterialTopTabBarProps) {
   const { colors, fonts } = useTheme();
+  const { direction } = useLocale();
 
   const focusedOptions = descriptors[state.routes[state.index].key].options;
 
@@ -30,6 +32,7 @@ export function MaterialTopTabBar({
     <TabBar
       {...rest}
       navigationState={state}
+      direction={direction}
       scrollEnabled={focusedOptions.tabBarScrollEnabled}
       bounces={focusedOptions.tabBarBounces}
       activeColor={activeColor}

diff --git a/packages/material-top-tabs/src/views/MaterialTopTabView.tsx b/packages/material-top-tabs/src/views/MaterialTopTabView.tsx
@@ -3,6 +3,7 @@ import {
   ParamListBase,
   Route,
   TabNavigationState,
+  useLocale,
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
@@ -31,6 +32,7 @@ export function MaterialTopTabView({
   ...rest
 }: Props) {
   const { colors } = useTheme();
+  const { direction } = useLocale();
 
   const renderTabBar = (props: SceneRendererProps) => {
     return tabBar({
@@ -70,6 +72,7 @@ export function MaterialTopTabView({
         { backgroundColor: colors.background },
         sceneContainerStyle,
       ]}
+      direction={direction}
     />
   );
 }
diff --git a/packages/react-native-tab-view/src/PanResponderAdapter.tsx b/packages/react-native-tab-view/src/PanResponderAdapter.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   Animated,
   GestureResponderEvent,
-  I18nManager,
   Keyboard,
   PanResponder,
   PanResponderGestureState,
@@ -60,6 +59,7 @@ export function PanResponderAdapter<T extends Route>({
   children,
   style,
   animationEnabled = false,
+  layoutDirection = 'ltr',
 }: Props<T>) {
   const { routes, index } = navigationState;
 
@@ -147,7 +147,8 @@ export function PanResponderAdapter<T extends Route>({
       return false;
     }
 
-    const diffX = I18nManager.isRTL ? -gestureState.dx : gestureState.dx;
+    const diffX =
+      layoutDirection === 'rtl' ? -gestureState.dx : gestureState.dx;
 
     return (
       isMovingHorizontally(event, gestureState) &&
@@ -172,7 +173,8 @@ export function PanResponderAdapter<T extends Route>({
     _: GestureResponderEvent,
     gestureState: PanResponderGestureState
   ) => {
-    const diffX = I18nManager.isRTL ? -gestureState.dx : gestureState.dx;
+    const diffX =
+      layoutDirection === 'rtl' ? -gestureState.dx : gestureState.dx;
 
     if (
       // swiping left
@@ -222,7 +224,7 @@ export function PanResponderAdapter<T extends Route>({
         Math.min(
           Math.max(
             0,
-            I18nManager.isRTL
+            layoutDirection === 'rtl'
               ? currentIndex + gestureState.dx / Math.abs(gestureState.dx)
               : currentIndex - gestureState.dx / Math.abs(gestureState.dx)
           ),
@@ -281,7 +283,7 @@ export function PanResponderAdapter<T extends Route>({
       outputRange: [-maxTranslate, 0],
       extrapolate: 'clamp',
     }),
-    I18nManager.isRTL ? -1 : 1
+    layoutDirection === 'rtl' ? -1 : 1
   );
 
   const position = React.useMemo(