Add better sizing for pictures

mobile/src/ui/PhotoButton.js

@@ -1,31 +0,0 @@
-import React from 'react'
-import {
-  StyleSheet,
-  View,
-  Image,
-  TouchableOpacity
-} from 'react-native'
-import { Icon } from '.'
-import autobind from 'autobind-decorator'
-
-// const styles = StyleSheet.create()
-
-export class PhotoButton extends React.Component {
-  render() {
-    return (
-      <TouchableOpacity>
-        <View style={{
-          flexDirection: 'row',
-          width: 100,
-          height: 60,
-          borderWidth: 2,
-          borderColor: 'gray',
-          borderRadius: 4,
-          justifyContent: 'center',
-        }}>
-          <Icon name='add' size={24} style={{ alignSelf: 'center' }} />
-        </View>
-      </TouchableOpacity>
-    )
-  }
-}

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

mobile/src/ui/index.js

@@ -1,9 +1,9 @@
-export { Icon } from './Icon'
-export { Header } from './Header'
-export { PhotoButton } from './PhotoButton'
-export { OptionStrip } from './OptionStrip'
-export { BoundSwitch } from './BoundSwitch'
-export { BoundInput } from './BoundInput'
-export { BoundButton } from './BoundButton'
-export { BoundOptionStrip } from './BoundOptionStrip'
-export { BoundHeader } from './BoundHeader'
+export { Icon } from "./Icon"
+export { Header } from "./Header"
+export { PhotoPanel } from "./PhotoPanel"
+export { OptionStrip } from "./OptionStrip"
+export { BoundSwitch } from "./BoundSwitch"
+export { BoundInput } from "./BoundInput"
+export { BoundButton } from "./BoundButton"
+export { BoundOptionStrip } from "./BoundOptionStrip"
+export { BoundHeader } from "./BoundHeader"