react-native-i18n-localize

A pure javascript language control for your React Native app localization.

Installation

Using npm

$ npm install --save react-native-i18n-localize

Using yarn

$ yarn add react-native-i18n-localize

Example

1. Create your translation file in project

en.json

{
  "Language 1": "Language 1",
  "Switch": "เปลี่ยนเป็นภาษาไทย"
}

th.json

{
  "Language 1": "ภาษาที่ 1",
  "Switch": "Switch to English"
}

2. Inject translation file to App.js

import React, {Component} from 'react'
import { StyleSheet, View} from 'react-native'
import { I18nLocalize } from 'react-native-i18n-localize'

import en from './src/translations/en.json'
import th from './src/translations/th.json'

import MainScreen from './src'

I18nLocalize.initialLanguage({ en, th })

export default class App extends Component {
  componentDidMount() {
    
    // I18nLocalize.setLanguage('th')
  }
  render() {
    return (
      <View style={styles.container}>
        <MainScreen />
      </View>
    )
  }
}

...

3. Wrapping your component for forcing update after change language

export default withLanguage(Example)

4. Switching language with this method

import React, { Component } from 'react'
import { View, StyleSheet, Text, Button } from 'react-native'
import { I18nLocalize, i18n, withLanguage } from 'react-native-i18n-localize'

class Example extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>{ i18n.t('Language 1') }</Text>
        <Button onPress={this.trigger} title={i18n.t('Switch')} />
      </View>
    )
  }

  trigger = () => {
    if(I18nLocalize.getLocale() === 'th') {
      I18nLocalize.setLanguage('en')
    }
    else {
      I18nLocalize.setLanguage('th')
    }
  }
}

Note

withLanguage work with React Component only If you want to manual catch event use

componentDidMount() {
    I18nLocalize.on('changeLanguage', this.updateData)
}

componentWillUnmount() {
  I18nLocalize.off('changeLanguage', this.updateData)
}

Browse the files in the /example directory.