feat: Add button to change language (#85)

* cherry-pick

* Add button on picker

* Add button to change language

App/Screens/About/About.js

@@ -16,10 +16,11 @@
 
 import React, { PureComponent } from 'react';
 import { Constants } from 'expo';
-import { Linking, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Linking, Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { Box } from './Box';
 import { BackButton } from '../../components/BackButton';
+import { Language } from './Language';
 import { i18n } from '../../localization';
 import * as theme from '../../utils/theme';
 
@@ -53,7 +54,7 @@ export class About extends PureComponent {
  <Text onPress={this.handleOpenArticle} style={theme.link}>
  {i18n.t('about_how_do_you_calculate_the_number_of_cigarettes_link_1')}
  </Text>
- {i18n.t('about_how_do_you_calculate_the_number_of_cigarettes_message_2')}{' '}
+ {i18n.t('about_how_do_you_calculate_the_number_of_cigarettes_message_2')}
  <Text style={styles.micro}>&micro;</Text>
  g/m&sup3;
  {' \u207D'}
@@ -129,6 +130,10 @@ export class About extends PureComponent {
  {'\n'}
  Shoot! I Smoke v{Constants.manifest.version}.
  </Text>
+ <View style={styles.language}>
+ <Text style={theme.text}>{i18n.t('about_language')}: </Text>
+ <Language />
+ </View>
  </View>
  </ScrollView>
  );
@@ -157,6 +162,20 @@ const styles = StyleSheet.create({
  lineHeight: 24,
  marginBottom: theme.spacing.small
  },
+ language: {
+ flexDirection: 'row',
+ marginTop: theme.spacing.normal
+ },
+ micro: {
+ ...Platform.select({
+ ios: {
+ fontFamily: 'Georgia'
+ },
+ android: {
+ fontFamily: 'normal'
+ }
+ })
+ },
  section: {
  marginBottom: theme.spacing.big
  }

App/Screens/About/Language/Language.js

@@ -0,0 +1,71 @@
+// Sh**t! I Smoke
+// Copyright (C) 2018-2019 Marcelo S. Coelho, Amaury Martiny
+
+// Sh**t! I Smoke is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Sh**t! I Smoke is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Sh**t! I Smoke. If not, see <https://www.gnu.org/licenses/>.
+
+import { inject, observer } from 'mobx-react';
+import React, { Component } from 'react';
+import { Picker, StyleSheet, Text, View } from 'react-native';
+
+import { i18n } from '../../../localization';
+import * as names from './names.json';
+import * as theme from '../../../utils/theme';
+
+@inject('stores')
+@observer
+export class Language extends Component {
+ handleValueChange = (itemValue) => {
+ i18n.locale = itemValue;
+
+ // Reload app for changes to take effect
+ this.props.stores.reloadApp();
+ }
+
+ render () {
+ // Using this hack to show custom picker style
+ // https://github.com/facebook/react-native/issues/7817#issuecomment-264851951
+ return (
+ <View style={styles.container}>
+ <Text style={theme.link}>{names[i18n.locale].nativeName}</Text>
+ <Picker
+ itemStyle={theme.text}
+ onValueChange={this.handleValueChange}
+ selectedValue={i18n.locale}
+ style={styles.picker}
+ >
+ {Object.keys(i18n.translations).map((lang) =>
+ <Picker.Item
+ key={lang}
+ label={names[lang].nativeName}
+ value={lang}
+ />)
+ }
+ </Picker>
+ </View>
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ borderWidth: 0
+ },
+ picker: {
+ height: 1000,
+ position: 'absolute',
+ top: 0,
+ width: 1000
+ }
+});

App/Screens/About/Language/index.js

@@ -0,0 +1,17 @@
+// Sh**t! I Smoke
+// Copyright (C) 2018-2019 Marcelo S. Coelho, Amaury Martiny
+
+// Sh**t! I Smoke is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Sh**t! I Smoke is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Sh**t! I Smoke. If not, see <https://www.gnu.org/licenses/>.
+
+export * from './Language';

App/Screens/About/Language/names.json

@@ -0,0 +1,14 @@
+{
+ "en": {
+ "name": "English",
+ "nativeName": "English"
+ },
+ "es": {
+ "name": "Spanish",
+ "nativeName": "Español"
+ },
+ "fr": {
+ "name": "French",
+ "nativeName": "Français"
+ }
+}

App/localization/index.js

@@ -28,7 +28,10 @@ i18n.translations = {
  es,
  fr
 };
-i18n.locale = Localization.locale;
+
+// `Localization.locale` can come in the form of `en-US` sometimes, so we just
+// take the 1st part.
+i18n.locale = (Localization.locale || 'en').split('-')[0];
 
 export {
  i18n

App/localization/languages/en.json

@@ -56,5 +56,6 @@
  "about_credits_design_and_copywriting": "Design & Copywriting by",
  "about_credits_data_from": "Air quality data from",
  "about_credits_source_code": "Source code",
- "about_credits_available_github": "available on Github"
+ "about_credits_available_github": "available on Github",
+ "about_language": "Language"
 }

App/localization/languages/es.json

@@ -56,5 +56,6 @@
  "about_credits_design_and_copywriting": "Diseño y Copywriting por",
  "about_credits_data_from": "Datos de calidad del aire de",
  "about_credits_source_code": "Código fuente",
- "about_credits_available_github": "disponible en Github"
+ "about_credits_available_github": "disponible en Github",
+ "about_language": "Idioma"
 }

App/stores/index.js

@@ -68,5 +68,9 @@ export const RootStore = types
  // TODO Add sentry
  // https://github.com/amaurymartiny/shoot-i-smoke/issues/22
  self.error = newError;
+ },
+ reloadApp () {
+ // This will reload the app
+ self.location.setCurrent();
  }
  }));