Merge pull request #82 from ito-org/fix-bottom-button

Fix bottom button alignment

App/components/BasicButton.tsx

@@ -51,6 +51,7 @@ export const BasicButton: React.FC<BasicButtonProps> = ({
   variant = 'filled',
   textStyle: titleStyleProp = {},
   buttonStyle: buttonStyleProp = {},
+  ...other
 }) => {
   const variantSuffix = VARIANT_SUFFIXES[variant];
   const buttonStyle = {
@@ -69,6 +70,7 @@ export const BasicButton: React.FC<BasicButtonProps> = ({
       onPress={onPress}
       titleStyle={titleStyle}
       buttonStyle={buttonStyle}
+      {...other}
     />
   );
 };

App/screens/HomeTour.tsx

@@ -1,11 +1,11 @@
 import React, {useState} from 'react';
 import {View, Text, StyleSheet, TouchableWithoutFeedback} from 'react-native';
-import {Button} from 'react-native-elements';
 import Icon from 'react-native-vector-icons/Feather';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {RootStackParamList} from 'App/App';
 import AsyncStorage from '@react-native-community/async-storage';
 import AlphaNotice from '../components/AlphaNotice';
+import BasicButton from '../components/BasicButton';
 import {useTranslation} from 'react-i18next';
 
 const styles = StyleSheet.create({
@@ -77,10 +77,10 @@ const styles = StyleSheet.create({
     paddingBottom: 4,
   },
   firstBubble: {
-    top: 0,
+    top: -6,
   },
   secondBubble: {
-    bottom: 90,
+    bottom: 78,
   },
   next: {
     fontFamily: 'Ubuntu-R',
@@ -142,16 +142,16 @@ const styles = StyleSheet.create({
     flex: 0.3,
   },
   bottomButtonContainer: {
-    flex: 0.5,
+    paddingTop: 16,
+    paddingBottom: 16,
     backgroundColor: 'hsl(0, 0%, 70%)',
   },
   buttonInfected: {
     backgroundColor: 'hsl(167, 35%, 58%)',
+    borderColor: 'hsl(167, 35%, 58%)',
     borderRadius: 6,
-    marginTop: 24,
     marginLeft: 16,
     marginRight: 16,
-    padding: 12,
   },
   buttonInfectedTitle: {
     color: '#2c2c2c',
@@ -223,7 +223,7 @@ export const HomeTour: React.FC<{
         </TouchableWithoutFeedback>
       )}
       <View style={styles.bottomButtonContainer}>
-        <Button
+        <BasicButton
           title={t('homeTour.buttonTitleInfected')}
           disabledTitleStyle={styles.buttonInfectedTitle}
           disabledStyle={styles.buttonInfected}

i18n.ts

@@ -27,23 +27,25 @@ function getSystemLocale(): string {
   return locale;
 }
 
+const resources = {en, nl};
+
 function getLangPrefix(lng: string): string {
-  let prefix = 'xx';
+  let prefix = 'en';
   if (lng.indexOf('_') > -1) {
     prefix = lng.split('_')[0];
   } else if (lng.indexOf('-') > -1) {
     prefix = lng.split('-')[0];
   }
 
+  if (!resources.hasOwnProperty(prefix)) {
+    // reset to English if language is not supported
+    prefix = 'en';
+  }
   return prefix;
 }
 
-const resources = {
-  en: en,
-  nl: nl,
-};
-
-console.log(getSystemLocale());
+console.log('System Locale', getSystemLocale());
+console.log('Lang Prefix', getLangPrefix(getSystemLocale()));
 
 i18n
   .use(initReactI18next) // passes i18n down to react-i18next

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ReactNativeApp",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "private": true,
   "scripts": {
     "android": "react-native run-android",