Fix layout issues on Android

.idea/workspace.xml

@@ -2,20 +2,8 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="6f884dce-583e-4e88-a1c3-0ae6c4d6d70b" name="Default" comment="">
-      <change beforePath="$PROJECT_DIR$/mobile/.babelrc" afterPath="$PROJECT_DIR$/mobile/.babelrc" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
-      <change beforePath="$PROJECT_DIR$/mobile/android/build.gradle" afterPath="$PROJECT_DIR$/mobile/android/build.gradle" />
+      <change beforePath="$PROJECT_DIR$/version.json5" afterPath="$PROJECT_DIR$/version.json5" />
-      <change beforePath="$PROJECT_DIR$/mobile/package-lock.json" afterPath="$PROJECT_DIR$/mobile/package-lock.json" />
-      <change beforePath="$PROJECT_DIR$/mobile/package.json" afterPath="$PROJECT_DIR$/mobile/package.json" />
-      <change beforePath="$PROJECT_DIR$/mobile/src/screens/Error.js" afterPath="$PROJECT_DIR$/mobile/src/screens/Error.js" />
-      <change beforePath="$PROJECT_DIR$/mobile/src/screens/Login.js" afterPath="$PROJECT_DIR$/mobile/src/screens/Login.js" />
-      <change beforePath="$PROJECT_DIR$/mobile/src/ui/BoundButton.js" afterPath="$PROJECT_DIR$/mobile/src/ui/BoundButton.js" />
-      <change beforePath="$PROJECT_DIR$/mobile/src/ui/BoundInput.js" afterPath="$PROJECT_DIR$/mobile/src/ui/BoundInput.js" />
-      <change beforePath="$PROJECT_DIR$/mobile/src/ui/BoundSwitch.js" afterPath="$PROJECT_DIR$/mobile/src/ui/BoundSwitch.js" />
-      <change beforePath="$PROJECT_DIR$/server/package-lock.json" afterPath="$PROJECT_DIR$/server/package-lock.json" />
-      <change beforePath="$PROJECT_DIR$/server/package.json" afterPath="$PROJECT_DIR$/server/package.json" />
-      <change beforePath="$PROJECT_DIR$/website/src/Teams/TeamList.js" afterPath="$PROJECT_DIR$/website/src/Teams/TeamList.js" />
-      <change beforePath="$PROJECT_DIR$/website/src/Teams/Teams.js" afterPath="$PROJECT_DIR$/website/src/Teams/Teams.js" />
-      <change beforePath="$PROJECT_DIR$/website/src/Users/Users.js" afterPath="$PROJECT_DIR$/website/src/Users/Users.js" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
@@ -53,11 +41,11 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
+      <pane id="AndroidView" />
+      <pane id="Scope" />
       <pane id="Scratches" />
       <pane id="ProjectPane" />
-      <pane id="Scope" />
       <pane id="PackagesPane" />
-      <pane id="AndroidView" />
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -162,7 +150,6 @@
   </component>
   <component name="ToolWindowManager">
     <frame x="-4316" y="117" width="1522" height="1014" extended-state="0" />
-    <editor active="true" />
     <layout>
       <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
       <window_info id="Palette&#9;" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />

mobile/src/API.js

@@ -61,7 +61,6 @@ class API extends EventEmitter {
         this.emit("login")
       })
       .catch((err) => {
-        console.error(err)
         AsyncStorage.removeItem(authTokenName)
         this.token = null
         this.user = {}

mobile/src/Auth/Login.js

@@ -7,7 +7,7 @@ import {
   Switch,
   TextInput,
   View,
-  Button
+  Button,
 } from "react-native"
 import { MessageModal } from "../Modal"
 import logoImage from "./images/deighton.png"
@@ -15,27 +15,29 @@ import { FormBinder } from "react-form-binder"
 import { api } from "../API"
 import { BoundSwitch, BoundInput, BoundButton } from "../ui"
 import KeyboardSpacer from "react-native-keyboard-spacer"
+import { versionInfo } from "../version"
 import autobind from "autobind-decorator"
+import { isIphoneX } from "react-native-iphone-x-helper"
 
 export class Login extends React.Component {
   static bindings = {
     email: {
       alwaysGet: true,
-      isValid: (r, v) => v !== ""
+      isValid: (r, v) => v !== "",
     },
     password: {
       alwaysGet: true,
-      isValid: (r, v) => v !== ""
+      isValid: (r, v) => v !== "",
     },
     rememberMe: {
       alwaysGet: true,
       initValue: true,
-      isValid: true
+      isValid: true,
     },
     login: {
       noValue: true,
-      isDisabled: r => !(r.anyModified && r.allValid)
+      isDisabled: (r) => !(r.anyModified && r.allValid),
-    }
+    },
   }
 
   static styles = StyleSheet.create({
@@ -44,39 +46,39 @@ export class Login extends React.Component {
       flex: 1,
       backgroundColor: "#fff",
       alignItems: "center",
-      justifyContent: "center"
+      justifyContent: "center",
     },
     logo: {
-      width: "50%"
+      width: "50%",
     },
     inputRow: {
       paddingTop: 10,
       width: "60%",
       flexDirection: "column",
       justifyContent: "flex-end",
-      alignItems: "flex-start"
+      alignItems: "flex-start",
     },
     switchRow: {
       paddingTop: 10,
       width: "60%",
       flexDirection: "row",
       justifyContent: "flex-end",
-      alignItems: "center"
+      alignItems: "center",
     },
     buttonRow: {
       paddingTop: 10,
       width: "60%",
       flexDirection: "row",
       justifyContent: "flex-end",
-      alignItems: "center"
+      alignItems: "center",
-    }
+    },
   })
 
   constructor(props) {
     super(props)
     this.state = {
       binder: new FormBinder({ email: "john@lyon-smith.org" }, Login.bindings),
-      messageModal: null
+      messageModal: null,
     }
   }
 
@@ -88,16 +90,16 @@ export class Login extends React.Component {
     if (obj) {
       api
         .login(obj.email, obj.password, obj.rememberMe)
-        .then(user => {
+        .then((user) => {
           history.replace("/home")
         })
-        .catch(error => {
+        .catch((error) => {
           this.setState({
             messageModal: {
               icon: "hand",
               message: "Unable to login",
-              detail: error.message
+              detail: error.message,
-            }
+            },
           })
         })
     }
@@ -152,6 +154,17 @@ export class Login extends React.Component {
             binder={this.state.binder}
           />
         </View>
+        <View style={{ width: "60%", alignItems: "center" }}>
+          <Text
+            style={{
+              paddingTop: 15,
+              alignSelf: "flex-end",
+              color: "lightgray",
+              fontSize: 10,
+            }}>
+            {versionInfo.version}
+          </Text>
+        </View>
         <MessageModal
           open={!!messageModal}
           icon={messageModal ? messageModal.icon : ""}
@@ -159,7 +172,7 @@ export class Login extends React.Component {
           detail={messageModal ? messageModal.detail : ""}
           onDismiss={messageModal && this.handleMessageDismiss}
         />
-        <KeyboardSpacer />
+        {Platform.OS === "ios" && <KeyboardSpacer />}
       </View>
     )
   }

mobile/src/Home/Home.js

@@ -186,7 +186,8 @@ export class Home extends React.Component {
             style={{ marginLeft: 10, marginRight: 5, tintColor: "gray" }}
           />
           <TextInput
-            style={{ flexGrow: 1, height: "100%" }}
+            style={{ flexGrow: 1, flexBasis: 0, height: "100%" }}
+            underlineColorAndroid="#F4F4F4"
             placeholder="Search"
           />
           <Icon

mobile/src/WorkItem/WorkItem.js

@@ -60,7 +60,7 @@ export class WorkItem extends React.Component {
     },
     location: {
       isValid: true,
-      isDisabled: true,
+      isReadOnly: true,
     },
     details: {
       isValid: (r, v) => v !== "",
@@ -210,6 +210,7 @@ export class WorkItem extends React.Component {
             />
           </View>
           <View style={styles.panel}>
+            <View style={{ flexDirection: "column", justifyContent: "center" }}>
               <MapView
                 style={{
                   flexDirection: "column",
@@ -218,6 +219,9 @@ export class WorkItem extends React.Component {
                   height: 400,
                   marginBottom: 10,
                 }}
+                showsBuildings={false}
+                showsTraffic={false}
+                showsIndoors={false}
                 zoomControlEnabled
                 initialRegion={{
                   latitude: 43.653908,
@@ -225,14 +229,18 @@ export class WorkItem extends React.Component {
                   latitudeDelta: 0.0922,
                   longitudeDelta: 0.0421,
                 }}
-              onRegionChange={this.handleRegionChange}>
+                onRegionChange={this.handleRegionChange}
+              />
               <Icon
                 name="target"
                 size={24}
-                style={{ alignSelf: "center" }}
                 pointerEvents={false}
+                style={{
+                  position: "absolute",
+                  alignSelf: "center",
+                }}
               />
-            </MapView>
+            </View>
             <BoundInput
               ref={(ref) => (this.latLngInput = ref)}
               binder={binder}
@@ -258,7 +266,7 @@ export class WorkItem extends React.Component {
           detail={messageModal ? messageModal.detail : ""}
           onDismiss={messageModal && this.handleMessageDismiss}
         />
-        <KeyboardSpacer />
+        {Platform.OS === "ios" && <KeyboardSpacer />}
       </View>
     )
   }

mobile/src/ui/BoundInput.js

@@ -1,6 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { TextInput, Text, View } from "react-native"
+import { TextInput, Text, View, Platform } from "react-native"
 import autobind from "autobind-decorator"
 
 export class BoundInput extends React.Component {
@@ -42,7 +42,7 @@ export class BoundInput extends React.Component {
 
   render() {
     const { label, password, name, placeholder, message, lines } = this.props
-    const { visible, disabled, value, valid } = this.state
+    const { visible, disabled, readOnly, value, valid } = this.state
 
     if (!visible) {
       return null
@@ -62,11 +62,12 @@ export class BoundInput extends React.Component {
             borderWidth: 1,
             fontSize: 16,
             paddingTop: 7,
-            paddingBottom: 7,
+            paddingBottom: Platform.OS === "ios" ? 7 : 0,
+            textAlignVertical: "top",
           }}
           multiline={lines > 1}
           numberOfLines={lines}
-          editable={!disabled}
+          editable={!disabled && !readOnly}
           autoCapitalize="none"
           underlineColorAndroid="white"
           value={value}

mobile/src/ui/Header.js

@@ -1,10 +1,13 @@
-import React, { Component } from 'react'
+import React, { Component } from "react"
-import { View, TouchableOpacity, Text } from 'react-native'
+import { View, Platform, TouchableOpacity, Text } from "react-native"
-import { Icon } from './Icon'
+import { Icon } from "./Icon"
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types"
-import { ifIphoneX } from 'react-native-iphone-x-helper'
+import { ifIphoneX } from "react-native-iphone-x-helper"
 
-const headerButtonShape = { icon: PropTypes.string.isRequired, onPress: PropTypes.func }
+const headerButtonShape = {
+  icon: PropTypes.string.isRequired,
+  onPress: PropTypes.func,
+}
 
 export class Header extends Component {
   static propTypes = {
@@ -15,8 +18,8 @@ export class Header extends Component {
   }
 
   static defaultProps = {
-    rightButton: { icon: 'none' },
+    rightButton: { icon: "none" },
-    leftButton: { icon: 'none' },
+    leftButton: { icon: "none" },
     visible: true,
   }
 
@@ -25,35 +28,49 @@ export class Header extends Component {
     let right = null
 
     if (!rightButton) {
-      right = (
+      right = <Icon name="" size={24} style={{ marginRight: 15 }} />
-        <Icon name='' size={24} style={{ marginRight: 15 }} />
-      )
     } else if (disabled) {
       right = (
-        <Icon name={rightButton.icon} size={24} style={{ marginRight: 15, tintColor: 'lightgrey' }} />
+        <Icon
+          name={rightButton.icon}
+          size={24}
+          style={{ marginRight: 15, tintColor: "lightgrey" }}
+        />
       )
     } else {
       right = (
         <TouchableOpacity onPress={rightButton.onPress}>
-          <Icon name={rightButton.icon} size={24} style={{ marginRight: 15, tintColor: 'grey' }} />
+          <Icon
+            name={rightButton.icon}
+            size={24}
+            style={{ marginRight: 15, tintColor: "grey" }}
+          />
         </TouchableOpacity>
       )
     }
 
     return (
-      <View style={{
+      <View
-        flexDirection: 'row',
+        style={[
-        justifyContent: 'space-between',
+          {
-        alignItems: 'center',
+            flexDirection: "row",
-        width: '100%',
+            justifyContent: "space-between",
+            alignItems: "center",
+            width: "100%",
             height: 45,
-        backgroundColor: '#F4F4F4',
+            backgroundColor: "#F4F4F4",
-        ...ifIphoneX({ marginTop: 50 }, { marginTop: 20 })
+          },
-      }}>
+          Platform.OS === "ios" &&
+            ifIphoneX({ marginTop: 50 }, { marginTop: 20 }),
+        ]}>
         <TouchableOpacity onPress={leftButton.onPress}>
-          <Icon name={leftButton.icon} size={24} style={{ marginLeft: 15, tintColor: 'gray' }} />
+          <Icon
+            name={leftButton.icon}
+            size={24}
+            style={{ marginLeft: 15, tintColor: "gray" }}
+          />
         </TouchableOpacity>
-        <Text style={{ color: 'gray', fontSize: 18, }}>{title}</Text>
+        <Text style={{ color: "gray", fontSize: 18 }}>{title}</Text>
         {right}
       </View>
     )

mobile/src/version.js

@@ -0,0 +1,7 @@
+export const versionInfo = {
+  version: '1.0.0',
+  fullVersion: '1.0.0-20180407.3',
+  title: 'Deighton AR System',
+  copyright: '© 2018, Kingston Software Solutions.',
+  supportEmail: 'support@kss.us.com',
+}

version.json5

@@ -3,6 +3,7 @@
     "package.json",
     "website/.env",
     "website/src/version.js",
+    "mobile/src/version.js",
     "mobile/ios/DeightonAR/info.plist",
     "mobile/android/app/build.gradle",
     "mobile/android/app/src/main/AndroidManifest.xml",