🌐 react-native-languages

React Native properties and methods related to the language of the device.

Requirements

On Android

• Android SDK Build-tools 25.0.3

Installation

Using yarn

$ yarn add react-native-languages

Using npm

$ npm i react-native-languages --save

Setup

Automatic setup

Using react-native link (react-native >= 0.29)

$ react-native link react-native-languages

Using Cocoapods (iOS only)

# Add this line in your Podfile
pod 'ReactNativeLanguages', :path => '../node_modules/react-native-languages'

$ pod install

Manual setup

On iOS

1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
2. Go to node_modules ➜ react-native-languages ➜ ios ➜ select ReactNativeLanguages.xcodeproj
3. Add ReactNativeLanguages.a to Build Phases -> Link Binary With Libraries

On Android

1. Add the following lines to android/settings.gradle:

include ':react-native-languages'
project(':react-native-languages').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-languages/android')

2. Add the compile line to the dependencies in android/app/build.gradle:

dependencies {
  // ...
  compile project(':react-native-languages')
}

3. Add the import and link the package in MainApplication.java:

import com.reactcommunity.reactnativelanguages.ReactNativeLanguagesPackage; // <-- Add the ReactNativeLanguages import

public class MainApplication extends Application implements ReactApplication {

  // ...

  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      // ...
      new ReactNativeLanguagesPackage() // <-- Add it to the packages list
    );
  }

  // ...
}

Usage

import ReactNativeLanguages from 'react-native-languages';

// Current device language
console.log('language', ReactNativeLanguages.language);

// User preferred languages (in order)
console.log('languages', ReactNativeLanguages.languages);

Add project's supported localizations (iOS)

Listening for languages changes (Android)

import ReactNativeLanguages from 'react-native-languages';

ReactNativeLanguages.addEventListener('change', ({ language, languages }) => {
  // Do languages related things…
  // ReactNativeLanguages.language and ReactNativeLanguages.languages will be correct too !
});

⚠️ Note

As iOS reloads your application on languages change, there is no need to perform this step on this platform.