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.

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

expo init MyWebtuts 

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 

yarn add expo-localization

yarn add i18n-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,
  },
});

In the last step run your project using bellow command.

expo start

It will help you...