Merge branch 'develop' into ts-react-i18next

* develop: 0.9.5 (#604) Add yarn start, run-ios, run-android scripts (#558) Add Arabic Language + Right to left App behavior (#581) Enable Google import button in all builds (#599) Stop lint-diff on master, fails always (#600) Refactor NativePicker, detect device language better (#557) Bug/fix spurious linking errors yarn install (#596) Tweaks to better support small screens (#577) Fix some yellow box warnings (#598) Set returnEmptyString to false (#597) [i18n] Upload strings to Lokalise, when merged into develop (#592)
Path-Check · Apr 21, 2020 · bc6ad4d · bc6ad4d
2 parents b40e8dc + 028a3c0
commit bc6ad4d
Show file tree

Hide file tree

Showing 46 changed files with 769 additions and 479 deletions.
diff --git a/.github/workflows/i18n.yml b/.github/workflows/i18n.yml
@@ -0,0 +1,31 @@
+name: i18n
+
+on:
+  # upload strings merged into develop
+  push:
+    branches: [develop]
+    paths:
+      - app/locales/en.json
+      - ios/en.lproj/*.strings
+      - android/app/src/main/res/values/strings.xml
+  # for testing
+  # pull_request:
+  #   branches: [develop]
+  #   paths:
+  #     - app/locales/en.json
+  #     - ios/en.lproj/*.strings
+  #     - android/app/src/main/res/values/strings.xml
+
+jobs:
+  lokalise-upload:
+    runs-on: ubuntu-latest
+    env:
+      UPLOAD_FLAGS: --lang-iso=en --cleanup-mode --replace-modified --include-path --detect-icu-plurals --apply-tm --convert-placeholders --project-id=${{ secrets.LOKALISE_PROJECT_ID }} --token=${{ secrets.LOKALISE_TOKEN }}
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - run: curl -sfL https://raw.githubusercontent.com/lokalise/lokalise-cli-2-go/master/install.sh | sh
+
+      - name: upload English files
+        run: ./bin/lokalise2 file upload --file=app/locales/en.json,ios/en.lproj/InfoPlist.strings,ios/en.lproj/Localizable.strings,android/app/src/main/res/values/strings.xml $UPLOAD_FLAGS
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -1,11 +1,6 @@
 name: Lint
 
 on:
-  push:
-    branches:
-      - develop
-      - release-candidate
-      - master
   pull_request:
     branches:
       - develop

diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -137,8 +137,8 @@ android {
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
 
-        versionCode 22
-        versionName "0.9.4"
+        versionCode 23
+        versionName "0.9.5"
     }
     splits {
         abi {
@@ -198,13 +198,10 @@ android {
 
 dependencies {
     implementation project(':react-native-reanimated')
-    implementation project(':react-native-gesture-handler')
-    implementation project(':react-native-webview')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.facebook.react:react-native:+"  // From node_modules
     implementation "androidx.annotation:annotation:1.1.0"
 
-    compile project(':react-native-fs')
 
     if (enableHermes) {
         def hermesPath = "../../node_modules/hermes-engine/android/";

diff --git a/android/app/src/main/java/org/pathcheck/covidsafepaths/MainApplication.java b/android/app/src/main/java/org/pathcheck/covidsafepaths/MainApplication.java
@@ -5,8 +5,6 @@
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
 import com.swmansion.reanimated.ReanimatedPackage;
-import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
-import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.soloader.SoLoader;

diff --git a/android/settings.gradle b/android/settings.gradle
@@ -1,14 +1,10 @@
 rootProject.name = 'COVIDSafePaths'
 include ':react-native-reanimated'
 project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-reanimated/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-fs'
 project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')
 include ':react-native-zip-archive'
 project(':react-native-zip-archive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-zip-archive/android')
-include ':react-native-webview'
-project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
 include ':react-native-push-notification'
 project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android')
 include ':@mauron85_react-native-background-geolocation'

diff --git a/app/components/Button.js b/app/components/Button.js
@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
 import colors from '../constants/colors';
+import { Typography } from './Typography';
 
 class Button extends React.Component {
   render() {
@@ -40,15 +41,15 @@ class Button extends React.Component {
           accessible
           accessibilityLabel={title}
           accessibilityRole='button'>
-          <Text
+          <Typography
             style={[
               titleStyle ? titleStyle : styles.text,
               {
                 color: buttonColor,
               },
             ]}>
             {title}
-          </Text>
+          </Typography>
         </TouchableOpacity>
       </LinearGradient>
     );

diff --git a/app/components/DynamicTextInput.js b/app/components/DynamicTextInput.js
@@ -0,0 +1,12 @@
+// Custome Text handling RTL and LTR text direction
+import styled from '@emotion/native';
+
+import languages from '../locales/languages';
+
+// Themes to be added
+
+const getCurrentDirection = () => languages.dir();
+
+export const DynamicTextInput = styled.TextInput`
+  writing-direction: ${getCurrentDirection};
+`;
diff --git a/app/components/NativePicker.js b/app/components/NativePicker.js
@@ -3,15 +3,31 @@ import {
   Modal,
   Picker,
   Platform,
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
 
-// Code for the language select dropdown, for nice native handling on both iOS and Android.
+import { Typography } from '../components/Typography';
+import languages from '../locales/languages';
+
+/**
+ * Native dropdown that abstracts away the UI differences for iOS and Android.
+ *
+ * Usage:
+ *
+ *
+ * ```jsx
+ * <NativePicker
+ *     items={[{value: 'x', label: 'X'}]}
+ *     value={x}
+ *     onValueChange={valueChanged}
+ *   >
+ *   {({label, openPicker}) => (
+ *     <MyLabel onPress={openPicker}>{label}</MyLabel>
+ *   )}
+ * </NativePicker>
+ * ```
+ */
 export default class NativePicker extends Component {
   constructor(props) {
     super(props);
@@ -21,60 +37,42 @@ export default class NativePicker extends Component {
   }
 
   render() {
+    const renderLabel = this.props.children;
+    const openPicker = () => {
+      this.setState({ modalVisible: true });
+    };
+    const selectedItem = this.props.items.find(
+      i => i.value === this.props.value,
+    );
+    const label = selectedItem?.label || '';
+    const value = selectedItem?.value;
+
     // iOS and Android Pickers behave differently, handled below
     if (Platform.OS === 'android') {
-      const selectedItem = this.props.items.find(
-        i => i.value === this.props.value,
-      );
-      const selectedLabel = selectedItem ? selectedItem.label : '';
-
       return (
-        <View style={styles.inputContainer}>
-          <TouchableOpacity
-            onPress={() => this.setState({ modalVisible: true })}>
-            <TextInput
-              style={[
-                styles.touchableTrigger,
-                styles.touchableText,
-                this.props.hidden ? styles.opacityZero : null,
-              ]}
-              editable={false}
-              placeholder='Select language'
-              onChangeText={searchString => {
-                this.setState({ searchString });
-              }}
-              value={selectedLabel}
-            />
-          </TouchableOpacity>
+        <View>
+          {renderLabel({ value, label, openPicker })}
           <Picker
             selectedValue={this.props.value}
             onValueChange={this.props.onValueChange}
-            style={{ opacity: 0, marginTop: -45 }}>
-            {this.props.items.map((i, index) => (
-              <Picker.Item key={index} label={i.label} value={i.value} />
+            style={{
+              opacity: 0,
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+            }}>
+            {this.props.items.map(i => (
+              <Picker.Item key={i.value} label={i.label} value={i.value} />
             ))}
           </Picker>
         </View>
       );
     } else {
-      const selectedItem = this.props.items.find(
-        i => i.value === this.props.value,
-      );
-      const selectedLabel = selectedItem ? selectedItem.label : '';
-
       return (
-        <View style={styles.inputContainer}>
-          <TouchableOpacity
-            onPress={() => {
-              this.setState({ modalVisible: true });
-            }}
-            style={[
-              styles.touchableTrigger,
-              this.props.hidden ? styles.opacityZero : null,
-            ]}>
-            <Text style={styles.touchableText}>{selectedLabel}</Text>
-          </TouchableOpacity>
-
+        <>
+          {renderLabel({ value, label, openPicker })}
           <Modal
             animationType='slide'
             transparent
@@ -95,9 +93,9 @@ export default class NativePicker extends Component {
             <View style={{ flex: 1, backgroundColor: '#ffffff' }}>
               <TouchableWithoutFeedback
                 onPress={() => this.setState({ modalVisible: false })}>
-                <View style={styles.modalContainer}>
-                  <View style={styles.modalContent}>
-                    <Text
+                <View>
+                  <View>
+                    <Typography
                       style={{
                         color: '#007aff',
                         fontWeight: 'bold',
@@ -106,18 +104,18 @@ export default class NativePicker extends Component {
                         marginRight: 22,
                       }}
                       onPress={() => this.setState({ modalVisible: false })}>
-                      Done
-                    </Text>
+                      {languages.t('Done')}
+                    </Typography>
                   </View>
                   <View
-                    onStartShouldSetResponder={evt => true}
-                    onResponderReject={evt => {}}>
+                    onStartShouldSetResponder={() => true}
+                    onResponderReject={() => {}}>
                     <Picker
                       selectedValue={this.props.value}
                       onValueChange={this.props.onValueChange}>
-                      {this.props.items.map((i, index) => (
+                      {this.props.items.map(i => (
                         <Picker.Item
-                          key={index}
+                          key={i.value}
                           label={i.label}
                           value={i.value}
                         />
@@ -128,53 +126,8 @@ export default class NativePicker extends Component {
               </TouchableWithoutFeedback>
             </View>
           </Modal>
-        </View>
+        </>
       );
     }
   }
 }
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-    backgroundColor: '#ffffff',
-  },
-  imageContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: '3%',
-  },
-  descriptionContainer: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  descriptionIconContainer: {
-    alignSelf: 'center',
-  },
-  descriptionIcon: {
-    width: 10,
-    height: 10,
-    resizeMode: 'contain',
-  },
-  descriptionTextContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    marginLeft: '5%',
-  },
-  touchableTrigger: {
-    backgroundColor: '#ffffff',
-    opacity: 0.4,
-    paddingVertical: 4,
-    paddingHorizontal: 11,
-    borderRadius: 100,
-  },
-  touchableText: {
-    fontSize: 12,
-    color: '#4051DB',
-    textAlign: 'center',
-    textTransform: 'uppercase',
-  },
-  opacityZero: {
-    opacity: 0,
-  },
-});
diff --git a/app/components/NavigationBarWrapper.js b/app/components/NavigationBarWrapper.js
@@ -2,7 +2,7 @@ import styled from '@emotion/native';
 import { useTheme } from 'emotion-theming';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { StatusBar } from 'react-native';
+import { Dimensions, StatusBar } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 
 import backArrow from './../assets/svgs/backArrow';
@@ -17,6 +17,8 @@ import Colors from '../constants/colors';
  *   onBackPress: () => void,
  * }} param0
  */
+const widthScale = Math.min(Dimensions.get('window').width / 400, 1.0);
+
 const NavigationBarWrapper = ({ children, title, onBackPress }) => {
   const theme = useTheme();
 
@@ -73,8 +75,9 @@ const Title = styled.Text`
   align-self: center;
   color: ${Colors.WHITE};
   font-family: IBMPlexSans-Medium;
-  font-size: 26px;
+  font-size: ${26 * widthScale + 'px'};
   position: absolute;
+  padding-horizontal: 20;
   text-align: center;
   width: 100%;
 `;