Fix photo panel sizing

mobile/src/Auth/DefaultRoute.js

@@ -3,5 +3,5 @@ import { Route, Redirect } from "react-router-native"
 
 export const DefaultRoute = () => {
   // NOTE: When working on the app, change this to the page you are working on
-  return <Route render={() => <Redirect to={"/home"} />} />
+  return <Route render={() => <Redirect to={"/workItem"} />} />
 }

mobile/src/config.js

@@ -7,25 +7,25 @@ export const config = {
   googleGeocodeAPIKey: "AIzaSyCs4JVT6gysnY5dAJ7KjVJYeykLv_xz1GI",
   googleGeocodeURL: "https://maps.googleapis.com/maps/api/geocode/json",
   refererURL: "https://dar.kss.us.com",
-  //defaultUser: "john@lyon-smith.org",
-  defaultUser: "",
+  defaultUser: "john@lyon-smith.org",
+  // defaultUser: "",
   minGPSAccuracy: 100,
   //minGPSAccuracy: 20,
   minDistanceToItem: 10,
   geocodeDelayMilliseconds: 500,
   // This region is downtown Toronto
-  initialRegion: {
-    latitude: 43.653908,
-    longitude: -79.384293,
-    latitudeDelta: 0.0922,
-    longitudeDelta: 0.0421,
-  },
-  // This region is Bainbridge Island
   // initialRegion: {
-  //   latitude: 47.629536,
-  //   longitude: -122.524162,
+  //   latitude: 43.653908,
+  //   longitude: -79.384293,
   //   latitudeDelta: 0.0922,
   //   longitudeDelta: 0.0421,
   // },
+  // This region is Bainbridge Island
+  initialRegion: {
+    latitude: 47.629536,
+    longitude: -122.524162,
+    latitudeDelta: 0.0922,
+    longitudeDelta: 0.0421,
+  },
   alwaysShowWorkItemInAR: true,
 }

mobile/src/ui/BoundPhotoPanel.js

@@ -23,6 +23,8 @@ const getScreenPortraitDimensions = () => {
   }
 }
 
+const photoSpacing = 10
+
 export class BoundPhotoPanel extends Component {
   static propTypes = {
     onUploadStarted: PropTypes.func,
@@ -88,15 +90,25 @@ export class BoundPhotoPanel extends Component {
     )
   }
 
-  render() {
-    const { screenWidth, screenHeight } = getScreenPortraitDimensions()
-    const photoWidth = screenHeight / 4
-    const photoHeight = screenWidth / 4
-    const rowPadding = 10
-    const { value: assetIds } = this.state
+  @autobind
+  handleLayout(e) {
+    if (!this.state.photoSize) {
+      const { layout } = e.nativeEvent
+      const { screenWidth, screenHeight } = getScreenPortraitDimensions()
+      const ratio = screenWidth / screenHeight
+      const width = (layout.width - photoSpacing) / 2
+      const height = width / ratio
 
-    const renderPhoto = (index) => {
+      this.setState({ photoSize: { width, height } })
+    }
+  }
+
+  render() {
+    const { photoSize, value: assetIds } = this.state
+
+    const renderPhoto = (index, size, paddingRight) => {
       const assetId = assetIds[index]
+      const { photoSize } = this.state
 
       if (assetId) {
         console.log(api.makeImageUrl(assetId))
@@ -106,8 +118,9 @@ export class BoundPhotoPanel extends Component {
         <TouchableOpacity
           key={assetId || "blank" + index.toString()}
           style={{
-            width: photoWidth,
-            height: photoHeight,
+            width: size.width,
+            height: size.height,
+            paddingRight,
             borderWidth: 2,
             borderColor: "gray",
             borderRadius: 4,
@@ -128,18 +141,13 @@ export class BoundPhotoPanel extends Component {
       )
     }
 
-    const extraRowStyle = {
-      height: photoHeight + rowPadding,
-      paddingTop: rowPadding / 2,
-      paddingBottom: rowPadding / 2,
-    }
-
     return (
       <View
         style={{
           flexDirection: "column",
           justifyContent: "space-between",
-        }}>
+        }}
+        onLayout={this.handleLayout}>
         <Text
           style={{
             fontSize: 14,
@@ -147,14 +155,18 @@ export class BoundPhotoPanel extends Component {
           }}>
           Pictures:
         </Text>
-        <View style={[styles.photoRow, extraRowStyle]}>
-          {renderPhoto(0)}
-          {renderPhoto(1)}
-        </View>
-        <View style={[styles.photoRow, extraRowStyle]}>
-          {renderPhoto(2)}
-          {renderPhoto(3)}
-        </View>
+        {photoSize && (
+          <View style={styles.photoRow}>
+            {renderPhoto(0, photoSize, photoSpacing)}
+            {renderPhoto(1, photoSize)}
+          </View>
+        )}
+        {photoSize && (
+          <View style={styles.photoRow}>
+            {renderPhoto(2, photoSize, photoSpacing)}
+            {renderPhoto(3, photoSize)}
+          </View>
+        )}
       </View>
     )
   }
@@ -165,5 +177,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     width: "100%",
+    paddingTop: 5,
+    paddingBottom: 5,
   },
 })