@aws-amplify/ui-react-native 1.0.0 → 1.1.0

package/src/Authenticator/Defaults/SignUp/__tests__/__snapshots__/SignUp.spec.tsx.snap

@@ -0,0 +1,3019 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SignUp renders as expected 1`] = `
+Array [
+  <Text
+    accessibilityRole="header"
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 24,
+          "fontWeight": "300",
+          "lineHeight": 36,
+        },
+        Object {
+          "marginVertical": 12,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    Create Account
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Object {
+            "paddingHorizontal": 12,
+          },
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Username"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Username
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Username"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Password"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Password
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Password"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          secureTextEntry={true}
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+        <View
+          accessibilityLabel="Show password"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {},
+              null,
+              null,
+              undefined,
+            ]
+          }
+        >
+          <Image
+            accessibilityRole="image"
+            source={
+              Object {
+                "testUri": "../../../src/assets/icons/visibilityOff.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 16,
+                  "resizeMode": "contain",
+                  "tintColor": undefined,
+                  "width": 16,
+                },
+                Array [
+                  Object {
+                    "tintColor": "hsl(210, 10%, 40%)",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Confirm Password"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Confirm Password
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Confirm Password"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          secureTextEntry={true}
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+        <View
+          accessibilityLabel="Show password"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {},
+              null,
+              null,
+              undefined,
+            ]
+          }
+        >
+          <Image
+            accessibilityRole="image"
+            source={
+              Object {
+                "testUri": "../../../src/assets/icons/visibilityOff.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 16,
+                  "resizeMode": "contain",
+                  "tintColor": undefined,
+                  "width": 16,
+                },
+                Array [
+                  Object {
+                    "tintColor": "hsl(210, 10%, 40%)",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Phone"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              Array [
+                Object {},
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Phone
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          keyboardType="phone-pad"
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Phone"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Array [
+                Object {},
+                Object {},
+              ],
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "backgroundColor": "hsl(190, 95%, 30%)",
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 0%, 100%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Create Account
+    </Text>
+  </View>,
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <View
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 4,
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 12,
+          },
+          Object {},
+          null,
+          null,
+          Object {
+            "marginVertical": 8,
+            "minWidth": "50%",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "hsl(190, 95%, 30%)",
+              "fontSize": 16,
+              "fontWeight": "700",
+              "textAlign": "center",
+            },
+            undefined,
+          ]
+        }
+      >
+        Sign In
+      </Text>
+    </View>
+  </View>,
+]
+`;
+
+exports[`SignUp renders as expected when hideSignIn is true 1`] = `
+Array [
+  <Text
+    accessibilityRole="header"
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 24,
+          "fontWeight": "300",
+          "lineHeight": 36,
+        },
+        Object {
+          "marginVertical": 12,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    Create Account
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Object {
+            "paddingHorizontal": 12,
+          },
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Username"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Username
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Username"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Password"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Password
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Password"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          secureTextEntry={true}
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+        <View
+          accessibilityLabel="Show password"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {},
+              null,
+              null,
+              undefined,
+            ]
+          }
+        >
+          <Image
+            accessibilityRole="image"
+            source={
+              Object {
+                "testUri": "../../../src/assets/icons/visibilityOff.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 16,
+                  "resizeMode": "contain",
+                  "tintColor": undefined,
+                  "width": 16,
+                },
+                Array [
+                  Object {
+                    "tintColor": "hsl(210, 10%, 40%)",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Confirm Password"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Confirm Password
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Confirm Password"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          secureTextEntry={true}
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+        <View
+          accessibilityLabel="Show password"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {},
+              null,
+              null,
+              undefined,
+            ]
+          }
+        >
+          <Image
+            accessibilityRole="image"
+            source={
+              Object {
+                "testUri": "../../../src/assets/icons/visibilityOff.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 16,
+                  "resizeMode": "contain",
+                  "tintColor": undefined,
+                  "width": 16,
+                },
+                Array [
+                  Object {
+                    "tintColor": "hsl(210, 10%, 40%)",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Phone"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              Array [
+                Object {},
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Phone
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          keyboardType="phone-pad"
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Phone"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Array [
+                Object {},
+                Object {},
+              ],
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "backgroundColor": "hsl(190, 95%, 30%)",
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 0%, 100%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Create Account
+    </Text>
+  </View>,
+]
+`;
+
+exports[`SignUp renders as expected when isPending is true 1`] = `
+Array [
+  <Text
+    accessibilityRole="header"
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 24,
+          "fontWeight": "300",
+          "lineHeight": 36,
+        },
+        Object {
+          "marginVertical": 12,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    Create Account
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Object {
+            "paddingHorizontal": 12,
+          },
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Username"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Username
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "opacity": 0.6,
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={false}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Username"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Password"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Password
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "opacity": 0.6,
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={false}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Password"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          secureTextEntry={true}
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+        <View
+          accessibilityLabel="Show password"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {},
+              Object {
+                "opacity": 0.6,
+              },
+              null,
+              undefined,
+            ]
+          }
+        >
+          <Image
+            accessibilityRole="image"
+            source={
+              Object {
+                "testUri": "../../../src/assets/icons/visibilityOff.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 16,
+                  "resizeMode": "contain",
+                  "tintColor": undefined,
+                  "width": 16,
+                },
+                Array [
+                  Object {
+                    "tintColor": "hsl(210, 10%, 40%)",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Confirm Password"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Confirm Password
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "opacity": 0.6,
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={false}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Confirm Password"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          secureTextEntry={true}
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+        <View
+          accessibilityLabel="Show password"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {},
+              Object {
+                "opacity": 0.6,
+              },
+              null,
+              undefined,
+            ]
+          }
+        >
+          <Image
+            accessibilityRole="image"
+            source={
+              Object {
+                "testUri": "../../../src/assets/icons/visibilityOff.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 16,
+                  "resizeMode": "contain",
+                  "tintColor": undefined,
+                  "width": 16,
+                },
+                Array [
+                  Object {
+                    "tintColor": "hsl(210, 10%, 40%)",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Phone"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              Array [
+                Object {},
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Phone
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "opacity": 0.6,
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={false}
+          keyboardType="phone-pad"
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Phone"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Array [
+                Object {},
+                Object {},
+              ],
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "backgroundColor": "hsl(190, 95%, 30%)",
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 0%, 100%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Creating Account
+    </Text>
+  </View>,
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <View
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 4,
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 12,
+          },
+          Object {},
+          null,
+          null,
+          Object {
+            "marginVertical": 8,
+            "minWidth": "50%",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "hsl(190, 95%, 30%)",
+              "fontSize": 16,
+              "fontWeight": "700",
+              "textAlign": "center",
+            },
+            undefined,
+          ]
+        }
+      >
+        Sign In
+      </Text>
+    </View>
+  </View>,
+]
+`;
+
+exports[`SignUp renders as expected with errors 1`] = `
+Array [
+  <Text
+    accessibilityRole="header"
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 24,
+          "fontWeight": "300",
+          "lineHeight": 36,
+        },
+        Object {
+          "marginVertical": 12,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    Create Account
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Object {
+            "paddingHorizontal": 12,
+          },
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Username"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Username
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Username"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Password"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Password
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Password"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          secureTextEntry={true}
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+        <View
+          accessibilityLabel="Show password"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {},
+              null,
+              null,
+              undefined,
+            ]
+          }
+        >
+          <Image
+            accessibilityRole="image"
+            source={
+              Object {
+                "testUri": "../../../src/assets/icons/visibilityOff.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 16,
+                  "resizeMode": "contain",
+                  "tintColor": undefined,
+                  "width": 16,
+                },
+                Array [
+                  Object {
+                    "tintColor": "hsl(210, 10%, 40%)",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Confirm Password"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Confirm Password
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Confirm Password"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          secureTextEntry={true}
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+        <View
+          accessibilityLabel="Show password"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {},
+              null,
+              null,
+              undefined,
+            ]
+          }
+        >
+          <Image
+            accessibilityRole="image"
+            source={
+              Object {
+                "testUri": "../../../src/assets/icons/visibilityOff.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 16,
+                  "resizeMode": "contain",
+                  "tintColor": undefined,
+                  "width": 16,
+                },
+                Array [
+                  Object {
+                    "tintColor": "hsl(210, 10%, 40%)",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Phone"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              Array [
+                Object {},
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Phone
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          keyboardType="phone-pad"
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Phone"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Array [
+                Object {},
+                Object {},
+              ],
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>,
+  <View
+    accessibilityRole="alert"
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "hsl(0, 75%, 85%)",
+          "flexDirection": "row",
+          "paddingHorizontal": 8,
+          "paddingVertical": 32,
+        },
+        Object {
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Image
+      accessibilityRole="image"
+      source={
+        Object {
+          "testUri": "../../../src/assets/icons/error.png",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "height": 20,
+            "resizeMode": "contain",
+            "tintColor": undefined,
+            "width": 20,
+          },
+          Object {
+            "margin": 8,
+          },
+        ]
+      }
+    />
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 100%, 20%)",
+            "flex": 1,
+            "paddingHorizontal": 8,
+          },
+          Object {},
+        ]
+      }
+    >
+      Something went wrong
+    </Text>
+  </View>,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "backgroundColor": "hsl(190, 95%, 30%)",
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 0%, 100%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Create Account
+    </Text>
+  </View>,
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <View
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 4,
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 12,
+          },
+          Object {},
+          null,
+          null,
+          Object {
+            "marginVertical": 8,
+            "minWidth": "50%",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "hsl(190, 95%, 30%)",
+              "fontSize": 16,
+              "fontWeight": "700",
+              "textAlign": "center",
+            },
+            undefined,
+          ]
+        }
+      >
+        Sign In
+      </Text>
+    </View>
+  </View>,
+]
+`;
+
+exports[`SignUp renders as expected with validationErrors 1`] = `
+Array [
+  <Text
+    accessibilityRole="header"
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 24,
+          "fontWeight": "300",
+          "lineHeight": 36,
+        },
+        Object {
+          "marginVertical": 12,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    Create Account
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Object {
+            "paddingHorizontal": 12,
+          },
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Username"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Username
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "opacity": 0.6,
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={false}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Username"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "paddingHorizontal": 16,
+          "paddingVertical": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "hsl(0, 100%, 20%)",
+            "paddingVertical": 1,
+          }
+        }
+      >
+        error
+      </Text>
+      <Text
+        style={
+          Object {
+            "color": "hsl(0, 100%, 20%)",
+            "paddingVertical": 1,
+          }
+        }
+      >
+        another error
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Password"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Password
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "opacity": 0.6,
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={false}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Password"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          secureTextEntry={true}
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+        <View
+          accessibilityLabel="Show password"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {},
+              Object {
+                "opacity": 0.6,
+              },
+              null,
+              undefined,
+            ]
+          }
+        >
+          <Image
+            accessibilityRole="image"
+            source={
+              Object {
+                "testUri": "../../../src/assets/icons/visibilityOff.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 16,
+                  "resizeMode": "contain",
+                  "tintColor": undefined,
+                  "width": 16,
+                },
+                Array [
+                  Object {
+                    "tintColor": "hsl(210, 10%, 40%)",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Confirm Password"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Confirm Password
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "opacity": 0.6,
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={false}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Confirm Password"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          secureTextEntry={true}
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+        <View
+          accessibilityLabel="Show password"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {},
+              Object {
+                "opacity": 0.6,
+              },
+              null,
+              undefined,
+            ]
+          }
+        >
+          <Image
+            accessibilityRole="image"
+            source={
+              Object {
+                "testUri": "../../../src/assets/icons/visibilityOff.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 16,
+                  "resizeMode": "contain",
+                  "tintColor": undefined,
+                  "width": 16,
+                },
+                Array [
+                  Object {
+                    "tintColor": "hsl(210, 10%, 40%)",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Array [
+            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
+          ],
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Phone"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              Array [
+                Object {},
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Phone
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "opacity": 0.6,
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={false}
+          keyboardType="phone-pad"
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Phone"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Array [
+                Object {},
+                Object {},
+              ],
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "backgroundColor": "hsl(190, 95%, 30%)",
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 0%, 100%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Creating Account
+    </Text>
+  </View>,
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <View
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 4,
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 12,
+          },
+          Object {},
+          null,
+          null,
+          Object {
+            "marginVertical": 8,
+            "minWidth": "50%",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "hsl(190, 95%, 30%)",
+              "fontSize": 16,
+              "fontWeight": "700",
+              "textAlign": "center",
+            },
+            undefined,
+          ]
+        }
+      >
+        Sign In
+      </Text>
+    </View>
+  </View>,
+]
+`;