Add better sizing for pictures

mobile/src/Home/Home.js

@@ -9,17 +9,19 @@ import {
   TouchableOpacity,
   TouchableHighlight,
   PermissionsAndroid,
-  AsyncStorage,
+  Platform,
 } from "react-native"
 import MapView, { Marker } from "react-native-maps"
 import { Icon, Header } from "../ui"
+import { MessageModal } from "../Modal"
 import { api } from "../API"
 import autobind from "autobind-decorator"
 import { ifIphoneX } from "react-native-iphone-x-helper"
 import { workItemTypeText, pad, regionContainingPoints } from "../util"
-import { ensurePermission } from "../App"
+import { ensurePermissions } from "../App"
 import { versionInfo } from "../version"
 import { minGPSAccuracy } from "../config"
+import KeyboardSpacer from "react-native-keyboard-spacer"
 import pinImage from "./images/pin.png"
 
 const neverAskForLocationPermissionKeyName = "NeverAskForLocationPermission"
@@ -38,38 +40,50 @@ export class Home extends React.Component {
         longitudeDelta: 0.0922,
       },
       positionInfo: null,
-      allowCameraAccess: false,
+      disableARViewer: true,
     }
 
-    ensurePermission(
-      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
-      neverAskForLocationPermissionKeyName,
+    ensurePermissions(
+      [
+        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+        PermissionsAndroid.PERMISSIONS.CAMERA,
+      ],
       {
         title: versionInfo.title,
         message:
-          "This app needs access to your location so that " +
-          "you can find and access the geo located items.",
+          "This app needs these permissions so that you can " +
+          "find, access and photograph geo located items.",
       },
-      () => {
-        this.watchId = navigator.geolocation.watchPosition(
-          this.handlePositionChange,
-          null,
-          { distanceFilter: 10 }
-        )
-      }
-    )
+      (results) => {
+        if (
+          results[PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION] ===
+          PermissionsAndroid.RESULTS.GRANTED
+        ) {
+          this.watchId = navigator.geolocation.watchPosition(
+            this.handlePositionChange,
+            null,
+            { distanceFilter: 10 }
+          )
+        }
 
-    ensurePermission(
-      PermissionsAndroid.PERMISSIONS.CAMERA,
-      neverAskForCameraKeyName,
-      {
-        title: versionInfo.title,
-        message:
-          "This app needs access to your camera so that " +
-          "you can view AR items.",
+        if (
+          results[PermissionsAndroid.PERMISSIONS.CAMERA] ===
+          PermissionsAndroid.RESULTS.GRANTED
+        ) {
+          this.setState({ disableARViewer: false })
+        }
       },
       () => {
-        this.setState({ allowCameraAccess: true })
+        this.setState({
+          messageModal: {
+            icon: "hand",
+            message:
+              "You have denied the app access to phone features it needs to function. " +
+              "Some parts of the app are disabled. To enable these features in future " +
+              "please go to Settings.",
+            detail: "",
+          },
+        })
       }
     )
 
@@ -96,6 +110,11 @@ export class Home extends React.Component {
     }
   }
 
+  @autobind
+  handleMessageDismiss() {
+    this.setState({ messageModal: null })
+  }
+
   @autobind
   handlePositionChange(positionInfo) {
     this.setState({ positionInfo })
@@ -150,7 +169,14 @@ export class Home extends React.Component {
   }
 
   render() {
-    const { sections, showWorkItems, region, positionInfo } = this.state
+    const {
+      sections,
+      showWorkItems,
+      region,
+      positionInfo,
+      messageModal,
+      disableARViewer,
+    } = this.state
 
     return (
       <View
@@ -164,7 +190,8 @@ export class Home extends React.Component {
           leftButton={{ icon: "logout", onPress: this.handleLogoutPress }}
           rightButton={{ icon: "glasses", onPress: this.handleGlassesPress }}
           disabled={
-            !(positionInfo && positionInfo.coords.accuracy <= minGPSAccuracy)
+            !(positionInfo && positionInfo.coords.accuracy <= minGPSAccuracy) ||
+            disableARViewer
           }
         />
         <MapView
@@ -347,6 +374,14 @@ export class Home extends React.Component {
             />
           </TouchableOpacity>
         </View>
+        <MessageModal
+          open={!!messageModal}
+          icon={messageModal ? messageModal.icon : ""}
+          message={messageModal ? messageModal.message : ""}
+          detail={messageModal ? messageModal.detail : ""}
+          onDismiss={messageModal && this.handleMessageDismiss}
+        />
+        {Platform.OS === "ios" && <KeyboardSpacer />}
       </View>
     )
   }