status-im
/
react-native-languages
mirror of https://github.com/status-im/react-native-languages.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Provides a simple i18next example using i18next + react-i18next

This commit is contained in:
Mathieu Acthernoene 2017-09-24 19:58:02 +02:00
parent 7066ce22db
commit 959c6bf962
15 changed files with 205 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.flowconfig
View File

@ -9,4 +9,4 @@
munge_underscores=true
[version]
^0.54.1
^0.55.0

2
.gitignore vendored
View File

@ -11,3 +11,5 @@ Thumbs.db
Desktop.ini
.vscode/
android/build/

4
.npmignore
View File

@ -1,2 +1,2 @@
example
docs
example/
docs/

65
example/index.android.js
View File

@ -1,65 +1,6 @@
// @flow
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import ReactNativeLanguages from 'react-native-languages';
import { AppRegistry } from 'react-native';
import App from './src/App';
type State = {
language: string,
languages: Array<string>
};
export default class ReactNativeLanguagesExample extends Component {
state: State = {
language: ReactNativeLanguages.language,
languages: ReactNativeLanguages.languages
};
_onLanguagesChange = ({ language, languages }) => {
this.setState({ language, languages });
};
componentDidMount() {
ReactNativeLanguages.addEventListener('change', this._onLanguagesChange);
}
componentWillUnmount() {
ReactNativeLanguages.removeEventListener('change', this._onLanguagesChange);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>react-native-languages demo</Text>
<Text style={styles.line}>
language: {ReactNativeLanguages.language}
</Text>
<Text style={styles.line}>
languages: {JSON.stringify(ReactNativeLanguages.languages)}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
paddingHorizontal: 10,
paddingVertical: 30
},
title: {
fontSize: 20,
marginBottom: 10
},
line: {
color: '#333333',
marginBottom: 5
}
});
AppRegistry.registerComponent(
'ReactNativeLanguagesExample',
() => ReactNativeLanguagesExample
);
AppRegistry.registerComponent('ReactNativeLanguagesExample', () => App);

43
example/index.ios.js
View File

@ -1,43 +1,6 @@
// @flow
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import ReactNativeLanguages from 'react-native-languages';
import { AppRegistry } from 'react-native';
import App from './src/App';
export default class ReactNativeLanguagesExample extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>react-native-languages demo</Text>
<Text style={styles.line}>
language: {ReactNativeLanguages.language}
</Text>
<Text style={styles.line}>
languages: {JSON.stringify(ReactNativeLanguages.languages)}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
paddingHorizontal: 10,
paddingVertical: 30
},
title: {
fontSize: 20,
marginBottom: 10
},
line: {
color: '#333333',
marginBottom: 5
}
});
AppRegistry.registerComponent(
'ReactNativeLanguagesExample',
() => ReactNativeLanguagesExample
);
AppRegistry.registerComponent('ReactNativeLanguagesExample', () => App);

20
example/package.json
View File

@ -1,13 +1,15 @@
{
"name": "ReactNativeLanguagesExample",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"name": "ReactNativeLanguagesExample",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"i18next": "^9.0.0",
"react": "16.0.0-alpha.12",
"react-i18next": "^5.4.1",
"react-native": "0.48.4",
"react-native-languages": "file:../"
}
}
}

29
example/src/App.js Normal file
View File

@ -0,0 +1,29 @@
// @flow
import React, { PureComponent } from 'react';
import ReactNativeLanguages from 'react-native-languages';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import Root from './Root';
export default class App extends PureComponent {
componentWillMount() {
ReactNativeLanguages.addEventListener('change', this._onLanguagesChange);
}
componentWillUnmount() {
ReactNativeLanguages.removeEventListener('change', this._onLanguagesChange);
}
_onLanguagesChange = ({ language, languages }) => {
i18n.changeLanguage(language);
};
render() {
return (
<I18nextProvider i18n={i18n}>
<Root />
</I18nextProvider>
);
}
}

39
example/src/Root.js Normal file
View File

@ -0,0 +1,39 @@
// @flow
import React, { PureComponent } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { translate } from 'react-i18next';
class Root extends PureComponent {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>{this.props.t('title')}</Text>
<Text style={styles.line}>
{this.props.t('current', {
language: this.props.i18n.language
})}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
paddingHorizontal: 10,
paddingVertical: 30
},
title: {
fontSize: 20,
marginBottom: 10
},
line: {
color: '#333333',
marginBottom: 5
}
});
export default translate('common')(Root);

19
example/src/i18n.js Normal file
View File

@ -0,0 +1,19 @@
// @flow
import ReactNativeLanguages from 'react-native-languages';
import i18n from 'i18next';
import en from './translations/en.json';
import fr from './translations/fr.json';
import de from './translations/de.json';
export default i18n.init({
debug: __DEV__,
lng: ReactNativeLanguages.language,
fallbackLng: 'en',
ns: ['common'],
defaultNS: 'common',
resources: { en, fr, de },
interpolation: { escapeValue: false }, // not needed for react
react: { wait: true }
});

6
example/src/translations/de.json Normal file
View File

@ -0,0 +1,6 @@
{
"common": {
"title": "react-native-languages demo",
"current": "Die Sprache ist auf \"{{language}}\" gesetzt"
}
}

6
example/src/translations/en.json Normal file
View File

@ -0,0 +1,6 @@
{
"common": {
"title": "react-native-languages demo",
"current": "The current language is \"{{language}}\""
}
}

6
example/src/translations/fr.json Normal file
View File

@ -0,0 +1,6 @@
{
"common": {
"title": "Démo de react-native-languages",
"current": "Le langage courant est \"{{language}}\""
}
}

140
package-lock.json generated
View File

@ -223,9 +223,9 @@
}
},
"flow-bin": {
"version": "0.54.1",
"resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.54.1.tgz",
"integrity": "sha1-cQG8zPAG3AZScUqK7wxyB4p2BRA=",
"version": "0.55.0",
"resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.55.0.tgz",
"integrity": "sha1-kIPakye9jKtrQHbWPYXyJHp+rhs=",
"dev": true
},
"get-own-enumerable-property-symbols": {
@ -359,81 +359,11 @@
"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
"dev": true
},
"jest-matcher-utils": {
"version": "20.0.3",
"resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-20.0.3.tgz",
"integrity": "sha1-s6a443yld4A7CDKpixZPRLeBVhI=",
"dev": true,
"requires": {
"chalk": "1.1.3",
"pretty-format": "20.0.3"
},
"dependencies": {
"ansi-styles": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
"dev": true
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
"ansi-styles": "2.2.1",
"escape-string-regexp": "1.0.5",
"has-ansi": "2.0.0",
"strip-ansi": "3.0.1",
"supports-color": "2.0.0"
}
},
"supports-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
"dev": true
}
}
},
"jest-validate": {
"version": "20.0.3",
"resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-20.0.3.tgz",
"integrity": "sha1-0M/R3k9XnymEhJJcKA+PHZTsPKs=",
"dev": true,
"requires": {
"chalk": "1.1.3",
"jest-matcher-utils": "20.0.3",
"leven": "2.1.0",
"pretty-format": "20.0.3"
},
"dependencies": {
"ansi-styles": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
"dev": true
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
"ansi-styles": "2.2.1",
"escape-string-regexp": "1.0.5",
"has-ansi": "2.0.0",
"strip-ansi": "3.0.1",
"supports-color": "2.0.0"
}
},
"supports-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
"dev": true
}
}
"jest-get-type": {
"version": "21.0.2",
"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-21.0.2.tgz",
"integrity": "sha512-4KvNzzXMXeapGaMWd+SL5e47zcMn8KTWjom6Fl3avxVXnbKS7abD1p4xWe4ToAZfgNoYNsQ9Av/mnWMnZK/Z4A==",
"dev": true
},
"js-yaml": {
"version": "3.10.0",
@ -452,9 +382,9 @@
"dev": true
},
"lint-staged": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-4.1.3.tgz",
"integrity": "sha512-nOV/CUs10lQz7STNkNs+X3lQahaMfWj31OoTPQxVVg17pqDbBi8chV564nk/GdTgHNAF7RyRFt0ZiA2cTjgppw==",
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-4.2.2.tgz",
"integrity": "sha512-29NaaMLV1vEKJsZQNSoskOQ4hBgVxNoS9+Jy0rKVlR9UXCpAqZbUxmPubc5B5PG29Eg/OxdwOQcfYMAFWrXjiA==",
"dev": true,
"requires": {
"app-root-path": "2.0.1",
@ -462,7 +392,7 @@
"cosmiconfig": "1.1.0",
"execa": "0.8.0",
"is-glob": "4.0.0",
"jest-validate": "20.0.3",
"jest-validate": "21.1.0",
"listr": "0.12.0",
"lodash": "4.17.4",
"log-symbols": "2.0.0",
@ -471,6 +401,36 @@
"p-map": "1.1.1",
"staged-git-files": "0.0.4",
"stringify-object": "3.2.0"
},
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
"jest-validate": {
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-21.1.0.tgz",
"integrity": "sha512-xS0cyErNWpsLFlGkn/b87pk/Mv7J+mCTs8hQ4KmtOIIoM1sHYobXII8AtkoN8FC7E3+Ptxjo+/3xWk6LK1dKcw==",
"dev": true,
"requires": {
"chalk": "2.1.0",
"jest-get-type": "21.0.2",
"leven": "2.1.0",
"pretty-format": "21.1.0"
}
},
"pretty-format": {
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-21.1.0.tgz",
"integrity": "sha512-041BVxr2pp7uGG8slfw43ysRXSaBIVqo5Li03BwI3K1/9oENlhkEEYWPkHpDzj7NlJ3GZte+Tv/DId5g2PLduA==",
"dev": true,
"requires": {
"ansi-regex": "3.0.0",
"ansi-styles": "3.2.0"
}
}
}
},
"listr": {
@ -827,21 +787,11 @@
}
},
"prettier": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.6.1.tgz",
"integrity": "sha512-f85qBoQiqiFM/sCmJaN4Lagj9bqMcv38vCftqp4GfVessAqq3Ns6g+3gd8UXReStLLE/DGEdwiZXoFKxphKqwg==",
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.7.0.tgz",
"integrity": "sha512-kIbA3UE9sYGiVCxlWg92EOHWZqte6EAkC7DS5je6NaL8g3Uw1rWe0eH+UX4Hy5OEiR9aql2vVMHeg6lR4YGxYg==",
"dev": true
},
"pretty-format": {
"version": "20.0.3",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-20.0.3.tgz",
"integrity": "sha1-Ag41ClYKH+GpjcO+tsz/s4beixQ=",
"dev": true,
"requires": {
"ansi-regex": "2.1.1",
"ansi-styles": "3.2.0"
}
},
"pseudomap": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",

6
package.json
View File

@ -17,9 +17,9 @@
]
},
"devDependencies": {
"flow-bin": "^0.54.1",
"flow-bin": "^0.55.0",
"husky": "^0.14.3",
"lint-staged": "^4.1.3",
"prettier": "^1.6.1"
"lint-staged": "^4.2.2",
"prettier": "^1.7.0"
}
}

59
yarn.lock
View File

@ -6,15 +6,19 @@ ansi-escapes@^1.0.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
ansi-regex@^2.0.0, ansi-regex@^2.1.1:
ansi-regex@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
ansi-regex@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
ansi-styles@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
ansi-styles@^3.0.0, ansi-styles@^3.1.0:
ansi-styles@^3.1.0, ansi-styles@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
dependencies:
@ -168,9 +172,9 @@ figures@^1.7.0:
escape-string-regexp "^1.0.5"
object-assign "^4.1.0"
flow-bin@^0.54.1:
version "0.54.1"
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.54.1.tgz#7101bcccf006dc0652714a8aef0c72078a760510"
flow-bin@^0.55.0:
version "0.55.0"
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.55.0.tgz#9083da9327bd8cab6b4076d63d85f2247a7eae1b"
get-own-enumerable-property-symbols@^1.0.1:
version "1.0.1"
@ -264,21 +268,18 @@ isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
jest-matcher-utils@^20.0.3:
version "20.0.3"
resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-20.0.3.tgz#b3a6b8e37ca577803b0832a98b164f44b7815612"
dependencies:
chalk "^1.1.3"
pretty-format "^20.0.3"
jest-get-type@^21.0.2:
version "21.0.2"
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-21.0.2.tgz#304e6b816dd33cd1f47aba0597bcad258a509fc6"
jest-validate@^20.0.3:
version "20.0.3"
resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-20.0.3.tgz#d0cfd1de4f579f298484925c280f8f1d94ec3cab"
jest-validate@^21.1.0:
version "21.1.0"
resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-21.1.0.tgz#39d01115544a758bce49f221a5fcbb24ebdecc65"
dependencies:
chalk "^1.1.3"
jest-matcher-utils "^20.0.3"
chalk "^2.0.1"
jest-get-type "^21.0.2"
leven "^2.1.0"
pretty-format "^20.0.3"
pretty-format "^21.1.0"
js-yaml@^3.4.3:
version "3.10.0"
@ -291,16 +292,16 @@ leven@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
lint-staged@^4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-4.1.3.tgz#07c592e4b8dee914450a183c761187dc53d079e2"
lint-staged@^4.2.2:
version "4.2.2"
resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-4.2.2.tgz#a308ceb3f1031b78c832fbe4570744b3c7fd5a4e"
dependencies:
app-root-path "^2.0.0"
chalk "^2.1.0"
cosmiconfig "^1.1.0"
execa "^0.8.0"
is-glob "^4.0.0"
jest-validate "^20.0.3"
jest-validate "^21.1.0"
listr "^0.12.0"
lodash "^4.17.4"
log-symbols "^2.0.0"
@ -474,16 +475,16 @@ pinkie@^2.0.0:
version "2.0.4"
resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
prettier@^1.6.1:
version "1.6.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.6.1.tgz#850f411a3116226193e32ea5acfc21c0f9a76d7d"
prettier@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.0.tgz#47481588f41f7c90f63938feb202ac82554e7150"
pretty-format@^20.0.3:
version "20.0.3"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-20.0.3.tgz#020e350a560a1fe1a98dc3beb6ccffb386de8b14"
pretty-format@^21.1.0:
version "21.1.0"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-21.1.0.tgz#557428254323832ee8b7c971cb613442bea67f61"
dependencies:
ansi-regex "^2.1.1"
ansi-styles "^3.0.0"
ansi-regex "^3.0.0"
ansi-styles "^3.2.0"
pseudomap@^1.0.2:
version "1.0.2"