TextInpout autocorrect show opposite in ios [react native] - ios

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"
},

Answer 1

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!