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.
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).