CODEWITHSUNDEEP
react-nativereact-native-iosi18next
KIRAN K J
KIRAN K J

Reputation: 732

Detect system language change in react native

I am using i18next for localization. I am able to change manually using i18next changelanguage method. But I need to manually change language while change the system language. So is there any package to detect language change in react native

Upvotes: 5

Views: 7429

Answers (1)

Sateesh Yemireddi
Sateesh Yemireddi

Reputation: 4409

Use react-native-device-info

npm install --save react-native-device-info

getDeviceLocale()

Gets the device locale. 

const deviceLocale = DeviceInfo.getDeviceLocale();

// iOS: "en"
// Android: "en-US"
// Windows: ?

Update:

We can AppState if the app is in the foreground or background, and notify you when the state changes.

If user moved the application to background state, the language has been changed and then open the app again.

While application coming to the foreground state we can check for the language with DeviceInfo.getDeviceLocale().

It's the good way to tell that the device's language has been changed or not.

Without moving to background, user will not change the language right?

state = {
    appState: AppState.currentState
  }

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = (nextAppState) => {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
      console.log('App has come to the foreground!')
    }
    this.setState({appState: nextAppState});
  }

Upvotes: 5

Related Questions