react-native-languages/README.md

115 lines
3.3 KiB
Markdown
Raw Permalink Normal View History

2018-02-05 12:16:47 +00:00
# 🌍 react-native-languages
2017-08-01 16:44:14 +00:00
2018-02-05 12:16:47 +00:00
Get the user preferred languages and use the library of your choice to translate your app !
2017-08-01 16:44:14 +00: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)
2018-09-06 13:58:44 +00:00
## Support
2017-08-01 16:44:14 +00:00
2018-09-06 13:58:44 +00:00
| Version | React Native Support |
| ------- | -------------------- |
| 3.0.0 | 0.56.0+ |
| 2.0.1 | 0.48.0 - 0.55.0 |
2018-04-21 16:56:38 +00:00
2017-08-01 16:44:14 +00:00
## Installation
2018-04-21 16:56:38 +00:00
#### Using yarn
2018-02-05 12:16:47 +00:00
```bash
2018-09-06 13:58:44 +00:00
$ npm install --save react-native-languages
# --- or ---
2017-08-01 16:44:14 +00:00
$ yarn add react-native-languages
```
2018-04-21 16:56:38 +00:00
## Linking
#### Using react-native-cli
2018-02-05 12:21:09 +00:00
2018-04-21 16:56:38 +00:00
```bash
$ react-native link react-native-languages
```
2018-09-06 13:58:44 +00:00
_NB: If you use a Cocoapods and have a `Podfile`, `react-native link` will only add this library as a dependency, and you'll need to run `pod install`._
2018-04-21 16:56:38 +00:00
#### Using CocoaPods (iOS)
2017-08-01 16:44:14 +00:00
```ruby
2018-04-21 16:56:38 +00:00
# add this line in your Podfile
2018-04-21 16:38:11 +00:00
pod 'RNLanguages', :path => '../node_modules/react-native-languages'
2017-08-01 16:44:14 +00:00
```
2018-02-05 12:16:47 +00:00
```bash
2017-08-01 16:44:14 +00:00
$ pod install
```
2018-04-21 16:56:38 +00:00
#### Manual (iOS)
2017-08-01 16:44:14 +00:00
2018-04-21 16:38:11 +00:00
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 `RNLanguages.xcodeproj`
3. Add `RNLanguages.a` to `Build Phases -> Link Binary With Libraries`
2017-08-01 16:44:14 +00:00
2018-04-21 16:56:38 +00:00
#### Manual (Android)
2017-08-01 16:44:14 +00:00
2018-04-21 16:38:11 +00:00
1. Add the following lines to `android/settings.gradle`:
2017-08-01 16:44:14 +00:00
```gradle
include ':react-native-languages'
project(':react-native-languages').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-languages/android')
```
2018-04-21 16:38:11 +00:00
2. Add the compile line to the dependencies in `android/app/build.gradle`:
2017-08-01 16:44:14 +00:00
```gradle
dependencies {
// ...
compile project(':react-native-languages')
}
```
2018-04-21 16:38:11 +00:00
3. Add the import and link the package in `MainApplication.java`:
2017-08-01 16:44:14 +00:00
```java
2018-04-21 16:38:11 +00:00
import com.reactcommunity.rnlanguages.RNLanguagesPackage; // <-- Add the RNLanguages import
2017-08-01 16:44:14 +00:00
public class MainApplication extends Application implements ReactApplication {
// ...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
// ...
2018-04-21 16:38:11 +00:00
new RNLanguagesPackage() // <-- Add it to the packages list
2017-08-01 16:44:14 +00:00
);
}
// ...
}
```
2018-04-21 16:56:38 +00:00
## Basic usage
2017-08-01 16:44:14 +00:00
```javascript
2018-04-21 16:38:11 +00:00
import RNLanguages from 'react-native-languages';
2017-08-01 16:44:14 +00:00
// Current device language
2018-04-21 16:38:11 +00:00
console.log('language', RNLanguages.language);
2017-08-01 16:44:14 +00:00
// User preferred languages (in order)
2018-04-21 16:38:11 +00:00
console.log('languages', RNLanguages.languages);
2017-08-01 16:44:14 +00:00
2018-02-05 12:21:09 +00:00
// Listening for languages changes (on Android)
2018-04-21 16:38:11 +00:00
RNLanguages.addEventListener('change', ({ language, languages }) => {
2017-08-01 16:44:14 +00:00
// Do languages related things…
});
```
2018-04-21 16:56:38 +00:00
## Add project's supported localizations (iOS)
2017-08-01 16:44:14 +00:00
2018-02-05 12:16:47 +00:00
![](https://github.com/react-community/react-native-languages/blob/master/docs/xcode-adding-locales.png?raw=true)
2018-04-21 16:56:38 +00:00
2018-09-06 13:58:44 +00:00
## Example with [i18n-js](https://github.com/fnando/i18n-js)
2018-04-21 16:56:38 +00:00
Browse the files in the [/example](https://github.com/react-community/react-native-languages/tree/master/example) directory.