Add button to change language

App/Screens/About/About.js

@@ -16,7 +16,7 @@
 
 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';
@@ -54,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'}
@@ -131,8 +131,8 @@ export class About extends PureComponent {
  Shoot! I Smoke v{Constants.manifest.version}.
  </Text>
  <View style={styles.language}>
- <Text style={theme.text}>Change language:</Text>
- <Language></Language>
+ <Text style={theme.text}>{i18n.t('about_language')}: </Text>
+ <Language />
  </View>
  </View>
  </ScrollView>
@@ -163,8 +163,18 @@ const styles = StyleSheet.create({
  marginBottom: theme.spacing.small
  },
  language: {
- marginTop: theme.spacing.normal,
- justifyContent: 'space-between'
+ 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

@@ -16,9 +16,10 @@
 
 import { inject, observer } from 'mobx-react';
 import React, { Component } from 'react';
-import { Button, Picker, StyleSheet, View } from 'react-native';
+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')
@@ -27,21 +28,29 @@ 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={{ borderWidth: 0 }}>
- <Button title="ABC" />
+ <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}
  >
- <Picker.Item label="English (US)" value="en" />
- <Picker.Item label="Spanish (Spain)" value="es" />
+ {Object.keys(i18n.translations).map((lang) =>
+ <Picker.Item
+ key={lang}
+ label={names[lang].nativeName}
+ value={lang}
+ />)
+ }
  </Picker>
  </View>
 
@@ -50,6 +59,9 @@ export class Language extends Component {
 }
 
 const styles = StyleSheet.create({
+ container: {
+ borderWidth: 0
+ },
  picker: {
  height: 1000,
  position: 'absolute',

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,8 +28,10 @@ i18n.translations = {
  es,
  fr
 };
-console.log('AAAAAAA');
-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"
 }