diff --git a/.travis.yml b/.travis.yml
index 382f4708d0..b26d0467c2 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,7 +6,7 @@ node_js:
 
 script:
   - yarn ci
-  - yarn danger
+  - yarn danger -- --verbose
 
 deploy:
   provider: script
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d1c5fc114..a596b767ec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 #### Consignments
 
-- Users now can access stories from inside the app - orta
+- [dev] Adds component for attaching buttons to the keyboard  - orta
 - [dev] Adds component for artist search  - orta
 - [dev] Adds component for consignments todo  - orta
 - [dev] Adds a root component for the Consignments flow  - orta
@@ -11,6 +11,7 @@
 
 ### Emission
 
+- Users now can access stories from inside the app - orta
 - [dev] Upgrades React Native to v0.45 - sarah
 - [dev] Allows toggling the back button by pressing space - orta
 
diff --git a/src/lib/components/consignments/__stories__/index.tsx b/src/lib/components/consignments/__stories__/index.tsx
index c86777f448..361553a1b4 100644
--- a/src/lib/components/consignments/__stories__/index.tsx
+++ b/src/lib/components/consignments/__stories__/index.tsx
@@ -10,7 +10,7 @@ import * as search from  "./consignments-search.story"
 import * as todo from  "./consignments-todo.story"
 
 // Just a quick interface so you know the API
-interface AutoStory {
+export interface AutoStory {
   name: string,
   allStates: any[],
   component: any
diff --git a/src/lib/components/consignments/components/__tests__/__snapshots__/artist-search-results-tests.tsx.snap b/src/lib/components/consignments/components/__tests__/__snapshots__/artist-search-results-tests.tsx.snap
index 5b0d2cbabb..7fb95654a9 100644
--- a/src/lib/components/consignments/components/__tests__/__snapshots__/artist-search-results-tests.tsx.snap
+++ b/src/lib/components/consignments/components/__tests__/__snapshots__/artist-search-results-tests.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`For different states Looks right when Found four results 1`] = `
+exports[`Search states:  Looks right when Found four results 1`] = `
 <View>
   <View
     style={
@@ -272,86 +272,10 @@ exports[`For different states Looks right when Found four results 1`] = `
       </View>
     </View>
   </RCTScrollView>
-  <View
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#e5e5e5",
-          "height": 1,
-        },
-        undefined,
-      ]
-    }
-  />
-  <View
-    style={
-      Object {
-        "height": 40,
-      }
-    }
-  >
-    <View
-      accessibilityComponentType={undefined}
-      accessibilityLabel={undefined}
-      accessibilityTraits={undefined}
-      accessible={true}
-      hasTVPreferredFocus={undefined}
-      hitSlop={undefined}
-      isTVSelectable={true}
-      nativeID={undefined}
-      onLayout={undefined}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Array [
-          Object {
-            "backgroundColor": "transparent",
-          },
-          Object {
-            "alignItems": "center",
-            "backgroundColor": "rgba(0, 0, 0, 1)",
-            "flex": 1,
-            "justifyContent": "center",
-          },
-        ]
-      }
-      testID={undefined}
-      tvParallaxProperties={undefined}
-    >
-      <View>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          disabled={false}
-          ellipsizeMode="tail"
-          style={
-            Array [
-              Object {
-                "fontSize": 12,
-              },
-              Object {
-                "color": "white",
-                "opacity": 1,
-              },
-              Object {
-                "fontFamily": "Avant Garde Gothic ITCW01Dm",
-              },
-            ]
-          }
-        >
-          DONE
-        </Text>
-      </View>
-    </View>
-  </View>
 </View>
 `;
 
-exports[`For different states Looks right when Found no results 1`] = `
+exports[`Search states:  Looks right when Found no results 1`] = `
 <View>
   <View
     style={
@@ -455,86 +379,10 @@ exports[`For different states Looks right when Found no results 1`] = `
       </Text>
     </View>
   </RCTScrollView>
-  <View
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#e5e5e5",
-          "height": 1,
-        },
-        undefined,
-      ]
-    }
-  />
-  <View
-    style={
-      Object {
-        "height": 40,
-      }
-    }
-  >
-    <View
-      accessibilityComponentType={undefined}
-      accessibilityLabel={undefined}
-      accessibilityTraits={undefined}
-      accessible={true}
-      hasTVPreferredFocus={undefined}
-      hitSlop={undefined}
-      isTVSelectable={true}
-      nativeID={undefined}
-      onLayout={undefined}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Array [
-          Object {
-            "backgroundColor": "transparent",
-          },
-          Object {
-            "alignItems": "center",
-            "backgroundColor": "rgba(0, 0, 0, 1)",
-            "flex": 1,
-            "justifyContent": "center",
-          },
-        ]
-      }
-      testID={undefined}
-      tvParallaxProperties={undefined}
-    >
-      <View>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          disabled={false}
-          ellipsizeMode="tail"
-          style={
-            Array [
-              Object {
-                "fontSize": 12,
-              },
-              Object {
-                "color": "white",
-                "opacity": 1,
-              },
-              Object {
-                "fontFamily": "Avant Garde Gothic ITCW01Dm",
-              },
-            ]
-          }
-        >
-          DONE
-        </Text>
-      </View>
-    </View>
-  </View>
 </View>
 `;
 
-exports[`For different states Looks right when Found one result 1`] = `
+exports[`Search states:  Looks right when Found one result 1`] = `
 <View>
   <View
     style={
@@ -653,86 +501,10 @@ exports[`For different states Looks right when Found one result 1`] = `
       </View>
     </View>
   </RCTScrollView>
-  <View
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#e5e5e5",
-          "height": 1,
-        },
-        undefined,
-      ]
-    }
-  />
-  <View
-    style={
-      Object {
-        "height": 40,
-      }
-    }
-  >
-    <View
-      accessibilityComponentType={undefined}
-      accessibilityLabel={undefined}
-      accessibilityTraits={undefined}
-      accessible={true}
-      hasTVPreferredFocus={undefined}
-      hitSlop={undefined}
-      isTVSelectable={true}
-      nativeID={undefined}
-      onLayout={undefined}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Array [
-          Object {
-            "backgroundColor": "transparent",
-          },
-          Object {
-            "alignItems": "center",
-            "backgroundColor": "rgba(0, 0, 0, 1)",
-            "flex": 1,
-            "justifyContent": "center",
-          },
-        ]
-      }
-      testID={undefined}
-      tvParallaxProperties={undefined}
-    >
-      <View>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          disabled={false}
-          ellipsizeMode="tail"
-          style={
-            Array [
-              Object {
-                "fontSize": 12,
-              },
-              Object {
-                "color": "white",
-                "opacity": 1,
-              },
-              Object {
-                "fontFamily": "Avant Garde Gothic ITCW01Dm",
-              },
-            ]
-          }
-        >
-          DONE
-        </Text>
-      </View>
-    </View>
-  </View>
 </View>
 `;
 
-exports[`For different states Looks right when Found one result, and searching 1`] = `
+exports[`Search states:  Looks right when Found one result, and searching 1`] = `
 <View>
   <View
     style={
@@ -851,86 +623,10 @@ exports[`For different states Looks right when Found one result, and searching 1
       </View>
     </View>
   </RCTScrollView>
-  <View
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#e5e5e5",
-          "height": 1,
-        },
-        undefined,
-      ]
-    }
-  />
-  <View
-    style={
-      Object {
-        "height": 40,
-      }
-    }
-  >
-    <View
-      accessibilityComponentType={undefined}
-      accessibilityLabel={undefined}
-      accessibilityTraits={undefined}
-      accessible={true}
-      hasTVPreferredFocus={undefined}
-      hitSlop={undefined}
-      isTVSelectable={true}
-      nativeID={undefined}
-      onLayout={undefined}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Array [
-          Object {
-            "backgroundColor": "transparent",
-          },
-          Object {
-            "alignItems": "center",
-            "backgroundColor": "rgba(0, 0, 0, 1)",
-            "flex": 1,
-            "justifyContent": "center",
-          },
-        ]
-      }
-      testID={undefined}
-      tvParallaxProperties={undefined}
-    >
-      <View>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          disabled={false}
-          ellipsizeMode="tail"
-          style={
-            Array [
-              Object {
-                "fontSize": 12,
-              },
-              Object {
-                "color": "white",
-                "opacity": 1,
-              },
-              Object {
-                "fontFamily": "Avant Garde Gothic ITCW01Dm",
-              },
-            ]
-          }
-        >
-          DONE
-        </Text>
-      </View>
-    </View>
-  </View>
 </View>
 `;
 
-exports[`For different states Looks right when Found two results 1`] = `
+exports[`Search states:  Looks right when Found two results 1`] = `
 <View>
   <View
     style={
@@ -1100,86 +796,10 @@ exports[`For different states Looks right when Found two results 1`] = `
       </View>
     </View>
   </RCTScrollView>
-  <View
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#e5e5e5",
-          "height": 1,
-        },
-        undefined,
-      ]
-    }
-  />
-  <View
-    style={
-      Object {
-        "height": 40,
-      }
-    }
-  >
-    <View
-      accessibilityComponentType={undefined}
-      accessibilityLabel={undefined}
-      accessibilityTraits={undefined}
-      accessible={true}
-      hasTVPreferredFocus={undefined}
-      hitSlop={undefined}
-      isTVSelectable={true}
-      nativeID={undefined}
-      onLayout={undefined}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Array [
-          Object {
-            "backgroundColor": "transparent",
-          },
-          Object {
-            "alignItems": "center",
-            "backgroundColor": "rgba(0, 0, 0, 1)",
-            "flex": 1,
-            "justifyContent": "center",
-          },
-        ]
-      }
-      testID={undefined}
-      tvParallaxProperties={undefined}
-    >
-      <View>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          disabled={false}
-          ellipsizeMode="tail"
-          style={
-            Array [
-              Object {
-                "fontSize": 12,
-              },
-              Object {
-                "color": "white",
-                "opacity": 1,
-              },
-              Object {
-                "fontFamily": "Avant Garde Gothic ITCW01Dm",
-              },
-            ]
-          }
-        >
-          DONE
-        </Text>
-      </View>
-    </View>
-  </View>
 </View>
 `;
 
-exports[`For different states Looks right when Looking for new results 1`] = `
+exports[`Search states:  Looks right when Looking for new results 1`] = `
 <View>
   <View
     style={
@@ -1246,86 +866,10 @@ exports[`For different states Looks right when Looking for new results 1`] = `
   >
     <View />
   </RCTScrollView>
-  <View
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#e5e5e5",
-          "height": 1,
-        },
-        undefined,
-      ]
-    }
-  />
-  <View
-    style={
-      Object {
-        "height": 40,
-      }
-    }
-  >
-    <View
-      accessibilityComponentType={undefined}
-      accessibilityLabel={undefined}
-      accessibilityTraits={undefined}
-      accessible={true}
-      hasTVPreferredFocus={undefined}
-      hitSlop={undefined}
-      isTVSelectable={true}
-      nativeID={undefined}
-      onLayout={undefined}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Array [
-          Object {
-            "backgroundColor": "transparent",
-          },
-          Object {
-            "alignItems": "center",
-            "backgroundColor": "rgba(0, 0, 0, 1)",
-            "flex": 1,
-            "justifyContent": "center",
-          },
-        ]
-      }
-      testID={undefined}
-      tvParallaxProperties={undefined}
-    >
-      <View>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          disabled={false}
-          ellipsizeMode="tail"
-          style={
-            Array [
-              Object {
-                "fontSize": 12,
-              },
-              Object {
-                "color": "white",
-                "opacity": 1,
-              },
-              Object {
-                "fontFamily": "Avant Garde Gothic ITCW01Dm",
-              },
-            ]
-          }
-        >
-          DONE
-        </Text>
-      </View>
-    </View>
-  </View>
 </View>
 `;
 
-exports[`For different states Looks right when No query 1`] = `
+exports[`Search states:  Looks right when No query 1`] = `
 <View>
   <View
     style={
@@ -1392,81 +936,5 @@ exports[`For different states Looks right when No query 1`] = `
   >
     <View />
   </RCTScrollView>
-  <View
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#e5e5e5",
-          "height": 1,
-        },
-        undefined,
-      ]
-    }
-  />
-  <View
-    style={
-      Object {
-        "height": 40,
-      }
-    }
-  >
-    <View
-      accessibilityComponentType={undefined}
-      accessibilityLabel={undefined}
-      accessibilityTraits={undefined}
-      accessible={true}
-      hasTVPreferredFocus={undefined}
-      hitSlop={undefined}
-      isTVSelectable={true}
-      nativeID={undefined}
-      onLayout={undefined}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Array [
-          Object {
-            "backgroundColor": "transparent",
-          },
-          Object {
-            "alignItems": "center",
-            "backgroundColor": "rgba(0, 0, 0, 1)",
-            "flex": 1,
-            "justifyContent": "center",
-          },
-        ]
-      }
-      testID={undefined}
-      tvParallaxProperties={undefined}
-    >
-      <View>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          disabled={false}
-          ellipsizeMode="tail"
-          style={
-            Array [
-              Object {
-                "fontSize": 12,
-              },
-              Object {
-                "color": "white",
-                "opacity": 1,
-              },
-              Object {
-                "fontFamily": "Avant Garde Gothic ITCW01Dm",
-              },
-            ]
-          }
-        >
-          DONE
-        </Text>
-      </View>
-    </View>
-  </View>
 </View>
 `;
diff --git a/src/lib/components/consignments/components/__tests__/__snapshots__/artwork-consignment-todo-tests.tsx.snap b/src/lib/components/consignments/components/__tests__/__snapshots__/artwork-consignment-todo-tests.tsx.snap
index 25be6f1657..248e0941e4 100644
--- a/src/lib/components/consignments/components/__tests__/__snapshots__/artwork-consignment-todo-tests.tsx.snap
+++ b/src/lib/components/consignments/components/__tests__/__snapshots__/artwork-consignment-todo-tests.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`For different states Looks right withArtist 1`] = `
+exports[`TODO states: Looks right when Empty Metadata 1`] = `
 <View
   style={
     Array [
@@ -54,9 +54,1856 @@ exports[`For different states Looks right withArtist 1`] = `
             "marginRight": 20,
             "width": 26,
           },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      ARTIST/DESIGNER
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      PHOTOS
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      METADATA
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      LOCATION
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      PROVENANCE
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`TODO states: Looks right when With Artist 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "black",
+        "flexBasis": 0,
+        "flexGrow": 1,
+        "flexShrink": 1,
+        "paddingBottom": 20,
+        "paddingLeft": 20,
+        "paddingRight": 20,
+        "paddingTop": 20,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          Object {
+            "backgroundColor": "white",
+          },
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      ARTIST/DESIGNER
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      Glenn Brown
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      PHOTOS
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      METADATA
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      LOCATION
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      PROVENANCE
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`TODO states: Looks right when With Just Metadata 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "black",
+        "flexBasis": 0,
+        "flexGrow": 1,
+        "flexShrink": 1,
+        "paddingBottom": 20,
+        "paddingLeft": 20,
+        "paddingRight": 20,
+        "paddingTop": 20,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      ARTIST/DESIGNER
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      PHOTOS
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          Object {
+            "backgroundColor": "white",
+          },
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      METADATA
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      5/5
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      LOCATION
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      PROVENANCE
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`TODO states: Looks right when With Location 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "black",
+        "flexBasis": 0,
+        "flexGrow": 1,
+        "flexShrink": 1,
+        "paddingBottom": 20,
+        "paddingLeft": 20,
+        "paddingRight": 20,
+        "paddingTop": 20,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          Object {
+            "backgroundColor": "white",
+          },
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      ARTIST/DESIGNER
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      Glenn Brown
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          Object {
+            "backgroundColor": "white",
+          },
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      PHOTOS
+    </Text>
+    <Image
+      source={
+        Object {
+          "uri": "https://d32dm0rphc51dk.cloudfront.net/VFiyokWNcBZNlfglZND_3g/small_square.jpg",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "borderColor": "white",
+            "borderWidth": 1,
+            "height": 38,
+            "width": 38,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "rgba(0, 0, 0, 0.5)",
+              "flexBasis": 0,
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "justifyContent": "center",
+              "paddingTop": 2,
+              "width": 38,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          disabled={false}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+                "color": "white",
+                "fontFamily": "AGaramondPro-Regular",
+              },
+              undefined,
+            ]
+          }
+        >
+          2
+        </Text>
+      </View>
+    </Image>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          Object {
+            "backgroundColor": "white",
+          },
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      METADATA
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      5/5
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
           Object {
-            "backgroundColor": "white",
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      LOCATION
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={1}
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+          },
+          undefined,
+        ]
+      }
+    >
+      PROVENANCE
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "AGaramondPro-Regular",
+            "paddingTop": 6,
+            "textAlign": "right",
+          },
+          undefined,
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`TODO states: Looks right when With Long 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "black",
+        "flexBasis": 0,
+        "flexGrow": 1,
+        "flexShrink": 1,
+        "paddingBottom": 20,
+        "paddingLeft": 20,
+        "paddingRight": 20,
+        "paddingTop": 20,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 60,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "white",
+            "borderRadius": 13,
+            "borderWidth": 1,
+            "height": 26,
+            "justifyContent": "center",
+            "marginRight": 20,
+            "width": 26,
           },
+          undefined,
         ]
       }
     >
@@ -104,7 +1951,7 @@ exports[`For different states Looks right withArtist 1`] = `
         ]
       }
     >
-      Glenn Brown
+      
     </Text>
   </View>
   <View
@@ -382,7 +2229,9 @@ exports[`For different states Looks right withArtist 1`] = `
             "marginRight": 20,
             "width": 26,
           },
-          undefined,
+          Object {
+            "backgroundColor": "white",
+          },
         ]
       }
     >
@@ -431,7 +2280,7 @@ exports[`For different states Looks right withArtist 1`] = `
         ]
       }
     >
-      
+      This is a long long long run on sentence that should break correctly.
     </Text>
   </View>
   <View
@@ -448,7 +2297,7 @@ exports[`For different states Looks right withArtist 1`] = `
 </View>
 `;
 
-exports[`For different states Looks right withLocation 1`] = `
+exports[`TODO states: Looks right when With Metadata 1`] = `
 <View
   style={
     Array [
@@ -802,9 +2651,7 @@ exports[`For different states Looks right withLocation 1`] = `
             "marginRight": 20,
             "width": 26,
           },
-          Object {
-            "backgroundColor": "white",
-          },
+          undefined,
         ]
       }
     >
@@ -852,7 +2699,7 @@ exports[`For different states Looks right withLocation 1`] = `
         ]
       }
     >
-      Huddersfield, UK
+      
     </Text>
   </View>
   <View
@@ -957,7 +2804,7 @@ exports[`For different states Looks right withLocation 1`] = `
 </View>
 `;
 
-exports[`For different states Looks right withMetadata 1`] = `
+exports[`TODO states: Looks right when With One 1`] = `
 <View
   style={
     Array [
@@ -1181,7 +3028,7 @@ exports[`For different states Looks right withMetadata 1`] = `
             ]
           }
         >
-          2
+          1
         </Text>
       </View>
     </Image>
@@ -1222,9 +3069,7 @@ exports[`For different states Looks right withMetadata 1`] = `
             "marginRight": 20,
             "width": 26,
           },
-          Object {
-            "backgroundColor": "white",
-          },
+          undefined,
         ]
       }
     >
@@ -1272,7 +3117,7 @@ exports[`For different states Looks right withMetadata 1`] = `
         ]
       }
     >
-      5/5
+      
     </Text>
   </View>
   <View
@@ -1464,7 +3309,7 @@ exports[`For different states Looks right withMetadata 1`] = `
 </View>
 `;
 
-exports[`For different states Looks right withPhotos 1`] = `
+exports[`TODO states: Looks right when With Photos 1`] = `
 <View
   style={
     Array [
@@ -1969,7 +3814,7 @@ exports[`For different states Looks right withPhotos 1`] = `
 </View>
 `;
 
-exports[`For different states Looks right withProvenance 1`] = `
+exports[`TODO states: Looks right when With Provenance 1`] = `
 <View
   style={
     Array [
diff --git a/src/lib/components/consignments/components/__tests__/__snapshots__/bottom-aligned-button-tests.tsx.snap b/src/lib/components/consignments/components/__tests__/__snapshots__/bottom-aligned-button-tests.tsx.snap
new file mode 100644
index 0000000000..cbbc775ecf
--- /dev/null
+++ b/src/lib/components/consignments/components/__tests__/__snapshots__/bottom-aligned-button-tests.tsx.snap
@@ -0,0 +1,288 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Bottom-Aligned states:  Looks right when With a Text element 1`] = `
+<View
+  keyboardVerticalOffset={60}
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      Object {
+        "paddingBottom": 0,
+      },
+    ]
+  }
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    disabled={false}
+    ellipsizeMode="tail"
+    style={
+      Object {
+        "color": "white",
+      }
+    }
+  >
+    hi
+  </Text>
+  <View
+    style={
+      Object {
+        "flexGrow": 1,
+      }
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    isTVSelectable={true}
+    nativeID={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "height": 56,
+        "marginBottom": 20,
+        "opacity": 1,
+        "paddingTop": 18,
+      }
+    }
+    testID={undefined}
+    tvParallaxProperties={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+            "fontSize": 14,
+            "textAlign": "center",
+          },
+          undefined,
+        ]
+      }
+    >
+      DONE
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Bottom-Aligned states:  Looks right when With an Artist Search Results Component 1`] = `
+<View
+  keyboardVerticalOffset={60}
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      Object {
+        "paddingBottom": 0,
+      },
+    ]
+  }
+>
+  <View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        autoCorrect={false}
+        autoFocus={false}
+        clearButtonMode="while-editing"
+        defaultValue="Artist/Designer Name"
+        keyboardAppearance="dark"
+        onChangeText={undefined}
+        placeholderTextColor="#cccccc"
+        returnKeyType="search"
+        selectionColor="#cccccc"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "black",
+              "borderBottomColor": "white",
+              "borderBottomWidth": 1,
+              "color": "white",
+              "flexBasis": 0,
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "AGaramondPro-Regular",
+              "fontSize": 20,
+              "height": 40,
+            },
+            undefined,
+          ]
+        }
+        value="Banko"
+      />
+      <ActivityIndicator
+        animating={false}
+        color="#999999"
+        hidesWhenStopped={true}
+        size="small"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#e5e5e5",
+            "height": 1,
+          },
+          undefined,
+        ]
+      }
+    />
+    <RCTScrollView
+      scrollEnabled={null}
+      style={
+        Object {
+          "height": 182,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <View>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          disabled={false}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#cccccc",
+                "fontFamily": "AGaramondPro-Regular",
+                "fontSize": 17,
+              },
+              undefined,
+            ]
+          }
+        >
+          Unfortunately we are not accepting consignments for works by 
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            disabled={false}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#cccccc",
+                  "fontFamily": "AGaramondPro-Italic",
+                  "fontSize": 17,
+                },
+                undefined,
+              ]
+            }
+          >
+            Banko
+          </Text>
+        </Text>
+      </View>
+    </RCTScrollView>
+  </View>
+  <View
+    style={
+      Object {
+        "flexGrow": 1,
+      }
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e5e5e5",
+          "height": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    isTVSelectable={true}
+    nativeID={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "height": 56,
+        "marginBottom": 20,
+        "opacity": 1,
+        "paddingTop": 18,
+      }
+    }
+    testID={undefined}
+    tvParallaxProperties={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      disabled={false}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "fontFamily": "Avant Garde Gothic ITCW01Dm",
+            "fontSize": 14,
+            "textAlign": "center",
+          },
+          undefined,
+        ]
+      }
+    >
+      DONE
+    </Text>
+  </View>
+</View>
+`;
diff --git a/src/lib/components/consignments/components/__tests__/artist-search-results-tests.tsx b/src/lib/components/consignments/components/__tests__/artist-search-results-tests.tsx
index 5dea00869f..96960cde0c 100644
--- a/src/lib/components/consignments/components/__tests__/artist-search-results-tests.tsx
+++ b/src/lib/components/consignments/components/__tests__/artist-search-results-tests.tsx
@@ -1,19 +1,4 @@
-import "react-native"
+import * as Search from "../../__stories__/consignments-search.story"
+import storyRunner from "./runner"
 
-import * as React from "react"
-import * as renderer from "react-test-renderer"
-
-import { allStates } from "../../__stories__/consignments-search.story"
-
-import Search from "../artist-search-results"
-
-describe("For different states", () => {
-  allStates.forEach(test => {
-    const name = Object.keys(test)[0]
-    const state = test[name]
-    it(`Looks right when ${name}`, () => {
-      const todo = renderer.create(<Search {...state}/>)
-      expect(todo.toJSON()).toMatchSnapshot()
-    })
-  })
-})
+storyRunner("Search states: ", Search)
diff --git a/src/lib/components/consignments/components/__tests__/artwork-consignment-todo-tests.tsx b/src/lib/components/consignments/components/__tests__/artwork-consignment-todo-tests.tsx
index 2c6224e487..8c9244f3bd 100644
--- a/src/lib/components/consignments/components/__tests__/artwork-consignment-todo-tests.tsx
+++ b/src/lib/components/consignments/components/__tests__/artwork-consignment-todo-tests.tsx
@@ -1,20 +1,4 @@
-import "react-native"
+import * as TODO from "../../__stories__/consignments-todo.story"
+import storyRunner from "./runner"
 
-import * as React from "react"
-import * as renderer from "react-test-renderer"
-
-import { allStates } from "../../__stories__/consignments-todo.story"
-
-import TODO from "../artwork-consignment-todo"
-
-describe("For different states", () => {
-  for (const key in allStates) {
-    if (allStates.hasOwnProperty(key)) {
-      const state = allStates[key]
-      it(`Looks right ${key}`, () => {
-        const todo = renderer.create(<TODO {...state}/>)
-        expect(todo.toJSON()).toMatchSnapshot()
-      })
-    }
-  }
-})
+storyRunner("TODO states:", TODO)
diff --git a/src/lib/components/consignments/components/__tests__/bottom-aligned-button-tests.tsx b/src/lib/components/consignments/components/__tests__/bottom-aligned-button-tests.tsx
new file mode 100644
index 0000000000..a4d2f6365c
--- /dev/null
+++ b/src/lib/components/consignments/components/__tests__/bottom-aligned-button-tests.tsx
@@ -0,0 +1,4 @@
+import * as BottomAligned from "../../__stories__/consignments-bottom-aligned.story"
+import storyRunner from "./runner"
+
+storyRunner("Bottom-Aligned states: ", BottomAligned)
diff --git a/src/lib/components/consignments/components/__tests__/runner.tsx b/src/lib/components/consignments/components/__tests__/runner.tsx
new file mode 100644
index 0000000000..3fa577f833
--- /dev/null
+++ b/src/lib/components/consignments/components/__tests__/runner.tsx
@@ -0,0 +1,23 @@
+import "react-native"
+
+import * as React from "react"
+import * as renderer from "react-test-renderer"
+
+import { AutoStory } from "../../__stories__"
+
+const runTests = (title: string, storybook: AutoStory) => {
+  describe(title, () => {
+    storybook.allStates.forEach(test => {
+      const name = Object.keys(test)[0]
+      const state = test[name]
+
+      it(`Looks right when ${name}`, () => {
+        const todo = renderer.create(<storybook.component {...state} />)
+        expect(todo.toJSON()).toMatchSnapshot()
+      })
+
+    })
+  })
+}
+
+export default runTests
diff --git a/src/lib/components/consignments/components/artist-search-results.tsx b/src/lib/components/consignments/components/artist-search-results.tsx
index b355c77e46..572210c466 100644
--- a/src/lib/components/consignments/components/artist-search-results.tsx
+++ b/src/lib/components/consignments/components/artist-search-results.tsx
@@ -5,8 +5,6 @@ import styled from "styled-components/native"
 import colors from "../../../../data/colors"
 import fonts from "../../../../data/fonts"
 
-import Button from "../../buttons/inverted_button"
-
 const Input = styled.TextInput`
   height: 40
   backgroundColor: black
diff --git a/src/lib/components/consignments/components/bottom-aligned-button.tsx b/src/lib/components/consignments/components/bottom-aligned-button.tsx
index f860122e88..99092550c3 100644
--- a/src/lib/components/consignments/components/bottom-aligned-button.tsx
+++ b/src/lib/components/consignments/components/bottom-aligned-button.tsx
@@ -14,7 +14,7 @@ const ButtonText = styled.Text`
 `
 
 const Body = styled.TouchableOpacity`
-  height: 40
+  height: 56
   margin-bottom: 20
   padding-top: 18
 `