feat: add direction to theme configs and remove I18nManager direct use in components

src/components/Appbar/AppbarBackIcon.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { I18nManager, Image, Platform, StyleSheet, View } from 'react-native';
+import { Image, Platform, StyleSheet, View } from 'react-native';
 
+import { useTheme } from '../../core/theming';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 
 const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
+  const theme = useTheme();
   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: theme.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={theme.direction}
     />
   );
 };

src/components/DataTable/DataTablePagination.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   ColorValue,
-  I18nManager,
   StyleProp,
   StyleSheet,
   View,
@@ -119,7 +118,7 @@ const PaginationControls = ({
               name="page-first"
               color={color}
               size={size}
-              direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+              direction={theme.direction}
             />
           )}
           iconColor={textColor}
@@ -136,7 +135,7 @@ const PaginationControls = ({
             name="chevron-left"
             color={color}
             size={size}
-            direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+            direction={theme.direction}
           />
         )}
         iconColor={textColor}
@@ -152,7 +151,7 @@ const PaginationControls = ({
             name="chevron-right"
             color={color}
             size={size}
-            direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+            direction={theme.direction}
           />
         )}
         iconColor={textColor}
@@ -169,7 +168,7 @@ const PaginationControls = ({
               name="page-last"
               color={color}
               size={size}
-              direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+              direction={theme.direction}
             />
           )}
           iconColor={textColor}

src/components/DataTable/DataTableTitle.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   Animated,
   GestureResponderEvent,
-  I18nManager,
   PixelRatio,
   Pressable,
   StyleProp,
@@ -120,7 +119,7 @@ const DataTableTitle = ({
         name="arrow-up"
         size={16}
         color={textColor}
-        direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+        direction={theme.direction}
       />
     </Animated.View>
   ) : null;
@@ -142,7 +141,7 @@ const DataTableTitle = ({
           // if numberOfLines causes wrap, center is lost. Align directly, sensitive to numeric and RTL
           numberOfLines > 1
             ? numeric
-              ? I18nManager.getConstants().isRTL
+              ? theme.direction === 'rtl'
                 ? styles.leftText
                 : styles.rightText
               : styles.centerText

src/components/FAB/AnimatedFAB.tsx

@@ -10,7 +10,6 @@ import {
   Animated,
   Easing,
   GestureResponderEvent,
-  I18nManager,
   Platform,
   ScrollView,
   StyleProp,
@@ -146,7 +145,6 @@ const SCALE = 0.9;
  *   ScrollView,
  *   Text,
  *   SafeAreaView,
- *   I18nManager,
  * } from 'react-native';
  * import { AnimatedFAB } from 'react-native-paper';
  *
@@ -238,7 +236,7 @@ const AnimatedFAB = ({
   const isWeb = Platform.OS === 'web';
   const isAnimatedFromRight = animateFrom === 'right';
   const isIconStatic = iconMode === 'static';
-  const { isRTL } = I18nManager;
+  const isRTL = theme.direction === 'rtl';
   const labelRef = React.useRef<Text & HTMLElement>(null);
   const { current: visibility } = React.useRef<Animated.Value>(
     new Animated.Value(visible ? 1 : 0)
@@ -362,6 +360,7 @@ const AnimatedFAB = ({
     isIconStatic,
     distance,
     animFAB,
+    isRTL: theme.direction === 'rtl',
   });
 
   const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;

src/components/FAB/utils.ts

@@ -1,11 +1,5 @@
 import { MutableRefObject } from 'react';
-import {
-  Animated,
-  ColorValue,
-  I18nManager,
-  Platform,
-  ViewStyle,
-} from 'react-native';
+import { Animated, ColorValue, Platform, ViewStyle } from 'react-native';
 
 import color from 'color';
 
@@ -18,6 +12,7 @@ type GetCombinedStylesProps = {
   isIconStatic: boolean;
   distance: number;
   animFAB: Animated.Value;
+  isRTL: boolean;
 };
 
 type CombinedStyles = {
@@ -39,9 +34,8 @@ export const getCombinedStyles = ({
   isIconStatic,
   distance,
   animFAB,
+  isRTL,
 }: GetCombinedStylesProps): CombinedStyles => {
-  const { isRTL } = I18nManager;
-
   const defaultPositionStyles = { left: -distance, right: undefined };
 
   const combinedStyles: CombinedStyles = {

src/components/Icon.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-  I18nManager,
-  Image,
-  ImageSourcePropType,
-  Platform,
-} from 'react-native';
+import { Image, ImageSourcePropType, Platform } from 'react-native';
 
 import { accessibilityProps } from './MaterialCommunityIcon';
 import { Consumer as SettingsConsumer } from '../core/settings';
@@ -112,9 +107,7 @@ const Icon = ({
   const direction =
     typeof source === 'object' && source.direction && source.source
       ? source.direction === 'auto'
-        ? I18nManager.getConstants().isRTL
-          ? 'rtl'
-          : 'ltr'
+        ? theme.direction
         : source.direction
       : null;
 

src/components/List/ListAccordion.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   ColorValue,
   GestureResponderEvent,
-  I18nManager,
   NativeSyntheticEvent,
   StyleProp,
   StyleSheet,
@@ -331,7 +330,7 @@ const ListAccordion = ({
                   name={isExpanded ? 'chevron-up' : 'chevron-down'}
                   color={theme.isV3 ? descriptionColor : titleColor}
                   size={24}
-                  direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+                  direction={theme.direction}
                 />
               )}
             </View>

src/components/Menu/Menu.tsx

@@ -4,7 +4,6 @@ import {
   Dimensions,
   Easing,
   EmitterSubscription,
-  I18nManager,
   Keyboard,
   KeyboardEvent as RNKeyboardEvent,
   LayoutRectangle,
@@ -620,7 +619,7 @@ const Menu = ({
     top: isCoordinate(anchor)
       ? topTransformation
       : topTransformation + additionalVerticalValue,
-    ...(I18nManager.getConstants().isRTL
+    ...(theme.direction === 'rtl'
       ? { right: leftTransformation }
       : { left: leftTransformation }),
   };

src/components/ProgressBar.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   Animated,
-  I18nManager,
   LayoutChangeEvent,
   Platform,
   StyleProp,
@@ -55,7 +54,6 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
 
 const INDETERMINATE_DURATION = 2000;
 const INDETERMINATE_MAX_WIDTH = 0.6;
-const { isRTL } = I18nManager;
 
 /**
  * Progress bar is an indicator used to present progress of some activity in the app.
@@ -99,6 +97,7 @@ const ProgressBar = ({
     React.useRef<Animated.CompositeAnimation | null>(null);
 
   const { scale } = theme.animation;
+  const isRTL = theme.direction === 'rtl';
 
   React.useEffect(() => {
     passedAnimatedValue.current = animatedValue;

src/components/Searchbar.tsx

@@ -3,7 +3,6 @@ import {
   Animated,
   ColorValue,
   GestureResponderEvent,
-  I18nManager,
   Platform,
   StyleProp,
   StyleSheet,
@@ -290,7 +289,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
                 name="magnify"
                 color={color}
                 size={size}
-                direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+                direction={theme.direction}
               />
             ))
           }
@@ -302,6 +301,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
           style={[
             styles.input,
             {
+              textAlign: theme.direction === 'rtl' ? 'right' : 'left',
               color: textColor,
               ...font,
               ...Platform.select({ web: { outline: 'none' } }),
@@ -352,7 +352,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
                     name={isV3 ? 'close' : 'close-circle-outline'}
                     color={color}
                     size={size}
-                    direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+                    direction={theme.direction}
                   />
                 ))
               }
@@ -403,7 +403,6 @@ const styles = StyleSheet.create({
     fontSize: 18,
     paddingLeft: 8,
     alignSelf: 'stretch',
-    textAlign: I18nManager.getConstants().isRTL ? 'right' : 'left',
     minWidth: 0,
   },
   barModeInput: {

src/components/Snackbar.tsx

@@ -3,7 +3,6 @@ import {
   Animated,
   ColorValue,
   Easing,
-  I18nManager,
   StyleProp,
   StyleSheet,
   View,
@@ -360,9 +359,7 @@ const Snackbar = ({
                         name="close"
                         color={color}
                         size={size}
-                        direction={
-                          I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
-                        }
+                        direction={theme.direction}
                       />
                     );
                   })

src/components/TextInput/TextInputFlat.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  I18nManager,
   Platform,
   StyleSheet,
   TextInput as NativeTextInput,
@@ -170,11 +169,9 @@ const TextInputFlat = ({
   const labelHalfHeight = labelHeight / 2;
 
   const baseLabelTranslateX =
-    (I18nManager.getConstants().isRTL ? 1 : -1) *
+    (theme.direction === 'rtl' ? 1 : -1) *
       (labelHalfWidth - (labelScale * labelWidth) / 2) +
-    (1 - labelScale) *
-      (I18nManager.getConstants().isRTL ? -1 : 1) *
-      paddingLeft;
+    (1 - labelScale) * (theme.direction === 'rtl' ? -1 : 1) * paddingLeft;
 
   const minInputHeight = dense
     ? (label ? MIN_DENSE_HEIGHT_WL : MIN_DENSE_HEIGHT) - LABEL_PADDING_TOP_DENSE
@@ -279,12 +276,12 @@ const TextInputFlat = ({
     wiggleOffsetX: LABEL_WIGGLE_X_OFFSET,
     topPosition,
     paddingLeft: isAndroid
-      ? I18nManager.isRTL
+      ? theme.direction === 'rtl'
         ? paddingRight
         : paddingLeft
       : paddingLeft,
     paddingRight: isAndroid
-      ? I18nManager.isRTL
+      ? theme.direction === 'rtl'
         ? paddingLeft
         : paddingRight
       : paddingRight,
@@ -420,7 +417,7 @@ const TextInputFlat = ({
               textAlignVertical: multiline ? 'top' : 'center',
               textAlign: textAlign
                 ? textAlign
-                : I18nManager.getConstants().isRTL
+                : theme.direction === 'rtl'
                 ? 'right'
                 : 'left',
               minWidth: Math.min(

src/components/TextInput/TextInputOutlined.tsx

@@ -4,7 +4,6 @@ import {
   View,
   TextInput as NativeTextInput,
   StyleSheet,
-  I18nManager,
   Platform,
   TextStyle,
   ColorValue,
@@ -131,7 +130,7 @@ const TextInputOutlined = ({
   const labelHalfHeight = labelHeight / 2;
 
   const baseLabelTranslateX =
-    (I18nManager.getConstants().isRTL ? 1 : -1) *
+    (theme.direction === 'rtl' ? 1 : -1) *
     (labelHalfWidth -
       (labelScale * labelWidth) / 2 -
       (fontSize - MINIMIZED_LABEL_FONT_SIZE) * labelScale);
@@ -148,7 +147,7 @@ const TextInputOutlined = ({
 
   if (isAdornmentLeftIcon) {
     labelTranslationXOffset =
-      (I18nManager.getConstants().isRTL ? -1 : 1) *
+      (theme.direction === 'rtl' ? -1 : 1) *
       (ADORNMENT_SIZE + ADORNMENT_OFFSET - (isV3 ? 0 : 8));
   }
 
@@ -406,7 +405,7 @@ const TextInputOutlined = ({
               textAlignVertical: multiline ? 'top' : 'center',
               textAlign: textAlign
                 ? textAlign
-                : I18nManager.getConstants().isRTL
+                : theme.direction === 'rtl'
                 ? 'right'
                 : 'left',
               paddingHorizontal: INPUT_PADDING_HORIZONTAL,