Adding multi-language support to your React Native app not only enhances the user experience but also expands your app’s reach to a global audience. In this article, we’ll show you how to integrate multi-language support into your React Native app using i18next, react-i18next, and other helpful packages.
🛠️ Required Dependencies
Run the following commands to install the necessary packages:
yarn add i18next react-i18next i18next-http-backend i18next-browser-languagedetector yarn add @react-native-async-storage/async-storage yarn add react-native-localize 📂 Setting Up the Translations Folder
Create a translations folder inside your src directory. Inside this folder, create the following files:
-
en.json- English translations. -
hi.json- Hindi translations. -
i18n.js- Configuration for i18next. -
translate.js- Helper function for translation.
📝 Translation Files
en.json
{ "welcome": "Welcome", "hello_world": "Hello, World!" } hi.json
{ "welcome": "स्वागत है", "hello_world": "नमस्ते, दुनिया!", "change_language": "भाषा बदलें" } 🔧 i18n Configuration
i18n.js
import i18n from 'i18next'; import {initReactI18next} from 'react-i18next'; import * as Localization from 'react-native-localize'; import AsyncStorage from '@react-native-async-storage/async-storage'; // Translation files import english from '../translations/en.json'; import hindi from '../translations/hi.json'; // Detect the user's language const languageDetector = { type: 'languageDetector', async: true, detect: callback => { AsyncStorage.getItem('user-language', (err, language) => { if (err || !language) { const bestLanguage = Localization.findBestAvailableLanguage([ 'english', 'hindi', ]); callback(bestLanguage?.languageTag || 'english'); } else { callback(language); } }); }, init: () => {}, cacheUserLanguage: language => { AsyncStorage.setItem('user-language', language); }, }; i18n .use(languageDetector) .use(initReactI18next) .init({ fallbackLng: 'english', lng: 'english', resources: { english: {translation: english}, hindi: {translation: hindi}, }, interpolation: { escapeValue: false, }, }); export default i18n; 🛠 Helper for Translations
translate.js
import i18n from 'i18next'; export const translate = (key, options = {}) => { return i18n.t(key, options); }; 🚀 Integrating i18n in Your App
Update your App.js file to include the I18nextProvider:
App.js
import React from 'react'; import MainNavigator from './src/navigation/rootNavigator'; import {SafeAreaProvider} from 'react-native-safe-area-context'; import {I18nextProvider} from 'react-i18next'; import i18n from './src/translations/i18n'; const App = () => { return ( <I18nextProvider i18n={i18n}> <SafeAreaProvider> {/* Your main app components */} </SafeAreaProvider> </I18nextProvider> ); }; export default App; 🖥️ Example Screen for Multi-Language Support
Create a component to demonstrate the language switch feature:
LanguageComponent.js
import {View, Text, Button, StyleSheet} from 'react-native'; import React from 'react'; import {useTranslation} from 'react-i18next'; import {translate} from '../../translations/translate'; const LanguageComponent = () => { const {i18n} = useTranslation(); const switchLanguage = language => { i18n.changeLanguage(language); }; return ( <View style={styles.container}> <Text>{translate('welcome')}</Text> <Text>{translate('hello_world')}</Text> <Button title="Switch to Hindi" onPress={() => switchLanguage('hindi')} /> <Button title="Switch to English" onPress={() => switchLanguage('english')} /> </View> ); }; export default LanguageComponent; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, }); With these steps, you’ve successfully added multi-language support to your React Native app! 🌐 Happy coding! 🚀
Top comments (0)