How to implement user-selectable language for your react-native app.

Yesterday, I build the app which convert the app language. User have two option, either select language as mobile language or select language from multiple language. I have used the react-native-i18n.
So implement user-selectable language for your react-native app follow the following steps.



Step 1:- Create your project.

react-native init langChangeApp

Note:- In above command, project name is langChangeApp. You can rename project according to yourself.

Step 2:- Create the following folder translations. Inside the translations folder create the following files.

• en.json
• es.json
• fr.json
• fr-CA.json

Step 3:- Create the file i18n.js parallel to index.js.

Step 4:- Install the react-native-i18n.

npm install –save react-native-i18n

Step 5:- Link the react-native-i18n.

react-native link react-native-i18n

For the manual linking, click here.

Step 6:- Replace the code of index.js with following code.

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('langChangeApp', () => App);

Step 7:- Replace the code of App.js with following code.

import React, { Component } from 'react';
import { Platform, StyleSheet, TouchableOpacity, Text, ScrollView, View } from 'react-native';
import I18n from './i18n';

// Enable fallbacks if you want `en-US`
// and `en-GB` to fallback to `en`
const language = [
      {lang: "English", code: "en"},
      {lang: "French", code: "fr"},
      {lang: "French Canada", code: "fr-CA"},
      {lang: "Spanish", code: "es"},
    ]

export default class extends Component {
  constructor() {
    super();
    this.state = {
      languages: [],
      value: false,
      langValue: "en",
      select: "Select Language",
    }
    this.onLanguage=this.onLanguage.bind(this);
  }
  componentWillMount() {
    //I18n.locale = "fr-CA";

    //*Change language of app according to mobile app*
    // console.log(this.state.languages)
    // getLanguages().then(languages => {
    //   console.log(languages)
    //   this.setState({ languages });
    // });
  }

  onSelectLanguage() {
    return(
      language.map((data, i)=>{
        return (
           <View key={i} style={styles.dropDownView}>
             <TouchableOpacity onPress={()=>this.onSelectedLang(data)}>
               <Text style={styles.dropDownText}>{data.lang}</Text>
             </TouchableOpacity>
           </View>
        )
      })
    )
  }

  onSelectedLang(text) {
    this.setState({
      value: false,
      select: text.lang,
    }),
    I18n.locale = text.code;
  }
  onLanguage() {
    this.setState({
      value: true,
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.mainTitle}>React-native langauge translation example</Text>
        <View style={styles.subContainer}>
          <View style={styles.block}>
            <Text style={styles.title}>Langauge Translation</Text>
            <Text style={styles.textStyle}>{I18n.t('hello world')}</Text>
            <Text style={styles.textStyle}>{I18n.t('thank you')}</Text>
            <Text style={styles.textStyle}>{I18n.t('Bye')}</Text>
          </View>
          <View>
            <TouchableOpacity onPress={this.onLanguage}>
              <View style={styles.buttonView}>
                <Text style={styles.buttontext}>{this.state.select}</Text>
              </View>
           </TouchableOpacity>
           <View>
            {(this.state.value) ? this.onSelectLanguage() : null}
           </View>
        </View>
     </View>
    </View>
   );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    padding: 24,
  },
  subContainer: {
    flexDirection: "row",
  },
  mainTitle: {
    color: "#3b5998",
    fontSize: 30,
    marginBottom: 20,
    fontWeight: "bold",
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
  },
  buttonView: {
    backgroundColor: "#3b5998",
    padding: 10,
  },
  block: {
    width: 230,
  },
  textStyle: {
    marginTop: 10,
  },
  buttontext: {
    color: "#fff",
  },
  dropDownView: {
    backgroundColor: "#8b9dc3",
    padding: 10,
  },
  dropDownText: {
    paddingTop: 2,
    color: "#fff",
  }
});

Step 8:- Replace the code of i18n.js with following code.

'use strict';
import I18n from 'react-native-i18n';

I18n.fallbacks = true;
I18n.translations = {
  'en': require('./translations/en'),
  'fr': require('./translations/fr'),
  'fr-CA': require('./translations/fr-CA'),
  'es': require('./translations/es'),
};

export default I18n;

Step 9:- Write the code in translations/en.json.

{
  "hello world": "Bonjour tout le monde, Ceci est un exemple de traduction.",
  "thank you": "Je vous remercie",
  "Bye": "Au revoir",
}

Step 10:- Write the code in translations/es.json.

{
  "hello world": "Hola mundo, este es un ejemplo de traducción de idiomas.",
  "thank you": "Gracias",
  "Bye": "Adiós",
}

Step 11:- Write the code in translations/fr.json.

{
  "hello world": "Bonjour tout le monde, Ceci est un exemple de traduction.",
  "thank you": "Je vous remercie",
  "Bye": "Au revoir",
}

Step 12:- Write the code in translations/fr-CA.json.

{
  "hello world": "Hola món, aquest és l'exemple de traducció de la llengua.",
  "thank you": "Gràcies",
  "Bye": "Adéu",
}

Now, run the project.
react-native run-android in android, and react-native run-ios in ios.
Feel free to comment if there is any issue.
Thank you.