Providing Multi-Language Support in a React Native Application

Expanding Your Business with Multi-Language Support in a React Native App using i18next

As your business grows, expanding into new markets and regions is a logical next step. This includes catering to the language needs of the communities you are expanding into. In app development, this is known as Internationalization.

This tutorial guides you through the process of adding multi-language support to a React Native app using i18next. i18next is a JavaScript-based internationalization framework that provides a complete solution for localizing your product across platforms, from web to mobile and desktop.

Prerequisites:

• Knowledge of JavaScript/ES6
• Understanding of React Native basics
• Node.js version 12.x.x or above installed
• Access to a package manager (npm, yarn, or npx)
• React-native-cli installed or using npx

It may be helpful to review the basics of scaffolding a new custom mobile app with Crowdbotics prior to this tutorial.

Let’s get started!

Installing Libraries for a React Native App

To properly follow this tutorial, you will need to install the necessary external libraries for your React Native project. To do this, navigate to your project directory and run the following command:

yarn add react-i18next i18next @react-navigation/native @react-navigation/bottom-tabs @react-native-async-storage/async-storage react-native-vector-icons react-native-screens react-native-safe-area-context react-native-reanimated react-native-localize react-native-gesture-handler

For iOS, run npx pod-install ios after installing the libraries.

React Native Vector Icons will be used for adding icons in the app and React Navigation will enable navigation between screens. Make sure to follow the instructions in the React Navigation Getting Started documentation for proper initialization and configuration.

The following libraries will be used to add multi-language support to the app:

• i18next: the internationalization library
• react-i18next: provides binding for React and React Native projects using Hooks, HOCs, etc. The useTranslation hook will be used to translate text within React Native function components.
• react-native-localize: provides helper functions based on the device’s language preferences.
• @react-native-async-storage/async-storage: a persistent, key-value storage system for the app used to store the user’s language preference.

Note: Be sure to check the installation steps in the libraries’ documentation, as they may change over time.

Building the React Native App With the libraries installed, set up your React Native app with mock screens and navigation.

Create an src/ folder in your project’s root directory and inside that, create the following files and folders:

• /constants
• /translations
• IMLocalize.js
• /navigation
• RootNavigator.js
• /screens
• HomeScreen.js
• SettingsScreen.js
• /components
• LanguageSelector.js“

To create a bottom tab navigation in a React Native app, follow these steps:

1. Add the RootNavigator.js file to the /navigation folder. This file will create the “Home” and “Settings” tabs located in the bottom navigation and display an icon and a label for each.
   • import * as React from ‘react’; import { Text, View } from ‘react-native’; import { NavigationContainer } from ‘@react-navigation/native’; import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’; import Ionicons from ‘react-native-vector-icons/dist/Ionicons’;  import HomeScreen from ‘../screens/HomeScreen’; import SettingsScreen from ‘../screens/SettingsScreen’;  const Tab = createBottomTabNavigator();  export default function RootNavigator() {   return (     <NavigationContainer>       <Tab.Navigator         screenOptions={({ route }) => ({           tabBarIcon: ({ focused, color, size }) => {             let iconName;              if (route.name === ‘Home’) {               iconName = focused ? ‘ios-home’ : ‘ios-home-outline’;             } else if (route.name === ‘Settings’) {               iconName = focused ? ‘ios-settings’ : ‘ios-settings-outline’;             }              return <Ionicons name={iconName} size={size} color={color} />;           },           tabBarActiveTintColor: ‘tomato’,           tabBarInactiveTintColor: ‘gray’,           headerShown: false         })}       >         <Tab.Screen name=’Home’ component={HomeScreen} />         <Tab.Screen name=’Settings’ component={SettingsScreen} />       </Tab.Navigator>     </NavigationContainer>   ); }
2. Add code snippets for the HomeScreen.js and SettingsScreen.js. For now, these files will only display a Text component:
   • // HomeScreen.js import React from ‘react’; import { Text, View } from ‘react-native’;  export default function HomeScreen() {   return (     <View style={{ flex: 1, justifyContent: ‘center’, alignItems: ‘center’ }}>       <Text>Home</Text>     </View>   ); }
     • // SettingsScreen.js import React from ‘react’; import { Text, View } from ‘react-native’; export default function SettingsScreen() { return ( <View style={{ flex: 1, justifyContent: ‘center’, alignItems: ‘center’ }}> <Text>Settings!</Text> </View> ); }
3. Modify the App.js file to include the following code:
   • javascriptCopy code
     • import React from ‘react’; import RootNavigator from ‘./src/navigation/RootNavigator’; export default function App() { return <RootNavigator />; }

Finally, run the app using npx react-native run-ios or npx react-native run-android command and you should see the bottom tab navigation screen T

Contact the best mobile app developers in Kenya – Glitex Solutions Limited