2018-02-05 13:16:47 +01:00
|
|
|
|
# 🌍 react-native-languages
|
2017-08-01 18:44:14 +02:00
|
|
|
|
|
2018-02-05 13:16:47 +01:00
|
|
|
|
Get the user preferred languages and use the library of your choice to translate your app !
|
2017-08-01 18:44:14 +02:00
|
|
|
|
|
|
|
|
|
[![npm version](https://badge.fury.io/js/react-native-languages.svg)](https://badge.fury.io/js/react-native-languages) [![npm](https://img.shields.io/npm/dt/react-native-languages.svg)](https://www.npmjs.org/package/react-native-languages) ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg) ![MIT](https://img.shields.io/dub/l/vibe-d.svg) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
|
|
|
|
|
|
|
|
|
|
## Requirements
|
|
|
|
|
|
|
|
|
|
#### On Android
|
|
|
|
|
|
|
|
|
|
- Android SDK Build-tools 25.0.3
|
|
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
2018-02-05 13:16:47 +01:00
|
|
|
|
```bash
|
2017-08-01 18:44:14 +02:00
|
|
|
|
$ yarn add react-native-languages
|
2018-02-05 13:21:09 +01:00
|
|
|
|
# -- OR --
|
|
|
|
|
npm i react-native-languages --save
|
|
|
|
|
# - THEN -
|
2017-08-01 18:44:14 +02:00
|
|
|
|
$ react-native link react-native-languages
|
|
|
|
|
```
|
|
|
|
|
|
2018-02-05 13:21:09 +01:00
|
|
|
|
## Setup using Cocoapods (iOS only)
|
|
|
|
|
|
|
|
|
|
Instead of using `react-native link`, you can use Cocoapods to manage your dependencies.
|
2017-08-01 18:44:14 +02:00
|
|
|
|
|
|
|
|
|
```ruby
|
|
|
|
|
# Add this line in your Podfile
|
|
|
|
|
pod 'ReactNativeLanguages', :path => '../node_modules/react-native-languages'
|
|
|
|
|
```
|
|
|
|
|
|
2018-02-05 13:16:47 +01:00
|
|
|
|
```bash
|
2017-08-01 18:44:14 +02:00
|
|
|
|
$ pod install
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Manual setup
|
|
|
|
|
|
|
|
|
|
#### On iOS
|
|
|
|
|
|
|
|
|
|
1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ `Add Files to <...>`
|
2017-08-01 19:02:06 +02:00
|
|
|
|
2. Go to `node_modules` ➜ `react-native-languages` ➜ `ios` ➜ select `ReactNativeLanguages.xcodeproj`
|
2017-08-01 18:44:14 +02:00
|
|
|
|
3. Add `ReactNativeLanguages.a` to `Build Phases -> Link Binary With Libraries`
|
|
|
|
|
|
|
|
|
|
#### On Android
|
|
|
|
|
|
|
|
|
|
1. Add the following lines to `android/settings.gradle`:
|
|
|
|
|
|
|
|
|
|
```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`:
|
|
|
|
|
|
|
|
|
|
```gradle
|
|
|
|
|
dependencies {
|
|
|
|
|
// ...
|
|
|
|
|
compile project(':react-native-languages')
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
3. Add the import and link the package in `MainApplication.java`:
|
|
|
|
|
|
|
|
|
|
```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
|
|
|
|
|
|
|
|
|
|
```javascript
|
2018-02-05 13:24:59 +01:00
|
|
|
|
import RNLanguages from 'react-native-languages';
|
2017-08-01 18:44:14 +02:00
|
|
|
|
|
|
|
|
|
// Current device language
|
2018-02-05 13:24:59 +01:00
|
|
|
|
console.log('language', RNLanguages.language);
|
2017-08-01 18:44:14 +02:00
|
|
|
|
|
|
|
|
|
// User preferred languages (in order)
|
2018-02-05 13:24:59 +01:00
|
|
|
|
console.log('languages', RNLanguages.languages);
|
2017-08-01 18:44:14 +02:00
|
|
|
|
|
2018-02-05 13:21:09 +01:00
|
|
|
|
// Listening for languages changes (on Android)
|
2018-02-05 13:24:59 +01:00
|
|
|
|
RNLanguages.addEventListener('change', ({ language, languages }) => {
|
2017-08-01 18:44:14 +02:00
|
|
|
|
// Do languages related things…
|
2018-02-05 13:24:59 +01:00
|
|
|
|
// RNLanguages.language and RNLanguages.languages will be correct too !
|
2017-08-01 18:44:14 +02:00
|
|
|
|
});
|
|
|
|
|
```
|
|
|
|
|
|
2018-02-05 13:16:47 +01:00
|
|
|
|
### Add project's supported localizations (iOS)
|
2017-08-01 18:44:14 +02:00
|
|
|
|
|
2018-02-05 13:16:47 +01:00
|
|
|
|
![](https://github.com/react-community/react-native-languages/blob/master/docs/xcode-adding-locales.png?raw=true)
|