react-native-redux-i18n

    1.0.11 • Public • Published

    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

    Licence

    MIT

    Install

    npm i react-native-redux-i18n

    DownloadsWeekly Downloads

    126

    Version

    1.0.11

    License

    MIT

    Unpacked Size

    8.34 kB

    Total Files

    11

    Last publish

    Collaborators

    • derniercri
    • matthieupinte