Changing Locale in React-Native (Android)

Maxim Toyberman
1 min readApr 4, 2017

--

I have developed an application that is written in React-Native,But when i added localization support i have noticed that when i change the language and come back to the application ,the language didn’t change until i kill the app and start it again (this is not a default behaviour in Android).

Here i will explain how to fix this Issue:

  1. Open your AndroidManifest.xml
  2. Find this line : android:configChanges=”keyboard|keyboardHidden|orientation|screenSize”
  3. Replace it with this to be able to detect locale changes android:configChanges=”keyboard|keyboardHidden|orientation|screenSize|layoutDirection|locale”

4. Run npm install — save react-native-restart@0.0.1 (this will help you reload. all resources and restart the app like CodePush does).

5. Run npm install — save react-native-locale-listener , this is a library i have written to detect if the locale was changed.

6. Go to your root container and add this imports at the top of the file :

import RNReactNativeLocale from ‘react-native-locale-listener’
import RNRestart from ‘react-native-restart

7. Create a function changeLayout :

changeLayout (language) {
RNRestart.Restart()
}

8.In componentDidMount register listener :

componentDidMount () {
RNReactNativeLocale.addLocaleListener(this.changeLayout)
}

9. in componentWillUnmount unregister listener to avoid leak:

componentWillUnmount () {
RNReactNativeLocale.removeLocaleListener(this.changeLayout)
}

Thank you for reading.

--

--