From f0093a7a464157518186b374e940eda18211ec1e Mon Sep 17 00:00:00 2001 From: Bryce Vonilten Date: Fri, 3 May 2019 12:45:08 -0700 Subject: [PATCH 01/18] added i18n-js and localize for mult language support --- android/app/build.gradle | 1 + .../main/java/com/error/amazonhandmadern/MainApplication.java | 2 ++ android/settings.gradle | 2 ++ ios/AmazonHandmadeRN.xcodeproj/project.pbxproj | 1 - ios/Podfile | 2 ++ package.json | 2 ++ 6 files changed, 9 insertions(+), 1 deletion(-) diff --git a/android/app/build.gradle b/android/app/build.gradle index e5aec80..399cfd1 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -172,6 +172,7 @@ android { } dependencies { + implementation project(':react-native-localize') implementation project(':react-native-gesture-handler') implementation project(':react-native-vector-icons') implementation project(':react-native-login-with-amazon') diff --git a/android/app/src/main/java/com/error/amazonhandmadern/MainApplication.java b/android/app/src/main/java/com/error/amazonhandmadern/MainApplication.java index 088ca83..31b2a29 100644 --- a/android/app/src/main/java/com/error/amazonhandmadern/MainApplication.java +++ b/android/app/src/main/java/com/error/amazonhandmadern/MainApplication.java @@ -4,6 +4,7 @@ import android.app.Application; import com.facebook.react.ReactApplication; +import com.reactcommunity.rnlocalize.RNLocalizePackage; import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; import com.reactlibrary.RNLoginWithAmazonPackage; import com.oblador.vectoricons.VectorIconsPackage; @@ -49,6 +50,7 @@ public boolean getUseDeveloperSupport() { protected List getPackages() { return Arrays.asList( new MainReactPackage(), + new RNLocalizePackage(), new RNGestureHandlerPackage(), new RNLoginWithAmazonPackage(), new VectorIconsPackage(), diff --git a/android/settings.gradle b/android/settings.gradle index 2db91f6..d204993 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -1,4 +1,6 @@ rootProject.name = 'AmazonHandmadeRN' +include ':react-native-localize' +project(':react-native-localize').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-localize/android') include ':react-native-gesture-handler' project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android') include ':react-native-vector-icons' diff --git a/ios/AmazonHandmadeRN.xcodeproj/project.pbxproj b/ios/AmazonHandmadeRN.xcodeproj/project.pbxproj index fa74db8..0bc782d 100644 --- a/ios/AmazonHandmadeRN.xcodeproj/project.pbxproj +++ b/ios/AmazonHandmadeRN.xcodeproj/project.pbxproj @@ -5,7 +5,6 @@ }; objectVersion = 46; objects = { - /* Begin PBXBuildFile section */ 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; }; 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; }; diff --git a/ios/Podfile b/ios/Podfile index f919b9a..be5c0c1 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -39,6 +39,8 @@ target 'AmazonHandmadeRN' do pod 'RNLoginWithAmazon', :path => '../node_modules/react-native-login-with-amazon' pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler' + pod 'RNLocalize', :path => '../node_modules/react-native-localize' + end post_install do |installer| diff --git a/package.json b/package.json index 9db54f6..046b695 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ } }, "dependencies": { + "i18n-js": "^3.2.1", "native-base": "^2.12.1", "react": "16.8.4", "react-native": "0.59.4", @@ -73,6 +74,7 @@ "react-native-keyboard-aware-scrollview": "^2.0.0", "react-native-linear-gradient": "^2.5.4", "react-native-login-with-amazon": "^1.1.8", + "react-native-localize": "^1.1.2", "react-native-motion": "^1.0.2", "react-native-side-drawer": "^1.0.9", "react-native-simple-radio-button": "^2.7.3", From 6169d68a0dcad38355b5624f601e24fecdbac276 Mon Sep 17 00:00:00 2001 From: Bryce Vonilten Date: Thu, 9 May 2019 18:19:21 -0700 Subject: [PATCH 02/18] Added action/reducers for setting a language --- src/reducers/Settings.js | 15 +++++++++++++++ src/reducers/index.js | 3 ++- src/screens/Settings/actions.js | 10 ++++++++++ src/screens/Settings/index.js | 3 ++- 4 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 src/reducers/Settings.js diff --git a/src/reducers/Settings.js b/src/reducers/Settings.js new file mode 100644 index 0000000..f488689 --- /dev/null +++ b/src/reducers/Settings.js @@ -0,0 +1,15 @@ +import * as RNLocalize from "react-native-localize" + +const initLanguage = RNLocalize.getLocales() + +export default function Settings(state = {language: initLanguage}, action) { + console.log("Settings reducing action " + action.type) + switch (action.type) { + case 'SET_LANGUAGE': + return Object.assign({}, state, { + language: action.language + }) + default: + return state + } +} \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js index 04f6e0d..1b0bd40 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -8,9 +8,10 @@ import Artisans from './Artisans' import Products from './Products' import Payouts from './Payouts' import Conversations from './Conversations' +import Settings from './Settings' //Then combine them all here -const appReducer = combineReducers({ User, Errors, Artisans, Products, Payouts, Conversations }) +const appReducer = combineReducers({ User, Errors, Artisans, Products, Payouts, Conversations, Settings }) const rootReducer = (state, action) => { if(action.type == 'RESET_STORE' || (__DEV__ && action.type == 'LOGOUT')) { diff --git a/src/screens/Settings/actions.js b/src/screens/Settings/actions.js index e69de29..b5b26c1 100644 --- a/src/screens/Settings/actions.js +++ b/src/screens/Settings/actions.js @@ -0,0 +1,10 @@ +export function changeLanguage(lang) { + console.log("Changing Language") + return (dispatch) => { + return new Promise(async (resolve) => { + console.log("The new language is: " + lang) + resolve() + dispatch({type: 'SET_LANGUAGE', language: lang}) + }) + } +} \ No newline at end of file diff --git a/src/screens/Settings/index.js b/src/screens/Settings/index.js index 71fcc7f..9c323ba 100644 --- a/src/screens/Settings/index.js +++ b/src/screens/Settings/index.js @@ -6,7 +6,8 @@ import * as globalActions from '@actions' function mapStateToProps(state) { return { User: state.User, - Errors: state.Errors + Errors: state.Errors, + Settings: state.Settings } } From 4dd2372b1555ca995495e8232cbbf26a848e4788 Mon Sep 17 00:00:00 2001 From: Bryce Vonilten Date: Thu, 9 May 2019 18:19:57 -0700 Subject: [PATCH 03/18] Added the translation class and the language files for en, es, fr --- src/utils/en.js | 10 ++++++++++ src/utils/es.js | 10 ++++++++++ src/utils/fr.js | 10 ++++++++++ src/utils/i18n.js | 26 ++++++++++++++++++++++++++ 4 files changed, 56 insertions(+) create mode 100644 src/utils/en.js create mode 100644 src/utils/es.js create mode 100644 src/utils/fr.js create mode 100644 src/utils/i18n.js diff --git a/src/utils/en.js b/src/utils/en.js new file mode 100644 index 0000000..69973ac --- /dev/null +++ b/src/utils/en.js @@ -0,0 +1,10 @@ +export default { + artisanDetail: { + hello: "Hello" + }, + Settings: { + settingsTitle: "Settings", + choseLanguage: "Chose a language", + returnToLogin: "Return to Login" + } +}; \ No newline at end of file diff --git a/src/utils/es.js b/src/utils/es.js new file mode 100644 index 0000000..7ca596d --- /dev/null +++ b/src/utils/es.js @@ -0,0 +1,10 @@ +export default { + artisanDetail: { + hello: "Hola" + }, + Settings: { + settingsTitle: "Ajustes", + choseLanguage: "Elige un idioma", + returnToLogin: "Volver al inicio de sesión" + } +}; \ No newline at end of file diff --git a/src/utils/fr.js b/src/utils/fr.js new file mode 100644 index 0000000..b331dfa --- /dev/null +++ b/src/utils/fr.js @@ -0,0 +1,10 @@ +export default { + artisanDetail: { + hello: "Bonjour" + }, + Settings: { + settingsTitle: "Réglages", + choseLanguage: "Choisir une langue", + returnToLogin: "Retour à la connexion" + } +}; \ No newline at end of file diff --git a/src/utils/i18n.js b/src/utils/i18n.js new file mode 100644 index 0000000..39ccb9b --- /dev/null +++ b/src/utils/i18n.js @@ -0,0 +1,26 @@ +import I18n from "i18n-js" +import * as RNLocalize from "react-native-localize" + +import en from "./en" +import es from "./es" +import fr from "./fr" + +const locales = RNLocalize.getLocales() + +if (Array.isArray(locales)) { + I18n.locale = locales[0].languageTag + //console.log("THE LOCAL IS: " + I18n.locale) +} + +I18n.fallbacks = true; +I18n.translations = { + en, + es, + fr +} + +export const setLocale = (locale) => { + I18n.locale = locale +}; + +export default I18n \ No newline at end of file From 603c9e14cc257d7394d165736e781ffb687d8772 Mon Sep 17 00:00:00 2001 From: Bryce Vonilten Date: Thu, 9 May 2019 18:21:00 -0700 Subject: [PATCH 04/18] Changed Settings page to include language picker. Also slightly adjusted the page styles --- src/screens/Settings/Settings.js | 65 +++++++++++++++++++++++++++----- 1 file changed, 56 insertions(+), 9 deletions(-) diff --git a/src/screens/Settings/Settings.js b/src/screens/Settings/Settings.js index 6f617f9..8b18e3b 100644 --- a/src/screens/Settings/Settings.js +++ b/src/screens/Settings/Settings.js @@ -1,14 +1,15 @@ -import { Button } from '@components' +import { Button, Wallpaper } from '@components' import React, { Component } from 'react' -import { ScrollView, StyleSheet, Text, View } from 'react-native' +import { ScrollView, StyleSheet, Text, View, Picker, Platform } from 'react-native' import LinearGradient from 'react-native-linear-gradient' +import I18n, {setLocale} from "../../utils/i18n" - -export default class Settings extends Component { +export default class Settings extends Component { constructor(props) { super(props) this.logout = this.logout.bind(this) + this.changeLanguage = this.changeLanguage.bind(this) } logout() { @@ -16,24 +17,45 @@ export default class Settings extends Component { this.props.navigation.navigate("Login") }) } + + changeLanguage(lang) { + setLocale(lang) + this.props.changeLanguage(lang) + } render() { + const lang = this.props.Settings.language + return ( - + - {"Settings"} + {I18n.t("Settings.settingsTitle", {locale: lang})} + + {I18n.t("Settings.choseLanguage", {locale: lang})}: + + this.changeLanguage(itemValue)}> + + + + + +