react-native-localized-text

Simple to use React Native Text Translation component

Installation

npm i react-native-localized-text

or

yarn add react-native-localized-text

Initialization

First we need to create the dictionary we are going to use to translate the strings on the app, this dictionary are JavaScript object, each key of the object represent one string on the app

//locales/en.js -> translations file for English
export default {
  firstname: 'first name',
  lastname: 'last name',
  age: 'age',
  address: 'address',
}

//locales/es.js -> translations file for Spanish
export default {
  firstname: 'nombre',
  lastname: 'apellido',
  age: 'edad',
  address: 'direccion',
}

//locales/index.js
import EN from './en';
import ES from './es';

export default {
  EN,
  ES
}

Then we need to initialize the library with this dictionaries in the index.js root file

//index.js
import { AppRegistry } from 'react-native';
import { I18NProvider } from 'react-native-localized-text';
import App from './App';
import { name as appName } from './app.json';
//import the dictionaries
import translations from './locales';

//set dictionaries to the library;
I18NProvider.setTranslations(
  translations, // Object with translations
  'EN' // Default language
);

AppRegistry.registerComponent(appName, () => App);

Usage

import React, { useEffect } from 'react'
import { Text, SafeAreaView, StyleSheet, View } from 'react-native';
import { LocalizedText, TextTransform } from 'react-native-localized-text'

const styles = StyleSheet.create({
  text: { color: '#fff' },
  header: { color: '#fff', fontSize: 20, marginVertical: 30 },
  container: { paddingHorizontal: 20 }
})

const App = () => {
 
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text style={styles.header} >
          English Translations
        </Text>
        
        {/* English */}
        <LocalizedText
          localeKey="firstname"
          style={styles.text}
          textTransform={TextTransform.CAPITAL}
        />
        <LocalizedText
          localeKey="lastname"
          style={styles.text}
          textTransform="capitalize"
        />
        <LocalizedText
          localeKey="age"
          style={styles.text}
        />
        <LocalizedText
          localeKey="address"
          style={styles.text}
        />
        
        <Text style={styles.header}>
          Spanish Translations
        </Text>
        
        {/* Spanish */}
        <LocalizedText
          localeKey="firstname" 
          style={styles.text} 
          locale="ES"  
        />
        <LocalizedText
          localeKey="lastname"
          style={styles.text}
          locale="ES"
          textTransform="lowercase"
        />
        <LocalizedText 
          localeKey="age"
          style={styles.text}
          locale="ES"
        />
        <LocalizedText
          localeKey="address"
          style={styles.text}
          locale="ES"
          textTransform="uppercase"
        />
      </View>
    </SafeAreaView>
  )
}

export default App

String Interpolation

This is a powerfull feature that let you replace some part text inside a LocalizedText component

//locales/en.js -> translations file for English
export default {
  firstname: 'first name',
  lastname: 'last name',
  age: 'age',
  address: 'address',
  amountToPay: 'total amount to pay is {{amount}} including taxes'
}

//locales/es.js -> translations file for Spanish
export default {
  firstname: 'nombre',
  lastname: 'apellido',
  age: 'edad',
  address: 'direccion',
  amountToPay: 'el monto total a pagar es de {{amount}} incluyendo impuestos'
}

//app.js
<LocalizedText 
  localeKey="amountToPay"
  style={styles.text}
  interpolate={{
    amount: `100.00`
  }}
/>

Translate Function

Sometimes we need to do translations in other places outside a React components, for that reason we expose a getTranslator factory function thet returns a translate function loaded with the dictionaries

type Options = {
  locale?: string;
  interpolate?: object;
  defaultValue?: string;
}

translate (
  localeKey: string,
  TextTransformation?: string,
  options?: Options
) => string

//locales/index.js
import EN from './en';
import ES from './es';
import { getTranslator } from 'react-native-localized-text';

const TRANSLATIONS = {
  EN,
  ES
}

export const translate = getTranslator(TRANSLATIONS, 'EN');
export default TRANSLATIONS;


//app.js
import React, { useEffect } from 'react'
import { Text, SafeAreaView, StyleSheet, View } from 'react-native';
import { TextTransform } from 'react-native-localized-text'
import { translate } from './locales';

const options = [
  { name: translate('firstname', TextTransform.CAPITAL) },
  { 
    name: translate(
      'amountToPay',
      TextTransform.NONE, {
        interpolate: { amount: 100 }
      }) 
  },
]

const styles = StyleSheet.create({
  text: { color: '#fff' },
  header: { color: '#fff', fontSize: 20, marginVertical: 30 },
  container: { paddingHorizontal: 20 }
})


const App = () => {
 
  return (
    <SafeAreaView>
     <View style={style.container}>
      {
        options.map((item) => {
          return (
            <Text>{item.name}</Text>
          )
        })
      }
     </View>
      
    </SafeAreaView>
  )
}

export default App

LocalizedText Props

Prop	Description	Type	Default
localeKey	Dictionary key to translate	string	required
locale	Force specific locale on component	string	-
interpolate	String interpolation object	Object	-
defaultValue	Default key if supplied localeKey, is missing	string	-
textTransform	Apply text transformation to returned text	none or uppercase or lowercase or capital or capitalize	none
...textProps	Support all React Native Text Props	-	-

Contributing

Pull requests are welcome.