using multiple languages in a react native app - react-native

Question

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?

Answer 1

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

Answer 2

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")

Answer 3

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;