Add better sizing for pictures

mobile/src/ui/PhotoPanel.js

@@ -0,0 +1,74 @@
+import React, { Component } from "react"
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  Dimensions,
+} from "react-native"
+import { Icon } from "."
+import autobind from "autobind-decorator"
+
+const getScreenPortraitDimensions = () => {
+  const { width, height } = Dimensions.get("window")
+
+  return {
+    screenWidth: Math.min(width, height),
+    screenHeight: Math.max(width, height),
+  }
+}
+
+export class PhotoPanel extends Component {
+  render() {
+    const { screenWidth, screenHeight } = getScreenPortraitDimensions()
+    const photoWidth = screenHeight / 4
+    const photoHeight = screenWidth / 4
+    const numRows = 2
+    const numCols = 2
+    const rowPadding = 10
+
+    return (
+      <View
+        style={{
+          flexDirection: "column",
+          justifyContent: "space-between",
+        }}>
+        <Text
+          style={{
+            fontSize: 14,
+            marginBottom: 4,
+          }}>
+          Pictures:
+        </Text>
+        {Array.from(new Array(numRows), (x, i) => (
+          <View
+            key={"r" + i.toString()}
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              width: "100%",
+              height: photoHeight + rowPadding,
+              paddingTop: rowPadding / 2,
+              paddingBottom: rowPadding / 2,
+            }}>
+            {Array.from(new Array(numCols), (y, j) => (
+              <TouchableOpacity
+                key={"r" + i.toString() + "c" + j.toString()}
+                style={{
+                  width: photoWidth,
+                  height: photoHeight,
+                  borderWidth: 2,
+                  borderColor: "gray",
+                  borderRadius: 4,
+                  justifyContent: "center",
+                }}>
+                <Icon name="add" size={24} style={{ alignSelf: "center" }} />
+              </TouchableOpacity>
+            ))}
+          </View>
+        ))}
+      </View>
+    )
+  }
+}