React Native Localization Example


Share:
Published By: Admin, Published On: Jul 10, 2021, Category: React Native

Hi Guys,

In this blog,I will learn you how to create localization in react native. We will show example of create localization in react native. You can easliy create react native create localization. First i will import Localization namespace from expo-localization, after I will make create localization using in react native.

Step 1 - Create project

In the first step Run the following command for create project.

expo init MyWebtuts 
Step 2 - Installation of Dependency

In the step, Run the following command for installation of dependency.

To use Localization you need to install expo-localization package.

To install this open the terminal and jump into your project

cd paper MyWebtuts 
Run the following command
yarn add expo-localization
after install i18n-js package
yarn add i18n-js
Step 3 - App.js

In this step, You will open App.js file and put the code.

import * as React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import * as Localization from 'expo-localization';
import i18n from 'i18n-js';

// Set the key-value pairs for the different languages you want to support.
i18n.translations = {
  en: { welcome: 'Hello', name: 'MyWebtuts' },
  ja: { welcome: 'こんにちは' },
};

// Set the locale once at the beginning of your app.
i18n.locale = Localization.locale;
// When a value is missing from a language it'll fallback to another language with the key present.
i18n.fallbacks = true;

export default App => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {i18n.t('welcome')} {i18n.t('name')}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  text: {
    fontSize: 20,
  },
});
Step 3 - Run project

In the last step run your project using bellow command.

expo start
Output

It will help you...

Share: