0

I am targeting both Android and iOS, and both Arabic and English language and i am new to React native development and unfortunately i faced a strange behavior when i try to convert system language from Arabic to English on Android (as the first app release will be on Arabic only) and also when user try to register with his name written in English or try to add post in English the data is viewed in the opposite side make the component seems weird.

Login page when system language is Arabic: enter image description here

Login page when i try to convert system language to English: enter image description here

News Feed page when system language is Arabic: enter image description here

News Feed page when i try to convert system language to English: enter image description here

I have a feel that my start with jsx coding was incorrect as i start coding and testing and emulator language was in Arabic and when i tried to test on iOS i found the same result as what i have found when convert language to Arabic on Android (as shown above...) so if any one can help me figure out where is my mistake and how to handle Arabic and English with out loosing my layout.

IndexOutOfDevelopersException
  • 1,364
  • 7
  • 15
  • 28
Ahmed Saeed
  • 635
  • 10
  • 27
  • See this:https://blog.callstack.io/react-native-handling-language-changes-on-android-the-right-way-c883056a8f5c – I_Al-thamary Dec 10 '18 at 14:58
  • Also this :https://facebook.github.io/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps – I_Al-thamary Dec 10 '18 at 14:59
  • Did you try to set textAlign style? also, if you want to disable this behaviour when changing system language, check [this](https://stackoverflow.com/questions/39815309/rtl-is-forced-in-rtl-devices) answer. – Dror Bar Dec 10 '18 at 15:49
  • @i_th thanks for reply ... i read this article https://blog.callstack.io/react-native-handling-language-changes-on-android-the-right-way-c883056a8f5c and react native blog but sorry for saying that for now i can't figure out how to handle both English and Arabic in the same layout when system language is English and when converted to Arabic and how to handle any strange behavior that i might face between both RTL and LTR and how to handle iOS as it seems different. – Ahmed Saeed Dec 11 '18 at 16:25
  • @AhmedSaeed this how to deal with RTL and LTR :https://facebook.github.io/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps – I_Al-thamary Dec 11 '18 at 16:27
  • @Dror Bar thanks for reply ... how might textAlign help me in my situation? i already tested it but text is viewed in other direction when changing the system language and regarding the link you provided how it might affect RTL and LTR as i have to use both Arabic and English language in my app. – Ahmed Saeed Dec 11 '18 at 16:28
  • @i_th but what i get when i read about RTL and LTR is that react native already support that and i don't have to add any thing is that right and what about iOS?!. – Ahmed Saeed Dec 11 '18 at 16:39
  • @AhmedSaeed Read the article. It is for both `[[RCTI18nUtil sharedInstance] allowRTL:YES];` – I_Al-thamary Dec 11 '18 at 16:42

0 Answers0