react-native-ot-translate-manager

Simple Translate Manager for React Native and Expo

Installation

Use the yarn manager yarn to install react-native-ot-translate-manager.

yarn add react-native-ot-translate-manager

Configuration

You must have you translate file in csv format

KEY;FR;EN;ES
EXAMPLE.MAIN.TITLE;titre;title;título
EXAMPLE.MAIN.SUBTITLE;sous titre;subtitle;subtítulo

myTranslate.csv

First line define each language key

The first column represents the key to the translation

All translations must be lowercase

Import

import Translate from 'react-native-ot-translate-manager'

Prepare

//Path of csv file
let path = './dummy.csv'

//Configuration object enabled and disabled language
let configuration = {
    "FR" : true,
    "EN" : true,
    "DE" : false,
    "ES" : false
}

//Let default language
let default = 'EN'

//Setup configuration (async function)
await Translate.setup(path,configuration,default)

Usage

Update language location :

await Translate.updateLanguage('ES')

Get language location :

let currentLanguage = await Translate.getCurrentLanguage()

Simple display :

<Text>
    { Translate.get(Translate.key.example.main.title) } => "title"
</Text>

Simple display with uppercase value :

<Text>
    { Translate.toUppercase(0).get(Translate.key.EXAMPLE.MAIL.TITLE) } => "Title"
</Text>

<Text>
    { Translate.toUppercase(2).get(Translate.key.EXAMPLE.MAIL.TITLE) } => "tiTle"
</Text>

<Text>
    { Translate.toUppercase([0,2,4]).get(Translate.key.EXAMPLE.MAIL.TITLE) } => "TiTlE
</Text>

Simple display with complexe variable :

Variables can be added in translations

KEY;FR;EN;ES
EXAMPLE.MAIN.CURRENT.DATE;Il est %date% ;It is %date% ;Son las %date%

%date% is an variable

<Text>
    { Translate.get(Translate.key.EXAMPLE.MAIN.CURRENT.DATE, {date: '01/01/2010' }) } => "It is 01/01/2010" 
</Text>

With multiple variable

KEY;FR;EN;ES
EXAMPLE.MAIN.CURRENT.DATE;Il est %time% le %date% ;It is %time% at %date% ;Son las %time% - %date%

<Text>
    { Translate.get(Translate.key.EXAMPLE.MAIN.CURRENT.DATE, {date: '01/01/2010', time: '09:00:00' }) } => "It is 09:00:00 at 01/01/2010" 
</Text>

MIT