TextInpout autocorrect show opposite in ios [react native]

Question

It's happened only in ios, i attached imag and you can see the behavior (autoCorrect for ios)

the TextInput style:

textInput: {
    flex: 1,
    alignSelf: 'center',
    fontSize: 16,
    lineHeight: 24,
    writingDirection: 'rtl',
    top: 8,
    textAlign: "right",
},

i tried all combination of rtl & ltr - right & left its text style, so i thinking is not a problam with the text style

i attach package.json file in the project:

"dependencies": {
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
    "@jumpn/react-native-jetifier": "^0.1.4",
    "@target-corp/react-native-svg-parser": "^1.0.6",
    "babel-preset-react-native": "^5.0.2",
    "bugsnag-react-native": "^2.21.1",
    "color": "^3.1.0",
    "faker": "^4.1.0",
    "hat": "^0.0.3",
    "lottie-ios": "2.5.3",
    "lottie-react-native": "2.6.1",
    "mobx": "3.4.0",
    "mobx-persist": "^0.4.1",
    "mobx-react": "^4.3.5",
    "moment": "^2.22.2",
    "moment-range": "^4.0.2",
    "pushwoosh-react-native-plugin": "^5.13.1",
    "react": "16.8.3",
    "react-native": "0.59.8",
    "react-native-check-box": "^2.1.7",
    "react-native-circle-checkbox": "^0.1.6",
    "react-native-collapsible": "^1.4.0",
    "react-native-config": "^0.11.7",
    "react-native-dash": "^0.0.9",
    "react-native-device-info": "^1.1.0",
    "react-native-email-link": "^1.6.2",
    "react-native-extended-stylesheet": "^0.11.2",
    "react-native-i18n": "^2.0.15",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-keyboard-aware-scrollview": "^2.0.0",
    "react-native-modal": "^11.3.1",
    "react-native-modal-datetime-picker": "^7.5.0",
    "react-native-modal-selector": "^1.0.3",
    "react-native-phone-call": "^1.0.9",
    "react-native-picker-select": "^6.2.0",
    "react-native-pose": "^0.9.1",
    "react-native-restart": "^0.0.10",
    "react-native-rtl-layout": "^0.0.1",
    "react-native-signalr": "^1.0.6",
    "react-native-splash-screen": "^3.2.0",
    "react-native-status-bar-height": "^2.3.1",
    "react-native-svg": "^9.4.0",
    "react-native-svg-uri": "^1.2.3",
    "react-native-unique-id": "^1.0.4",
    "react-native-vector-icons": "^6.1.0",
    "react-navigation": "^2.11.2",
    "rn-placeholder": "^2.0.0",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/runtime": "^7.4.5",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.54.1",
    "react-test-renderer": "16.8.3"
  },

Remove the `writingDirection` from the style here's a blog post from [facebook](https://facebook.github.io/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html) — fayeed, Oct 13 '19 at 10:51

score 0 · Answer 1 · answered Oct 13 '19 at 12:13

Possible Problem Cause

It could be that your device is using an RTL language (Arabic, etc.) and you explicit specified the textAlign and wirtingDirection.

Quick Solution

You don't have to specify textAlign and writingDirection on your textInput styling.

Localizing User Experience

If you want to localize the experience for your application to adapt RTL and LTR, follow along:

import { I18nManager } from 'react-native'   // ... import I18nManager along your other react native imports

change your textInput styling to reflect the following:

textInput: {
    top: 8,
    flex: 1,
    fontSize: 16,
    lineHeight: 24,
    alignSelf: 'center'
},

If you need to check the status of the phone either RTL or LTR you can check using the following:

    const isDeviceRTL = I18nManager.isRTL;
    if (isDeviceRTL) {
        // ... do something cause device is RTL
    } else {
        // ... do something else cause device is LTR
    }

Other way to use it in your styling is:

someTextStyle {
    textAlign: I18nManager.isRTL ? 'right' : 'ltr',
    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr'
}

Note: you will not need to use this last state actually because react detects text and if your device is RTL or LTR and adapts automatically, just wanted to show you a use case

Hope this Helps!

Thanks a lot but it's didn't work for me... i try all combinations of rtl-ltr & right-left in style, it's something else... — Idan, Oct 15 '19 at 15:41
You are most welcome. I see can you please post your `package.json` file also the part of code where you are using this TextInput for better assessment. Thanks! — Abdeen, Oct 15 '19 at 16:30

TextInpout autocorrect show opposite in ios [react native]

1 Answers1

Possible Problem Cause

Quick Solution

Localizing User Experience