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.

Sunil Yadav

About Sunil Yadav

Hi, This is Sunil Yadav, I am full stack dev. I have a passion for learning and sharing my knowledge with others as publicly as possible.

View all posts by Sunil Yadav →

7 Comments on “How to implement user-selectable language for your react-native app.”

  1. Hi Sunil,

    Thanks for a great post.
    Well i want to reverse by components from RTL and LTR depends on the language selected.
    Your code works fine to change the text based on the language selected.

    I read somewhere to change the RTL and LTR i have to restart the application and by doing so i cant change the text based on selected language.

    Can you please help on this?

    Thanks,
    Gaurav

  2. Hello Sunil,

    This is the best way one could explain, very nice job done, please do illustrate LTR and RTL too if possible.

    Thanks & Regards,
    Priyank Verma

  3. Good article, but I am not able to change language in runtime. I tried installing and linking the i18n plugin a few times, it did not help. I can see in the console that my language is getting changed but the strings are not getting updated. When I include getLanguages() method, the app crashes. Can you please help me out?

Leave a Reply

Your email address will not be published. Required fields are marked *