Fix photo panel sizing

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