React Native Localization

React Native is a popular mobile application framework that allows developers to build high-quality apps for iOS and Android using JavaScript and React. One of the essential aspects of mobile app development is localization. Localization is the process of adapting an application to the specific language and culture of a particular target market. In this article, we will explore how to implement localization in a React Native app using the react-native-localization library.

Introduction to react-native-localization React-native-localization is a library that provides a simple way to add multilingual support to your React Native app. It allows you to define a set of translations for different languages and switch between them based on the user’s device language preference. react-native-localization also provides support for right-to-left languages.

Creating a new React Native project Before we dive into react-native-localization, let’s create a new React Native project. You can use the React Native CLI to create a new project. Run the following command in your terminal:

npx react-native init myLocalizationApp

This command will create a new React Native project called myLocalizationApp.

Installation of Dependencies

To install the dependencies open the terminal and jump into your project.

cd myLocalizationApp

Below command will help you create folder and file inside your project folder.

makdir screens
mkdir screens/multiLanguage
touch screens/LanguageSelection.tsx screens/ContentScreen.tsx screens/multiLanguage/English.json screens/multiLanguage/French.json screens/multiLanguage/Hindi.json

Adding react-native-localization to the project Once you have created the project, You can install react-native-localization @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-screens using npm by running the following command in your project directory:

npm install react-native-localization @react-navigation/native @react-navigation/native-stack
react-native-safe-area-context react-native-screens --save

Project Structure

We are using following project structure.

App.tsx

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ContentScreen from './screens/ContentScreen';
import { LanguageSelectionScreen } from './screens/LanguageSelection';

const Stack = createNativeStackNavigator();
function App(): JSX.Element {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name='LanguageSelectionScreen'
          component={LanguageSelectionScreen}
          options={{ title: "Select Language" }}
        />
        <Stack.Screen
          name='ContentScreen'
          component={ContentScreen}
        />

      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

LanguageSelection.tsx

import React from "react";
import { FlatList, Text, TouchableOpacity, View } from "react-native";
import { localize } from "./multiLanguage";


export const LanguageSelectionScreen = (props: any) => {
    const lang = [
        { shortForm: "hi", longForm: "Hindi" },
        { shortForm: "ma", longForm: "Marathi" },
        { shortForm: "en", longForm: "English" },
        { shortForm: "fr", longForm: "French" },
    ];
    return (
        <View style={{ flex: 1, backgroundColor: '#FFFFFF', paddingVertical: 20 }}>
            <Text style={{ fontSize: 28, color: "#000000", textAlign: 'center' }}>
                Please Select Preferred Language
            </Text>
            <FlatList
                style={{ marginTop: 20 }}
                data={lang}
                renderItem={({ item, index }) => {
                    return (
                        <TouchableOpacity
                            onPress={() => {
                                localize.setLanguage(item.shortForm);
                                props.navigation.navigate("ContentScreen", { selectedLanguage: item.longForm });
                            }}
                            style={{ alignItems: 'center', marginVertical: 5, }}>
                            <Text style={{ fontSize: 28, color: "blue", textDecorationLine: 'underline' }}>{item.longForm}</Text>
                        </TouchableOpacity>
                    )
                }}
            />
        </View>
    )
}

ContentScreen.tsx

import React, { useEffect } from "react";
import { Text, View } from "react-native";
import { localize } from "./multiLanguage";

const ContentScreen = ({ route, navigation }) => {
    useEffect(() => {
        navigation.setOptions({ title: "Content Screen" })
    }, []);
    return (
        <View style={{ flex: 1, alignItems: 'center', backgroundColor: "#FFFFFF", paddingVertical: 20 }}>
            <Text style={{ fontSize: 32, fontWeight: 'bold', color: "#000000", marginBottom: 20 }}>selected Language :- {route?.params?.selectedLanguage}</Text>
            <Text style={{ fontSize: 28, color: "#000000" }}>{localize['Hello']}</Text>
            <Text style={{ fontSize: 28, color: "#000000" }}>{localize['fineText']}</Text>
        </View>
    )
}
export default ContentScreen;

Conclusion

React-native-localization is a simple and easy-to-use library that provides support for multilingual apps in React Native. By following the above steps, you can easily add localization to your React Native app and provide a better user experience for your users.