Fix layout issues on Android

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>
     )
   }