Merge pull request #7594 from ahmdshrif/fix/rtl-mode

Fix: App changes positions of Ui elements when phone language RTL

android/app/src/main/AndroidManifest.xml

@@ -17,6 +17,7 @@
     </queries>
 
     <application
+      android:supportsRtl="false" 
       android:name=".MainApplication"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"

src/components/RNTextInput.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import _ from 'underscore';
+// eslint-disable-next-line no-restricted-imports
+import {TextInput} from 'react-native';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** A ref to forward to the text input */
+    forwardedRef: PropTypes.func,
+};
+
+const defaultProps = {
+    forwardedRef: () => {},
+};
+
+const RNTextInput = props => (
+    <TextInput
+        ref={(ref) => {
+            if (!_.isFunction(props.forwardedRef)) {
+                return;
+            }
+            props.forwardedRef(ref);
+        }}
+
+        // By default, align input to the left to override right alignment in RTL mode which is not yet supported in the App.
+        // eslint-disable-next-line react/jsx-props-no-multi-spaces
+        textAlign="left"
+
+        // eslint-disable-next-line
+        {...props}
+    />
+);
+
+RNTextInput.propTypes = propTypes;
+RNTextInput.defaultProps = defaultProps;
+RNTextInput.displayName = 'RNTextInput';
+
+export default React.forwardRef((props, ref) => (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <RNTextInput {...props} forwardedRef={ref} />
+));

src/components/Text.js

@@ -15,8 +15,7 @@ const propTypes = {
     fontSize: PropTypes.number,
 
     /** The alignment of the text */
-    // eslint-disable-next-line react/forbid-prop-types
-    textAlign: PropTypes.any,
+    textAlign: PropTypes.string,
 
     /** Any children to display */
     children: PropTypes.node,
@@ -32,7 +31,7 @@ const defaultProps = {
     color: themeColors.text,
     fontSize: variables.fontSizeNormal,
     family: 'GTA',
-    textAlign: null,
+    textAlign: 'left',
     children: null,
     style: {},
 };

src/components/TextInput/BaseTextInput.js

@@ -2,10 +2,9 @@ import _ from 'underscore';
 import React, {Component} from 'react';
 import {
     Animated, View, TouchableWithoutFeedback, Pressable, AppState, Keyboard,
-    // eslint-disable-next-line no-restricted-imports
-    TextInput as RNTextInput,
 } from 'react-native';
 import Str from 'expensify-common/lib/str';
+import RNTextInput from '../RNTextInput';
 import TextInputLabel from './TextInputLabel';
 import * as baseTextInputPropTypes from './baseTextInputPropTypes';
 import themeColors from '../../styles/themes/default';

src/components/TextInputFocusable/index.android.js

@@ -1,8 +1,7 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {TextInput} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
+import RNTextInput from '../RNTextInput';
 import themeColors from '../../styles/themes/default';
 import CONST from '../../CONST';
 
@@ -64,7 +63,7 @@ class TextInputFocusable extends React.Component {
 
     render() {
         return (
-            <TextInput
+            <RNTextInput
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
                 maxHeight={CONST.COMPOSER_MAX_HEIGHT}

src/components/TextInputFocusable/index.ios.js

@@ -1,8 +1,7 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {TextInput} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
+import RNTextInput from '../RNTextInput';
 import themeColors from '../../styles/themes/default';
 import CONST from '../../CONST';
 
@@ -76,7 +75,7 @@ class TextInputFocusable extends React.Component {
         // Selection Property not worked in IOS properly, So removed from props.
         const propsToPass = _.omit(this.props, 'selection');
         return (
-            <TextInput
+            <RNTextInput
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
                 maxHeight={CONST.COMPOSER_MAX_HEIGHT}

src/components/TextInputFocusable/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {TextInput, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
+import RNTextInput from '../RNTextInput';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import Growl from '../../libs/Growl';
 import themeColors from '../../styles/themes/default';
@@ -348,7 +348,7 @@ class TextInputFocusable extends React.Component {
         propStyles.outline = 'none';
         const propsWithoutStyles = _.omit(this.props, 'style');
         return (
-            <TextInput
+            <RNTextInput
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
                 selection={this.state.selection}

src/components/TextInputWithPrefix/index.android.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
-// eslint-disable-next-line no-restricted-imports
-import {TextInput, View} from 'react-native';
+import {View} from 'react-native';
 import _ from 'underscore';
 import React from 'react';
+import RNTextInput from '../RNTextInput';
 import Text from '../Text';
 import styles from '../../styles/styles';
 import InlineErrorText from '../InlineErrorText';
@@ -35,7 +35,7 @@ const TextInputWithPrefix = props => (
             ]}
         >
             <Text style={[styles.textInputWithPrefix.prefix, {paddingTop: 10}]}>{props.prefixCharacter}</Text>
-            <TextInput
+            <RNTextInput
                 style={[
                     styles.textInputWithPrefix.textInput,
                     styles.noOutline,

src/components/TextInputWithPrefix/index.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
-// eslint-disable-next-line no-restricted-imports
-import {TextInput, View} from 'react-native';
+import {View} from 'react-native';
 import _ from 'underscore';
 import React from 'react';
+import RNTextInput from '../RNTextInput';
 import Text from '../Text';
 import styles from '../../styles/styles';
 import InlineErrorText from '../InlineErrorText';
@@ -34,7 +34,7 @@ const TextInputWithPrefix = props => (
             ]}
         >
             <Text style={styles.textInputWithPrefix.prefix}>{props.prefixCharacter}</Text>
-            <TextInput
+            <RNTextInput
                 style={[
                     styles.textInputWithPrefix.textInput,
                     styles.noOutline,

src/setup/index.js

@@ -1,3 +1,4 @@
+import {I18nManager} from 'react-native';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
@@ -35,6 +36,11 @@ export default function () {
         },
     });
 
+    // Force app layout to work left to right because our design does not currently support devices using this mode
+    I18nManager.allowRTL(false);
+    I18nManager.forceRTL(false);
+    I18nManager.swapLeftAndRightInRTL(false);
+
     // Perform any other platform-specific setup
     platformSetup();
 }

src/styles/styles.js

@@ -31,6 +31,7 @@ const picker = {
     borderStyle: 'solid',
     borderColor: themeColors.border,
     borderRadius: variables.componentBorderRadiusNormal,
+    textAlign: 'left',
 };
 
 const link = {
@@ -656,6 +657,7 @@ const styles = {
         color: themeColors.textSupporting,
         fontFamily: fontFamily.GTA,
         width: '100%',
+        textAlign: 'left',
     },
 
     textInputLabelBackground: {