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 <http://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 <http://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();
     }
   }));