Tutorials

Article Content:react native i18n full Working Example

react native i18n full Working Example

Applying multi language in react native is not easy task, although the community has many libraries but there's no standard way how to apply one of them practically on your app, how to integrate I with their libraries like react navigation or redux, also there is an ok another problem you will face which is how to tell the library to detect your local device language first ,and how to give the user the ability to save the selected language to start the app with ,the bad news that all tutorials on the internet not answering these questions in one place in separated tutorials with various libraries, the Good news that I but my efforts to do such tutorial to make your life easier with react native, not only that but I intended to use best practices and latest react features as following :

1- To not hold your app language into the app state like Redux or Mobx, that's a bad practice

2-To use the context API and hoc provider to pass language to entire app and navigation

3- Consequently، we are not going to use react-native-restart to apply the language to the entire application, but it will affect immediately.

I18next library

After making a survey about the available I18n libraries I found that I18next library is the best to fit my needs for Many reasons, the simplicity, scalability, and the ability to use hoc provider, in addition to detect language direction which will be very helpful to handle RTL LTR styles in languages like Arabic and English.

As example when you switch to Arabic -English and use i18next.dir(); it will automatically return the current direction for current language  (RTL or LTR).

1- How to Integrate Multi language with react native ?

2- How to Detect Device Local language and Start Your App With ?

3- How to Select and Persist specific Language in Device Storge ?

4- How to Apply Language to the entire App without using State like redux or Mobx  without restarting your app ?

5- How to Detect the Direction for current language To Support RTL LTR ?

 



Leave a Reply

Your email address will not be published.


Notify me of followup comments via e-mail.
You can also Subscribe without commenting.