react-native-i18n-localize

1.0.4 • Public • Published

react-native-i18n-localize

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

npm version MIT

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.

Package Sidebar

Install

npm i react-native-i18n-localize

Weekly Downloads

16

Version

1.0.4

License

MIT

Unpacked Size

6.54 kB

Total Files

5

Last publish

Collaborators

  • smithkre