redux-react-native-i18n



An i18n solution with plural forms support for React Native apps on Redux.

This package provides functionality of redux-react-i18n to React Native.
The difference between this package and redux-react-i18n is in presentational component and its container. ``` from this package uses ` ` from `'react-native'` instead of ``.

This package provides functionality of redux-react-i18n to React Native.

The difference between this package and redux-react-i18n is in presentational component. It uses ` ` from 'react-native' instead of ``

Workers of all countries, unite!

$3

- Russian ( ru, ru-RU )
- English ( en, en-US, en-UK )
- French ( fr )
- German ( de )
- Polish ( pl )
- Czech ( cs )
- Portuguese ( pt )
- Brazilian Portuguese ( pt-BR, br )
- Arabic ( ar-AR, ar )
- Turkish ( tr )
- Occitan ( oc )
- Belarusian ( be )
- Bosnian ( bs )
- Croatian ( hr )
- Serbian ( sr )
- Ukrainian ( uk )
- ...

Example Web Demo

derzunov.github.io/redux-react-i18n

Short code demo

#### Write ( jsx ):
`jsx




`
#### Result ( html ):
`html
Перевод вашего первого ключа из словаря для текущего языка
Пришла 1 кошечка
Пришли 2 кошечки
Пришло 5 кошечек
`

$3

redux-react-i18n: ( github or npm )

Install:

You need react-native to be installed!

Terminal:
`
npm i redux-react-native-i18n
`

What's in the box

$3

- Loc ( Container Component )
- LocPresentational ( Presentational Component )

$3

- setCurrent( languageCode )
- setLanguages( languageCode )
- addDictionary( languageCode, dictionary )
- setDictionaries( dictionaries )

$3

- i18n

Full code demo ( complete solution ):

`jsx
import { i18nReducer, i18nActions, Loc } from 'redux-react-native-i18n'

...
// "reducers" contains your reducers
reducers.i18n = i18nReducer
...

const store = createStore( combineReducers( reducers ) )

...
// Set dictionaries (simpliest exapmple) -----------------------------------------------------------------------------------------------

// This dictionaries can be supported by Localization team without need to know somth about interface or project,
// and you just can fetch it to your project
const dictionaries = {
'ru-RU': {
'key_1': 'Первый дефолтный ключ',
'key_2': [ '$Count', ' ', ['штучка','штучки','штучек']], // 1 штучка, 3 штучки, пять штучек
'key_3': {
'nested_1': 'Первый вложенный ключ',
'nested_2': 'Второй вложенный ключ',
},
/ ... /
/ Other keys /
},
'en-US': {
'key_1': 'First default key',
'key_2': [ '$Count', ' ', ['thing','things']], // 1 thing, 2 things, 153 things
'key_3': {
'nested_1': 'First nested key',
'nested_2': 'Second nested key',
},
}
/ ... /
/ Other dictionaries /
}
store.dispatch( i18nActions.setDictionaries( dictionaries ) )
// / Set dictionaries (simpliest exapmple) ---------------------------------------------------------------------------------------------

// Set languages (simpliest exapmple) --------------------------------------------------------------------------------------------------
const languages = [
{
code: 'ru-RU',
name: 'Русский'
},
{
code: 'en-US',
name: 'English (USA)'
}
/ ... /
/ Other languages /
]

store.dispatch( i18nActions.setLanguages( languages ) )
// / Set languages (simpliest exapmple) ------------------------------------------------------------------------------------------------

// Set current language code (you can map this action to select component or somth like this)
store.dispatch( i18nActions.setCurrentLanguage( 'ru-RU' ) )
`

#### And now you can use "Loc" container component

`jsx
import { Loc } from 'redux-react-native-i18n'
...


// => Первый дефолтный ключ
// => 7 штучек
// => Первый вложенный ключ
// => Второй вложенный ключ


`

If you don't want to use a complete solution:

#### Just use a dumb component and you can design store/actions/reducers by yourself like you want

`jsx
// Just import presentational component LocPresentational
import { LocPresentational } from 'redux-react-native-i18n'
...
...
...
// Then map data to props => currentLanguage, dictionary (See more in src/Loc.js):
const mapStateToProps = ( { /getting data from the state/ }, ownProps ) => ({
currentLanguage: yourCurrentLanguageFromState,
dictionary: yourDictionaryFromState
});
Loc = connect( mapStateToProps )( LocPresentational )
...
...
...



``
See more in src/\*.js