Integrates react-native-i18n based on I18n.js with redux

react-native-redux-i18n

Integrates react-native-i18n based on I18n.js with redux

Inspired by redux-react-native-i18n

Install :

You need to install react-native-i18n first... cf. instructions

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

Inside the box :

import I18n, { getLanguages, reducer, setLocale, Loc } from 'react-native-redux-i18n'

getLanguages()
// get the user preferred locales (cf. react-native-i18n)

setLocale(locale: string)
// dispatch an action
// { type: `SET_LOCALE`, payload: { locale } }

setTranslations(translations: json)
// dispatch an action
// { type: `SET_TRANSLATIONS`, payload: { translations } }

reducer
// keep your state up to date

Loc
// connected React Native component (Text) on I18n.locale
// <Loc locKey="greetings" whatever="..." />

Configure :

// app/i18n/index.js
  import I18n from 'react-native-redux-i18n'
  import translations from './translations'

  I18n.fallbacks = true
  I18n.translations = translations

  export default I18n

// app/i18n/translations/en.json
  {
    "greetings": "Hello {{name}}",
    "age": {
      "one": "1 year old.",
      "other": "{{count}} years old ... {{more}}",
      "zero": "... seriously ?"
    }
  }

// app/I18n/translations/index.js
  export default {
    en: require('./en.json'),
    // 'en-GB': require('./en-GB.json'),
    fr: require('./fr.json'),
    _version: '1.0' // (you should) use `_version` if you plan to `setTranslations`(update) in-app
  }

// app/store/index.js
import { createStore, combineReducers } from 'redux'
...

import { reducer as i18n } from 'react-native-redux-i18n'
...

export default createStore(combineReducers(i18n, ...))

// app/index.js
  import i18n from 'app/i18n'
  import store from 'app/store'
  ...

Usage :

// (Optional) app/actions.js
  // If you plan to fetch and update your translations in-app...

  import { setTranslations } from 'react-native-redux-i18n'

  export const fetchTranslations = () => dispatch => { // async
    fetch('/translations.json')
      .then(res => res.json())
      .then(res => setTranslations(res))
  }

// app/scenes/Home.js
  import { connect } from 'react-redux'
  import React from 'react'
  ...
  import { Loc, setLocale } from 'react-native-redux-i18n'

  const Home = () => (
    <View>
      <Text><Loc locKey="greetings" name="Matthieu" customizer={(text) => text.toUpperCase()} /></Text>
      <Text><Loc locKey="age" count={27} more="blablabla" /></Text>

      <Button onPress={() => setLocale('en-EN')}>en-EN</Button>
      <Button onPress={() => setLocale('fr')}>fr</Button>
    </View>
  )

  const mapStateToProps = () => ({})
  const mapDispatchToProps = dispatch => ({
    setLocale: (locale) => dispatch(setLocale(locale))
  })

  export default connect(mapStateToProps, mapDispatchToProps)(Home)

You can use a customizer props to change the way text will be rendered... samples:

// uppercase
<Loc locKey="greetings" customizer={text => text.toUpperCase()} />

// lowercase
<Loc locKey="greetings" customizer={text => text.toLowerCase()} />

// and more...
<Loc locKey="greetings" customizer={text => text.concat('...')} />

Also you can use it as described in react-native-i18n

// app/index.js

import I18n from 'react-native-redux-i18n'

class Demo extends React.Component {
  render() {
    return <Text>{I18n.t('greeting')}</Text>
  }
}

// Enable fallbacks if you want `en-US` and `en-GB` to fallback to `en`
I18n.fallbacks = true

I18n.translations = {
  en: {
    greeting: 'Hi!',
  },
  fr: {
    greeting: 'Bonjour!',
  },
}

or use I18n directly as described in https://github.com/fnando/i18n-js

GitHub