@aws-amplify/ui-react-native 1.2.22 → 1.2.24

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

@@ -1,3122 +0,0 @@
-// 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": "500",
-          "lineHeight": 36,
-        },
-        Object {
-          "marginVertical": 12,
-          "paddingHorizontal": 12,
-        },
-      ]
-    }
-  >
-    Create Account
-  </Text>,
-  <View
-    style={
-      Object {
-        "paddingBottom": 8,
-      }
-    }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Object {
-            "paddingHorizontal": 12,
-          },
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Username"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Username
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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%)"
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "paddingVertical": 12,
-              },
-              Object {},
-            ]
-          }
-        />
-      </View>
-    </View>
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Password"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Password
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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}
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "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 {},
-              undefined,
-              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>
-    <TextInput
-      accessibilityElementsHidden={true}
-      pointerEvents="none"
-      style={
-        Object {
-          "backgroundColor": "transparent",
-          "height": 0.1,
-          "width": 0.1,
-        }
-      }
-    />
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Confirm Password"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Confirm Password
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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}
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "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 {},
-              undefined,
-              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>
-    <TextInput
-      accessibilityElementsHidden={true}
-      pointerEvents="none"
-      style={
-        Object {
-          "backgroundColor": "transparent",
-          "height": 0.1,
-          "width": 0.1,
-        }
-      }
-    />
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Phone"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              Array [
-                Object {},
-                undefined,
-              ],
-            ],
-          ]
-        }
-      >
-        Phone
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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%)"
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "paddingVertical": 12,
-              },
-              Array [
-                Object {},
-                Object {},
-              ],
-            ]
-          }
-        />
-      </View>
-    </View>
-  </View>,
-  <View
-    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 {
-          "alignItems": "center",
-          "backgroundColor": "hsl(190, 95%, 30%)",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "paddingHorizontal": 16,
-          "paddingVertical": 12,
-        },
-        undefined,
-        Object {
-          "margin": 12,
-        },
-      ]
-    }
-    testID="amplify__button"
-  >
-    <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,
-          },
-          undefined,
-          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": "500",
-          "lineHeight": 36,
-        },
-        Object {
-          "marginVertical": 12,
-          "paddingHorizontal": 12,
-        },
-      ]
-    }
-  >
-    Create Account
-  </Text>,
-  <View
-    style={
-      Object {
-        "paddingBottom": 8,
-      }
-    }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Object {
-            "paddingHorizontal": 12,
-          },
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Username"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Username
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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%)"
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "paddingVertical": 12,
-              },
-              Object {},
-            ]
-          }
-        />
-      </View>
-    </View>
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Password"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Password
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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}
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "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 {},
-              undefined,
-              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>
-    <TextInput
-      accessibilityElementsHidden={true}
-      pointerEvents="none"
-      style={
-        Object {
-          "backgroundColor": "transparent",
-          "height": 0.1,
-          "width": 0.1,
-        }
-      }
-    />
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Confirm Password"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Confirm Password
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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}
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "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 {},
-              undefined,
-              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>
-    <TextInput
-      accessibilityElementsHidden={true}
-      pointerEvents="none"
-      style={
-        Object {
-          "backgroundColor": "transparent",
-          "height": 0.1,
-          "width": 0.1,
-        }
-      }
-    />
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Phone"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              Array [
-                Object {},
-                undefined,
-              ],
-            ],
-          ]
-        }
-      >
-        Phone
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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%)"
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "paddingVertical": 12,
-              },
-              Array [
-                Object {},
-                Object {},
-              ],
-            ]
-          }
-        />
-      </View>
-    </View>
-  </View>,
-  <View
-    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 {
-          "alignItems": "center",
-          "backgroundColor": "hsl(190, 95%, 30%)",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "paddingHorizontal": 16,
-          "paddingVertical": 12,
-        },
-        undefined,
-        Object {
-          "margin": 12,
-        },
-      ]
-    }
-    testID="amplify__button"
-  >
-    <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": "500",
-          "lineHeight": 36,
-        },
-        Object {
-          "marginVertical": 12,
-          "paddingHorizontal": 12,
-        },
-      ]
-    }
-  >
-    Create Account
-  </Text>,
-  <View
-    style={
-      Object {
-        "paddingBottom": 8,
-      }
-    }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Object {
-            "paddingHorizontal": 12,
-          },
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Username"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Username
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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%)"
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "paddingVertical": 12,
-              },
-              Object {},
-            ]
-          }
-        />
-      </View>
-    </View>
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Password"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Password
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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}
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "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 {
-                "opacity": 0.6,
-              },
-              undefined,
-              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>
-    <TextInput
-      accessibilityElementsHidden={true}
-      pointerEvents="none"
-      style={
-        Object {
-          "backgroundColor": "transparent",
-          "height": 0.1,
-          "width": 0.1,
-        }
-      }
-    />
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Confirm Password"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Confirm Password
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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}
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "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 {
-                "opacity": 0.6,
-              },
-              undefined,
-              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>
-    <TextInput
-      accessibilityElementsHidden={true}
-      pointerEvents="none"
-      style={
-        Object {
-          "backgroundColor": "transparent",
-          "height": 0.1,
-          "width": 0.1,
-        }
-      }
-    />
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Phone"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              Array [
-                Object {},
-                undefined,
-              ],
-            ],
-          ]
-        }
-      >
-        Phone
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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%)"
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "paddingVertical": 12,
-              },
-              Array [
-                Object {},
-                Object {},
-              ],
-            ]
-          }
-        />
-      </View>
-    </View>
-  </View>,
-  <View
-    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 {
-          "alignItems": "center",
-          "backgroundColor": "hsl(190, 95%, 30%)",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "paddingHorizontal": 16,
-          "paddingVertical": 12,
-        },
-        undefined,
-        Object {
-          "margin": 12,
-        },
-      ]
-    }
-    testID="amplify__button"
-  >
-    <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,
-          },
-          undefined,
-          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": "500",
-          "lineHeight": 36,
-        },
-        Object {
-          "marginVertical": 12,
-          "paddingHorizontal": 12,
-        },
-      ]
-    }
-  >
-    Create Account
-  </Text>,
-  <View
-    style={
-      Object {
-        "paddingBottom": 8,
-      }
-    }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Object {
-            "paddingHorizontal": 12,
-          },
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Username"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Username
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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%)"
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "paddingVertical": 12,
-              },
-              Object {},
-            ]
-          }
-        />
-      </View>
-    </View>
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Password"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Password
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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}
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "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 {},
-              undefined,
-              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>
-    <TextInput
-      accessibilityElementsHidden={true}
-      pointerEvents="none"
-      style={
-        Object {
-          "backgroundColor": "transparent",
-          "height": 0.1,
-          "width": 0.1,
-        }
-      }
-    />
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Confirm Password"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Confirm Password
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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}
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "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 {},
-              undefined,
-              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>
-    <TextInput
-      accessibilityElementsHidden={true}
-      pointerEvents="none"
-      style={
-        Object {
-          "backgroundColor": "transparent",
-          "height": 0.1,
-          "width": 0.1,
-        }
-      }
-    />
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Phone"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              Array [
-                Object {},
-                undefined,
-              ],
-            ],
-          ]
-        }
-      >
-        Phone
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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%)"
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "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": 12,
-        },
-        Object {
-          "marginHorizontal": 12,
-        },
-      ]
-    }
-    testID="amplify__error-message"
-  >
-    <Image
-      accessibilityRole="image"
-      source={
-        Object {
-          "testUri": "../../../src/assets/icons/error.png",
-        }
-      }
-      style={
-        Array [
-          Object {
-            "height": 20,
-            "resizeMode": "contain",
-            "tintColor": undefined,
-            "width": 20,
-          },
-          Array [
-            Object {
-              "margin": 8,
-              "tintColor": "hsl(0, 100%, 20%)",
-            },
-            Object {},
-          ],
-        ]
-      }
-    />
-    <Text
-      style={
-        Array [
-          Object {
-            "color": "hsl(0, 100%, 20%)",
-            "flex": 1,
-            "fontSize": 16,
-            "paddingHorizontal": 8,
-          },
-          Object {},
-        ]
-      }
-    >
-      Something went wrong
-    </Text>
-  </View>,
-  <View
-    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 {
-          "alignItems": "center",
-          "backgroundColor": "hsl(190, 95%, 30%)",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "paddingHorizontal": 16,
-          "paddingVertical": 12,
-        },
-        undefined,
-        Object {
-          "margin": 12,
-        },
-      ]
-    }
-    testID="amplify__button"
-  >
-    <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,
-          },
-          undefined,
-          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": "500",
-          "lineHeight": 36,
-        },
-        Object {
-          "marginVertical": 12,
-          "paddingHorizontal": 12,
-        },
-      ]
-    }
-  >
-    Create Account
-  </Text>,
-  <View
-    style={
-      Object {
-        "paddingBottom": 8,
-      }
-    }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Object {
-            "paddingHorizontal": 12,
-          },
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Username"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Username
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(0, 95%, 30%)",
-            "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%)"
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "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",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Password"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Password
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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}
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "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 {
-                "opacity": 0.6,
-              },
-              undefined,
-              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>
-    <TextInput
-      accessibilityElementsHidden={true}
-      pointerEvents="none"
-      style={
-        Object {
-          "backgroundColor": "transparent",
-          "height": 0.1,
-          "width": 0.1,
-        }
-      }
-    />
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Confirm Password"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        Confirm Password
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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}
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "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 {
-                "opacity": 0.6,
-              },
-              undefined,
-              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>
-    <TextInput
-      accessibilityElementsHidden={true}
-      pointerEvents="none"
-      style={
-        Object {
-          "backgroundColor": "transparent",
-          "height": 0.1,
-          "width": 0.1,
-        }
-      }
-    />
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-start",
-            "marginBottom": 8,
-          },
-          Array [
-            Object {},
-            Object {
-              "paddingHorizontal": 12,
-            },
-          ],
-        ]
-      }
-      testID="amplify__text-field-container"
-    >
-      <Text
-        accessibilityLabel="Phone"
-        accessibilityRole="text"
-        style={
-          Array [
-            Object {
-              "fontSize": 16,
-              "fontWeight": "400",
-              "lineHeight": 24,
-            },
-            Object {
-              "color": "hsl(210, 50%, 10%)",
-            },
-            Array [
-              Object {
-                "color": "hsl(210, 25%, 25%)",
-                "paddingVertical": 8,
-              },
-              Array [
-                Object {},
-                undefined,
-              ],
-            ],
-          ]
-        }
-      >
-        Phone
-      </Text>
-      <View
-        accessible={true}
-        style={
-          Object {
-            "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
-            "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%)"
-          style={
-            Array [
-              Object {
-                "color": "hsl(210, 50%, 10%)",
-                "flexGrow": 1,
-                "fontSize": 16,
-                "paddingHorizontal": 4,
-                "paddingVertical": 12,
-              },
-              Array [
-                Object {},
-                Object {},
-              ],
-            ]
-          }
-        />
-      </View>
-    </View>
-  </View>,
-  <View
-    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 {
-          "alignItems": "center",
-          "backgroundColor": "hsl(190, 95%, 30%)",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "paddingHorizontal": 16,
-          "paddingVertical": 12,
-        },
-        undefined,
-        Object {
-          "margin": 12,
-        },
-      ]
-    }
-    testID="amplify__button"
-  >
-    <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,
-          },
-          undefined,
-          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>,
-]
-`;