CODEWITHSUNDEEP
react-nativemultilingual
chawki challadia
chawki challadia

Reputation: 454

using multiple languages in a react native app

I have a react native app that I'm building as project for a company. the company wants to provide the option of choosing the language on set up and then changing it if needed from the settings page, same way the phone language on android works.

I first thought about saving the text in JSON file and loading the text from there when the app starts, and when I made my search I only found solution about localization rather than using multiple languages the way I'm doing.

So I was wondering if anyone can confirm that the JSON file solution I thought of is a good and useful idea and if there is other better solutions to use instead?

Upvotes: 1

Views: 9931

Answers (3)

ND verma
ND verma

Reputation: 287

using multilanguage (HINDI,ENGLISH) in react native app

frist create 2 json file main folder...Language 1..hi.json

{
name:'Name'
Address:'Address'
}

2..en.json

{
name:'नाम'
Address:'पता'
}

3.then install this... i18n

4..create a file i18n.js

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import en from '../Language/en.json';
import hi from '../Language/hi.json';

i18n.use(initReactI18next).init({
lng: 'en',
fallbackLng: 'en',
resources: {
    en: en,
    hi: hi,
},
interpolation: {
    escapeValue: false
}
});

export default i18n;

5...App.js import this lines

import   './Language/i18n';
import {useTranslation} from 'react-i18next';

6...App.js code

 function HomeScreen() {
      const {t,i18n} = useTranslation();
      const [currentLanguage,setLanguage] =useState('en');
      const changeLanguage = value => {
        i18n
          .changeLanguage(value)
          .then(() => setLanguage(value))
          .catch(err => console.log(err));
      };
      return (

        <View style={{flex:1,backgroundColor:'#ccc'}}>          
               <Text>{t("name")}</Text>
        <View>
              <TouchableOpacity onPress={()=>changeLanguage('en')}>
                  <Text>  ENGLISH</Text>
               </TouchableOpacity>

               <TouchableOpacity onPress={()=>changeLanguage('hi')}>
                     <Text>हिन्दी</Text>
                </TouchableOpacity>
             </View> 
     </View>
      );
    }
export default HomeScreen;

Upvotes: 0

Shahzad
Shahzad

Reputation: 1415

Project react-native-i18n is deprecated now. Read this article Internationalization in React Native which doesn't required any linking or any configuration except for this little configuration.

import i18n from 'i18n-js';

import en from './locales/en.json';
import de from './locales/de.json';

i18n.defaultLocale = 'en';
i18n.locale = 'en';
i18n.fallbacks = true;
i18n.translations = { en, de };

export default i18n;

To display internationalized information on the page we can use i18n.t() function by passing a translation key as an argument. e.g. i18n.t("home.welcome")

Upvotes: 2

Perniferous
Perniferous

Reputation: 611

There are many solutions to this in react native. One would be to use i18n combined with your localization JSON files to create a multi language solution.

Example In Practice:

import React, { Component } from 'react';
import {
  View,
  Text
} from 'react-native';

import { strings } from '../locales/i18n';

class Screen extends Component {
  render() {
    return (
      <View>
        <Text>{strings('screenName.textName')}</Text>
      </View>
    );
  }
}

Full Explanation: https://medium.com/@danielsternlicht/adding-localization-i18n-g11n-to-a-react-native-project-with-rtl-support-223f39a8e6f2

Upvotes: 2

Related Questions