fix: rtl not being detected correctly on web

Author: pac-guerreiro

example/src/index.tsx

@@ -215,7 +215,10 @@ export default function PaperExample() {
   };
 
   return (
-    <PaperProvider theme={customFontLoaded ? configuredFontTheme : theme}>
+    <PaperProvider
+      theme={customFontLoaded ? configuredFontTheme : theme}
+      direction={rtl ? 'rtl' : 'ltr'}
+    >
       <PreferencesContext.Provider value={preferences}>
         <React.Fragment>
           <NavigationContainer

src/components/Appbar/AppbarBackIcon.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { Platform, I18nManager, View, Image, StyleSheet } from 'react-native';
+import { Platform, View, Image, StyleSheet } from 'react-native';
 
+import { useLocaleDirection } from '../../core/Localization';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 
 const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
+  const direction = useLocaleDirection();
   const iosIconSize = size - 3;
 
   return Platform.OS === 'ios' ? (
@@ -13,7 +15,7 @@ const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
         {
           width: size,
           height: size,
-          transform: [{ scaleX: I18nManager.getConstants().isRTL ? -1 : 1 }],
+          transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
         },
       ]}
     >
@@ -31,7 +33,7 @@ const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
       name="arrow-left"
       color={color}
       size={size}
-      direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+      direction={direction}
     />
   );
 };

src/components/DataTable/DataTablePagination.tsx

@@ -1,15 +1,10 @@
 import * as React from 'react';
-import {
-  I18nManager,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import color from 'color';
 import type { ThemeProp } from 'src/types';
 
+import { useLocaleDirection } from '../../core/Localization';
 import { useInternalTheme } from '../../core/theming';
 import Button from '../Button/Button';
 import IconButton from '../IconButton/IconButton';
@@ -93,6 +88,7 @@ const PaginationControls = ({
   theme: themeOverrides,
 }: PaginationControlsProps) => {
   const theme = useInternalTheme(themeOverrides);
+  const direction = useLocaleDirection();
 
   const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
 
@@ -105,7 +101,7 @@ const PaginationControls = ({
               name="page-first"
               color={color}
               size={size}
-              direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+              direction={direction}
             />
           )}
           iconColor={textColor}
@@ -121,7 +117,7 @@ const PaginationControls = ({
             name="chevron-left"
             color={color}
             size={size}
-            direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+            direction={direction}
           />
         )}
         iconColor={textColor}
@@ -136,7 +132,7 @@ const PaginationControls = ({
             name="chevron-right"
             color={color}
             size={size}
-            direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+            direction={direction}
           />
         )}
         iconColor={textColor}
@@ -152,7 +148,7 @@ const PaginationControls = ({
               name="page-last"
               color={color}
               size={size}
-              direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+              direction={direction}
             />
           )}
           iconColor={textColor}

src/components/DataTable/DataTableTitle.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   Animated,
   GestureResponderEvent,
-  I18nManager,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -13,6 +12,7 @@ import {
 
 import color from 'color';
 
+import { useLocaleDirection } from '../../core/Localization';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
@@ -97,6 +97,7 @@ const DataTableTitle = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const direction = useLocaleDirection();
   const { current: spinAnim } = React.useRef<Animated.Value>(
     new Animated.Value(sortDirection === 'ascending' ? 0 : 1)
   );
@@ -124,7 +125,7 @@ const DataTableTitle = ({
         name="arrow-up"
         size={16}
         color={textColor}
-        direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+        direction={direction}
       />
     </Animated.View>
   ) : null;
@@ -142,7 +143,7 @@ const DataTableTitle = ({
             // if numberOfLines causes wrap, center is lost. Align directly, sensitive to numeric and RTL
             numberOfLines > 1
               ? numeric
-                ? I18nManager.getConstants().isRTL
+                ? direction === 'rtl'
                   ? styles.leftText
                   : styles.rightText
                 : styles.centerText

src/components/FAB/AnimatedFAB.tsx

@@ -8,7 +8,6 @@ import {
   Animated,
   Easing,
   GestureResponderEvent,
-  I18nManager,
   Platform,
   ScrollView,
   StyleProp,
@@ -20,6 +19,7 @@ import {
 
 import color from 'color';
 
+import { useLocaleDirection } from '../../core/Localization';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
 import type { IconSource } from '../Icon';
@@ -126,7 +126,6 @@ const SCALE = 0.9;
  *   ScrollView,
  *   Text,
  *   SafeAreaView,
- *   I18nManager,
  * } from 'react-native';
  * import { AnimatedFAB } from 'react-native-paper';
  *
@@ -209,11 +208,11 @@ const AnimatedFAB = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const direction = useLocaleDirection();
   const uppercase: boolean = uppercaseProp ?? !theme.isV3;
   const isIOS = Platform.OS === 'ios';
   const isAnimatedFromRight = animateFrom === 'right';
   const isIconStatic = iconMode === 'static';
-  const { isRTL } = I18nManager;
   const { current: visibility } = React.useRef<Animated.Value>(
     new Animated.Value(visible ? 1 : 0)
   );
@@ -302,6 +301,7 @@ const AnimatedFAB = ({
     isIconStatic,
     distance,
     animFAB,
+    direction,
   });
 
   const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
@@ -452,9 +452,10 @@ const AnimatedFAB = ({
           ellipsizeMode={'tail'}
           style={[
             {
-              [isAnimatedFromRight || isRTL ? 'right' : 'left']: isIconStatic
-                ? textWidth - SIZE + borderRadius / (isV3 ? 1 : 2)
-                : borderRadius,
+              [isAnimatedFromRight || direction === 'rtl' ? 'right' : 'left']:
+                isIconStatic
+                  ? textWidth - SIZE + borderRadius / (isV3 ? 1 : 2)
+                  : borderRadius,
             },
             {
               minWidth: textWidth,

src/components/FAB/utils.ts

@@ -1,7 +1,8 @@
-import { Animated, ColorValue, I18nManager, ViewStyle } from 'react-native';
+import type { Animated, ColorValue, ViewStyle } from 'react-native';
 
 import color from 'color';
 
+import type { Direction } from '../../core/Localization';
 import { black, white } from '../../styles/themes/v2/colors';
 import type { InternalTheme } from '../../types';
 import getContrastingColor from '../../utils/getContrastingColor';
@@ -11,6 +12,7 @@ type GetCombinedStylesProps = {
   isIconStatic: boolean;
   distance: number;
   animFAB: Animated.Value;
+  direction: Direction;
 };
 
 type CombinedStyles = {
@@ -32,9 +34,9 @@ export const getCombinedStyles = ({
   isIconStatic,
   distance,
   animFAB,
+  direction,
 }: GetCombinedStylesProps): CombinedStyles => {
-  const { isRTL } = I18nManager;
-
+  const isRTL = direction === 'rtl';
   const defaultPositionStyles = { left: -distance, right: undefined };
 
   const combinedStyles: CombinedStyles = {

src/components/Icon.tsx

@@ -1,11 +1,7 @@
 import * as React from 'react';
-import {
-  I18nManager,
-  Image,
-  ImageSourcePropType,
-  Platform,
-} from 'react-native';
+import { Image, ImageSourcePropType, Platform } from 'react-native';
 
+import { useLocaleDirection } from '../core/Localization';
 import { Consumer as SettingsConsumer } from '../core/settings';
 import { useInternalTheme } from '../core/theming';
 import type { ThemeProp } from '../types';
@@ -75,10 +71,11 @@ const Icon = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const localeDirection = useLocaleDirection();
   const direction =
     typeof source === 'object' && source.direction && source.source
       ? source.direction === 'auto'
-        ? I18nManager.getConstants().isRTL
+        ? localeDirection
           ? 'rtl'
           : 'ltr'
         : source.direction

src/components/List/ListAccordion.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   GestureResponderEvent,
-  I18nManager,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -10,6 +9,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import { useLocaleDirection } from '../../core/Localization';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
@@ -166,6 +166,7 @@ const ListAccordion = ({
   pointerEvents = 'none',
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const direction = useLocaleDirection();
   const [expanded, setExpanded] = React.useState<boolean>(
     expandedProp || false
   );
@@ -266,7 +267,7 @@ const ListAccordion = ({
                   name={isExpanded ? 'chevron-up' : 'chevron-down'}
                   color={theme.isV3 ? descriptionColor : titleColor}
                   size={24}
-                  direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+                  direction={direction}
                 />
               )}
             </View>

src/components/Menu/Menu.tsx

@@ -6,7 +6,6 @@ import {
   Easing,
   EmitterSubscription,
   findNodeHandle,
-  I18nManager,
   Keyboard,
   KeyboardEvent as RNKeyboardEvent,
   LayoutRectangle,
@@ -22,6 +21,7 @@ import {
 } from 'react-native';
 
 import { APPROX_STATUSBAR_HEIGHT } from '../../constants';
+import { Direction, withLocaleDirection } from '../../core/Localization';
 import { withInternalTheme } from '../../core/theming';
 import type { $Omit, InternalTheme } from '../../types';
 import { addEventListener } from '../../utils/addEventListener';
@@ -79,6 +79,10 @@ export type Props = {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * Indicates the text direction
+   */
+  direction: Direction;
 };
 
 type Layout = $Omit<$Omit<LayoutRectangle, 'x'>, 'y'>;
@@ -155,9 +159,6 @@ const WINDOW_LAYOUT = Dimensions.get('window');
  * wrapping is not necessary if you use Paper's `Modal` instead.
  */
 class Menu extends React.Component<Props, State> {
-  // @component ./MenuItem.tsx
-  static Item = MenuItem;
-
   static defaultProps = {
     statusBarHeight: APPROX_STATUSBAR_HEIGHT,
     overlayAccessibilityLabel: 'Close menu',
@@ -418,6 +419,7 @@ class Menu extends React.Component<Props, State> {
       overlayAccessibilityLabel,
       keyboardShouldPersistTaps,
       testID,
+      direction,
     } = this.props;
 
     const {
@@ -457,7 +459,14 @@ class Menu extends React.Component<Props, State> {
     ];
 
     // We need to translate menu while animating scale to imitate transform origin for scale animation
-    const positionTransforms = [];
+    const positionTransforms: (
+      | {
+          translateX: Animated.AnimatedInterpolation<string | number>;
+        }
+      | {
+          translateY: Animated.AnimatedInterpolation<string | number>;
+        }
+    )[] = [];
 
     // Check if menu fits horizontally and if not align it to right.
     if (left <= windowLayout.width - menuLayout.width - SCREEN_INDENT) {
@@ -598,10 +607,10 @@ class Menu extends React.Component<Props, State> {
       ...(scrollableMenuHeight ? { height: scrollableMenuHeight } : {}),
     };
 
-    const positionStyle = {
+    const positionStyle = (isRTL: boolean) => ({
       top: this.isCoordinate(anchor) ? top : top + additionalVerticalValue,
-      ...(I18nManager.getConstants().isRTL ? { right: left } : { left }),
-    };
+      ...(isRTL ? { right: left } : { left }),
+    });
 
     return (
       <View
@@ -626,7 +635,11 @@ class Menu extends React.Component<Props, State> {
               }}
               collapsable={false}
               accessibilityViewIsModal={visible}
-              style={[styles.wrapper, positionStyle, style]}
+              style={[
+                styles.wrapper,
+                positionStyle(direction === 'rtl'),
+                style,
+              ]}
               pointerEvents={visible ? 'box-none' : 'none'}
               onAccessibilityEscape={onDismiss}
             >
@@ -671,4 +684,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export default withInternalTheme(Menu);
+export default Object.assign(withInternalTheme(withLocaleDirection(Menu)), {
+  // @component ./MenuItem.tsx
+  Item: MenuItem,
+});