@aws-amplify/ui-react-native 1.2.18 → 1.2.19

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @aws-amplify/ui-react-native
 
+## 1.2.19
+
+### Patch Changes
+
+- [#4111](https://github.com/aws-amplify/amplify-ui/pull/4111) [`6f4b296fd`](https://github.com/aws-amplify/amplify-ui/commit/6f4b296fdbe73e1b8a37bede2e85d1ea8d819a54) Thanks [@calebpollman](https://github.com/calebpollman)! - fix(react-native): add spacing between Radio icon and label
+
+- [#4013](https://github.com/aws-amplify/amplify-ui/pull/4013) [`23180b470`](https://github.com/aws-amplify/amplify-ui/commit/23180b470c7b3b78a5970d00f8c2dc5ce8773eff) Thanks [@calebpollman](https://github.com/calebpollman)! - chore(ui-react-native): disable Authenticator submit button on invalid form
+
+- Updated dependencies [[`23180b470`](https://github.com/aws-amplify/amplify-ui/commit/23180b470c7b3b78a5970d00f8c2dc5ce8773eff), [`3cecd0765`](https://github.com/aws-amplify/amplify-ui/commit/3cecd0765b46c77c49af24fae7cfb9054ebe2cdb)]:
+  - @aws-amplify/ui-react-core@2.1.24
+  - @aws-amplify/ui@5.6.5
+  - @aws-amplify/ui-react-core-notifications@1.0.1
+
 ## 1.2.18
 
 ### Patch Changes

package/dist/Authenticator/Authenticator.d.ts

@@ -8,15 +8,13 @@ declare namespace Authenticator {
     var Provider: typeof import("@aws-amplify/ui-react-core").AuthenticatorProvider;
     var ConfirmResetPassword: (React.ComponentClass<import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ComponentSlots<import("./hooks").TextFieldOptionsType> & {
         resendCode: (data?: import("@aws-amplify/ui").AuthEventData | undefined) => void;
-        validationErrors?: import("@aws-amplify/ui").ValidationError | undefined;
-    } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & {
+    } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ValidationProps & {
         fields: import("./hooks").TextFieldOptionsType[];
     } & {
         style?: import("./Defaults/types").ConfirmResetPasswordStyle | undefined;
     }, any> | React.FunctionComponent<import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ComponentSlots<import("./hooks").TextFieldOptionsType> & {
         resendCode: (data?: import("@aws-amplify/ui").AuthEventData | undefined) => void;
-        validationErrors?: import("@aws-amplify/ui").ValidationError | undefined;
-    } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & {
+    } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ValidationProps & {
         fields: import("./hooks").TextFieldOptionsType[];
     } & {
         style?: import("./Defaults/types").ConfirmResetPasswordStyle | undefined;
@@ -66,15 +64,13 @@ declare namespace Authenticator {
     }>) & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ComponentSlots<import("./hooks").TextFieldOptionsType>;
     var ForceNewPassword: (React.ComponentClass<import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ComponentSlots<import("./hooks").TextFieldOptionsType> & {
         toSignIn: (data?: import("@aws-amplify/ui").AuthEventData | undefined) => void;
-        validationErrors?: import("@aws-amplify/ui").ValidationError | undefined;
-    } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & {
+    } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ValidationProps & {
         fields: import("./hooks").TextFieldOptionsType[];
     } & {
         style?: import("./Defaults/types").ForceNewPasswordStyle | undefined;
     }, any> | React.FunctionComponent<import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ComponentSlots<import("./hooks").TextFieldOptionsType> & {
         toSignIn: (data?: import("@aws-amplify/ui").AuthEventData | undefined) => void;
-        validationErrors?: import("@aws-amplify/ui").ValidationError | undefined;
-    } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & {
+    } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ValidationProps & {
         fields: import("./hooks").TextFieldOptionsType[];
     } & {
         style?: import("./Defaults/types").ForceNewPasswordStyle | undefined;
@@ -130,8 +126,7 @@ declare namespace Authenticator {
         hideSignIn?: boolean | undefined;
         toFederatedSignIn: (data?: import("@aws-amplify/ui").AuthEventData | undefined) => void;
         toSignIn: (data?: import("@aws-amplify/ui").AuthEventData | undefined) => void;
-        validationErrors?: import("@aws-amplify/ui").ValidationError | undefined;
-    } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & {
+    } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ValidationProps & {
         fields: import("./hooks").TextFieldOptionsType[];
     } & {
         style?: import("./Defaults/types").SignUpStyle | undefined;
@@ -139,8 +134,7 @@ declare namespace Authenticator {
         hideSignIn?: boolean | undefined;
         toFederatedSignIn: (data?: import("@aws-amplify/ui").AuthEventData | undefined) => void;
         toSignIn: (data?: import("@aws-amplify/ui").AuthEventData | undefined) => void;
-        validationErrors?: import("@aws-amplify/ui").ValidationError | undefined;
-    } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & {
+    } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ValidationProps & {
         fields: import("./hooks").TextFieldOptionsType[];
     } & {
         style?: import("./Defaults/types").SignUpStyle | undefined;

package/dist/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.js

@@ -4,21 +4,32 @@ import { DefaultContent, DefaultFooter, DefaultTextFormFields, DefaultHeader, }
 import { useFieldValues } from '../../hooks';
 const COMPONENT_NAME = 'ConfirmResetPassword';
 const { getResetYourPasswordText, getSubmitText, getSubmittingText, getResendCodeText, } = authenticatorTextUtil;
-const ConfirmResetPassword = ({ fields, handleBlur, handleChange, handleSubmit, isPending, resendCode, ...rest }) => {
-    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+const ConfirmResetPassword = ({ fields, handleBlur, handleChange, handleSubmit, hasValidationErrors, isPending, resendCode, ...rest }) => {
+    const { disableFormSubmit, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
         handleChange,
         handleSubmit,
     });
+    const disabled = hasValidationErrors || disableFormSubmit;
     const headerText = getResetYourPasswordText();
     const primaryButtonText = isPending ? getSubmittingText() : getSubmitText();
     const secondaryButtonText = getResendCodeText();
     const buttons = useMemo(() => ({
-        primary: { children: primaryButtonText, onPress: handleFormSubmit },
+        primary: {
+            children: primaryButtonText,
+            disabled,
+            onPress: handleFormSubmit,
+        },
         secondary: { children: secondaryButtonText, onPress: resendCode },
-    }), [handleFormSubmit, primaryButtonText, resendCode, secondaryButtonText]);
+    }), [
+        disabled,
+        handleFormSubmit,
+        primaryButtonText,
+        resendCode,
+        secondaryButtonText,
+    ]);
     return (<DefaultContent {...rest} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending}/>);
 };
 ConfirmResetPassword.Footer = DefaultFooter;

package/dist/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.js

@@ -5,7 +5,7 @@ import { useFieldValues } from '../../hooks';
 const COMPONENT_NAME = 'ConfirmSignIn';
 const { getBackToSignInText, getChallengeText, getConfirmText, getConfirmingText, } = authenticatorTextUtil;
 const ConfirmSignIn = ({ challengeName, fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, ...rest }) => {
-    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
@@ -16,9 +16,19 @@ const ConfirmSignIn = ({ challengeName, fields, handleBlur, handleChange, handle
     const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
     const secondaryButtonText = getBackToSignInText();
     const buttons = useMemo(() => ({
-        primary: { children: primaryButtonText, onPress: handleFormSubmit },
+        primary: {
+            children: primaryButtonText,
+            disabled,
+            onPress: handleFormSubmit,
+        },
         links: [{ children: secondaryButtonText, onPress: toSignIn }],
-    }), [handleFormSubmit, primaryButtonText, secondaryButtonText, toSignIn]);
+    }), [
+        disabled,
+        handleFormSubmit,
+        primaryButtonText,
+        secondaryButtonText,
+        toSignIn,
+    ]);
     return (<DefaultContent {...rest} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending}/>);
 };
 ConfirmSignIn.Footer = DefaultFooter;

package/dist/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.js

@@ -5,7 +5,7 @@ import { useFieldValues } from '../../hooks';
 const COMPONENT_NAME = 'ConfirmSignUp';
 const { getDeliveryMethodText, getDeliveryMessageText, getConfirmingText, getConfirmText, getResendCodeText, } = authenticatorTextUtil;
 const ConfirmSignUp = ({ codeDeliveryDetails, fields, handleBlur, handleChange, handleSubmit, isPending, resendCode, ...rest }) => {
-    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
@@ -17,9 +17,19 @@ const ConfirmSignUp = ({ codeDeliveryDetails, fields, handleBlur, handleChange,
     const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
     const secondaryButtonText = getResendCodeText();
     const buttons = useMemo(() => ({
-        primary: { children: primaryButtonText, onPress: handleFormSubmit },
+        primary: {
+            children: primaryButtonText,
+            disabled,
+            onPress: handleFormSubmit,
+        },
         secondary: { children: secondaryButtonText, onPress: resendCode },
-    }), [handleFormSubmit, primaryButtonText, resendCode, secondaryButtonText]);
+    }), [
+        disabled,
+        handleFormSubmit,
+        primaryButtonText,
+        resendCode,
+        secondaryButtonText,
+    ]);
     return (<DefaultContent {...rest} body={bodyText} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending}/>);
 };
 ConfirmSignUp.FormFields = DefaultTextFormFields;

package/dist/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.js

@@ -5,7 +5,7 @@ import { useFieldValues } from '../../hooks';
 const COMPONENT_NAME = 'ConfirmVerifyUser';
 const { getAccountRecoveryInfoText, getSkipText, getSubmitText, getSubmittingText, } = authenticatorTextUtil;
 const ConfirmVerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, isPending, skipVerification, ...rest }) => {
-    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
@@ -16,9 +16,19 @@ const ConfirmVerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, isP
     const primaryButtonText = isPending ? getSubmittingText() : getSubmitText();
     const secondaryButtonText = getSkipText();
     const buttons = useMemo(() => ({
-        primary: { children: primaryButtonText, onPress: handleFormSubmit },
+        primary: {
+            children: primaryButtonText,
+            disabled,
+            onPress: handleFormSubmit,
+        },
         links: [{ children: secondaryButtonText, onPress: skipVerification }],
-    }), [handleFormSubmit, primaryButtonText, skipVerification, secondaryButtonText]);
+    }), [
+        disabled,
+        handleFormSubmit,
+        primaryButtonText,
+        skipVerification,
+        secondaryButtonText,
+    ]);
     return (<DefaultContent {...rest} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending}/>);
 };
 ConfirmVerifyUser.Footer = DefaultFooter;

package/dist/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.js

@@ -4,23 +4,34 @@ import { DefaultContent, DefaultFooter, DefaultTextFormFields, DefaultHeader, }
 import { useFieldValues } from '../../hooks';
 const COMPONENT_NAME = 'ForceNewPassword';
 const { getChangePasswordText, getChangingText, getBackToSignInText } = authenticatorTextUtil;
-const ForceNewPassword = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, ...rest }) => {
-    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+const ForceNewPassword = ({ fields, handleBlur, handleChange, handleSubmit, hasValidationErrors, isPending, toSignIn, ...rest }) => {
+    const { disableFormSubmit, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
         handleChange,
         handleSubmit,
     });
+    const disabled = hasValidationErrors || disableFormSubmit;
     const headerText = getChangePasswordText();
     const primaryButtonText = isPending
         ? getChangingText()
         : getChangePasswordText();
     const secondaryButtonText = getBackToSignInText();
     const buttons = useMemo(() => ({
-        primary: { children: primaryButtonText, onPress: handleFormSubmit },
+        primary: {
+            children: primaryButtonText,
+            disabled,
+            onPress: handleFormSubmit,
+        },
         links: [{ children: secondaryButtonText, onPress: toSignIn }],
-    }), [handleFormSubmit, primaryButtonText, secondaryButtonText, toSignIn]);
+    }), [
+        disabled,
+        handleFormSubmit,
+        primaryButtonText,
+        secondaryButtonText,
+        toSignIn,
+    ]);
     return (<DefaultContent {...rest} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending}/>);
 };
 ForceNewPassword.Footer = DefaultFooter;

package/dist/Authenticator/Defaults/ResetPassword/ResetPassword.js

@@ -5,7 +5,7 @@ import { useFieldValues } from '../../hooks';
 const COMPONENT_NAME = 'ResetPassword';
 const { getResetYourPasswordText, getSendCodeText, getSendingText, getBackToSignInText, } = authenticatorTextUtil;
 const ResetPassword = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, ...rest }) => {
-    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
@@ -16,9 +16,19 @@ const ResetPassword = ({ fields, handleBlur, handleChange, handleSubmit, isPendi
     const primaryButtonText = isPending ? getSendingText() : getSendCodeText();
     const secondaryButtonText = getBackToSignInText();
     const buttons = useMemo(() => ({
-        primary: { children: primaryButtonText, onPress: handleFormSubmit },
+        primary: {
+            children: primaryButtonText,
+            disabled,
+            onPress: handleFormSubmit,
+        },
         links: [{ children: secondaryButtonText, onPress: toSignIn }],
-    }), [handleFormSubmit, primaryButtonText, secondaryButtonText, toSignIn]);
+    }), [
+        disabled,
+        handleFormSubmit,
+        primaryButtonText,
+        secondaryButtonText,
+        toSignIn,
+    ]);
     return (<DefaultContent {...rest} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending}/>);
 };
 ResetPassword.Footer = DefaultFooter;

package/dist/Authenticator/Defaults/SetupTOTP/SetupTOTP.js

@@ -7,7 +7,7 @@ import { styles } from './styles';
 const COMPONENT_NAME = 'SetupTOTP';
 const { getBackToSignInText, getConfirmingText, getConfirmText, getSetupTOTPText, getSetupTOTPInstructionsText, } = authenticatorTextUtil;
 const SetupTOTP = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, totpSecretCode, ...rest }) => {
-    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
@@ -26,9 +26,19 @@ const SetupTOTP = ({ fields, handleBlur, handleChange, handleSubmit, isPending,
       </Label>
     </>);
     const buttons = useMemo(() => ({
-        primary: { children: primaryButtonText, onPress: handleFormSubmit },
+        primary: {
+            children: primaryButtonText,
+            disabled,
+            onPress: handleFormSubmit,
+        },
         links: [{ children: secondaryButtonText, onPress: toSignIn }],
-    }), [handleFormSubmit, primaryButtonText, secondaryButtonText, toSignIn]);
+    }), [
+        disabled,
+        handleFormSubmit,
+        primaryButtonText,
+        secondaryButtonText,
+        toSignIn,
+    ]);
     return (<DefaultContent {...rest} body={body} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending}/>);
 };
 SetupTOTP.Footer = DefaultFooter;

package/dist/Authenticator/Defaults/SignIn/SignIn.js

@@ -5,7 +5,7 @@ import { useFieldValues } from '../../hooks';
 const COMPONENT_NAME = 'SignIn';
 const SignIn = ({ fields, handleBlur, handleChange, handleSubmit, hideSignUp, toResetPassword, toSignUp, ...rest }) => {
     const { getSignInTabText, getSignInText, getSignUpTabText, getForgotPasswordText, } = authenticatorTextUtil;
-    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
@@ -22,12 +22,13 @@ const SignIn = ({ fields, handleBlur, handleChange, handleSubmit, hideSignUp, to
             onPress: toResetPassword,
         };
         return {
-            primary: { children: signInText, onPress: handleFormSubmit },
+            primary: { children: signInText, disabled, onPress: handleFormSubmit },
             links: hideSignUp
                 ? [forgotPassword]
                 : [forgotPassword, { children: signUpText, onPress: toSignUp }],
         };
     }, [
+        disabled,
         forgotPasswordText,
         handleFormSubmit,
         hideSignUp,

package/dist/Authenticator/Defaults/SignUp/SignUp.js

@@ -4,25 +4,31 @@ import { DefaultContent, DefaultFooter, DefaultTextFormFields, DefaultHeader, }
 import { useFieldValues } from '../../hooks';
 const COMPONENT_NAME = 'SignUp';
 const { getCreateAccountText, getCreatingAccountText, getSignInTabText, getSignUpTabText, } = authenticatorTextUtil;
-const SignUp = ({ fields, handleBlur, handleChange, handleSubmit, hideSignIn, isPending, toSignIn, ...rest }) => {
-    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+const SignUp = ({ fields, handleBlur, handleChange, handleSubmit, hasValidationErrors, hideSignIn, isPending, toSignIn, ...rest }) => {
+    const { disableFormSubmit, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
         handleChange,
         handleSubmit,
     });
+    const disabled = hasValidationErrors || disableFormSubmit;
     const headerText = getSignUpTabText();
     const primaryButtonText = isPending
         ? getCreatingAccountText()
         : getCreateAccountText();
     const secondaryButtonText = getSignInTabText();
     const buttons = useMemo(() => ({
-        primary: { children: primaryButtonText, onPress: handleFormSubmit },
+        primary: {
+            children: primaryButtonText,
+            disabled,
+            onPress: handleFormSubmit,
+        },
         links: hideSignIn
             ? undefined
             : [{ children: secondaryButtonText, onPress: toSignIn }],
     }), [
+        disabled,
         handleFormSubmit,
         hideSignIn,
         primaryButtonText,

package/dist/Authenticator/Defaults/VerifyUser/VerifyUser.js

@@ -5,7 +5,7 @@ import { useFieldValues } from '../../hooks';
 const COMPONENT_NAME = 'VerifyUser';
 const { getSkipText, getVerifyContactText, getVerifyText, getAccountRecoveryInfoText, } = authenticatorTextUtil;
 const VerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, skipVerification, ...rest }) => {
-    const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, handleFormSubmit, } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
         handleBlur,
@@ -17,9 +17,9 @@ const VerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, skipVerifi
     const verifyText = getVerifyText();
     const bodyText = getAccountRecoveryInfoText();
     const buttons = useMemo(() => ({
-        primary: { children: verifyText, onPress: handleFormSubmit },
+        primary: { children: verifyText, disabled, onPress: handleFormSubmit },
         links: [{ children: skipText, onPress: skipVerification }],
-    }), [handleFormSubmit, skipText, skipVerification, verifyText]);
+    }), [disabled, handleFormSubmit, skipText, skipVerification, verifyText]);
     return (<DefaultContent {...rest} body={bodyText} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText}/>);
 };
 VerifyUser.Footer = DefaultFooter;

package/dist/Authenticator/common/DefaultContent/DefaultContent.js

@@ -18,10 +18,10 @@ export default function DefaultContent({ body, buttons: { primary, links, second
       <Header style={themedStyles.header}>{headerText}</Header>
       {body ? (typeof body === 'string' ? (<Label style={themedStyles.body}>{body}</Label>) : (body)) : null}
       <FormFields fieldContainerStyle={themedStyles.fieldContainer} fieldErrorsContainer={themedStyles.fieldErrorsContainer} fieldErrorStyle={themedStyles.fieldError} fieldLabelStyle={themedStyles.fieldLabel} fieldStyle={themedStyles.fieldStyle} fields={fields} isPending={isPending} validationErrors={validationErrors} style={themedStyles.formFields}/>
-      {error ? (<ErrorMessage iconStyle={themedStyles.errorMessageIcon} labelStyle={themedStyles.errorMessageLabel} style={themedStyles.errorMessage}>
+      {error ? (<ErrorMessage iconStyle={themedStyles.errorMessageIcon} labelStyle={themedStyles.errorMessageLabel} style={themedStyles.errorMessage} testID="amplify__error-message">
           {error}
         </ErrorMessage>) : null}
-      <Button {...primary} variant="primary" textStyle={themedStyles.buttonPrimaryLabel} style={themedStyles.buttonPrimary}/>
+      <Button {...primary} variant="primary" textStyle={themedStyles.buttonPrimaryLabel} style={themedStyles.buttonPrimary} testID="amplify__button"/>
       {secondary ? (<Button {...secondary} textStyle={themedStyles.buttonSecondaryLabel} style={themedStyles.buttonSecondary}/>) : null}
       {linkButtons}
       <Footer style={themedStyles.footer}/>

package/dist/primitives/Radio/styles.js

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 import { RADIO_DOT_PROPORTION } from './getRadioDimensions';
 const ROUNDED_BORDER_RADIUS = 999;
 export const getThemedStyles = (theme) => {
-    const { components, tokens: { colors, fontSizes, opacities, borderWidths }, } = theme;
+    const { components, tokens: { colors, fontSizes, opacities, borderWidths, space }, } = theme;
     return StyleSheet.create({
         container: {
             alignItems: 'center',
@@ -22,6 +22,7 @@ export const getThemedStyles = (theme) => {
             borderRadius: ROUNDED_BORDER_RADIUS,
             borderWidth: borderWidths.medium,
             justifyContent: 'center',
+            margin: space.xxs,
             ...components?.radio?.radioContainer,
         },
         radioDot: {

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.18";
+export declare const VERSION = "1.2.19";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '1.2.18';
+export const VERSION = '1.2.19';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "1.2.18",
+  "version": "1.2.19",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -37,9 +37,9 @@
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.6.4",
-    "@aws-amplify/ui-react-core": "2.1.23",
-    "@aws-amplify/ui-react-core-notifications": "1.0.0"
+    "@aws-amplify/ui": "5.6.5",
+    "@aws-amplify/ui-react-core": "2.1.24",
+    "@aws-amplify/ui-react-core-notifications": "1.0.1"
   },
   "peerDependencies": {
     "aws-amplify": ">= 5.0.1",

package/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx

@@ -25,11 +25,16 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
   handleBlur,
   handleChange,
   handleSubmit,
+  hasValidationErrors,
   isPending,
   resendCode,
   ...rest
 }) => {
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -37,16 +42,27 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
     handleSubmit,
   });
 
+  const disabled = hasValidationErrors || disableFormSubmit;
   const headerText = getResetYourPasswordText();
   const primaryButtonText = isPending ? getSubmittingText() : getSubmitText();
   const secondaryButtonText = getResendCodeText();
 
   const buttons = useMemo(
     () => ({
-      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      primary: {
+        children: primaryButtonText,
+        disabled,
+        onPress: handleFormSubmit,
+      },
       secondary: { children: secondaryButtonText, onPress: resendCode },
     }),
-    [handleFormSubmit, primaryButtonText, resendCode, secondaryButtonText]
+    [
+      disabled,
+      handleFormSubmit,
+      primaryButtonText,
+      resendCode,
+      secondaryButtonText,
+    ]
   );
 
   return (

package/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx

@@ -34,6 +34,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ConfirmResetPassword.Header,
   isPending: false,
   resendCode: jest.fn(),

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

@@ -423,6 +423,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -467,6 +468,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -496,6 +502,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -974,6 +981,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -1003,6 +1015,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={

package/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx

@@ -30,7 +30,11 @@ const ConfirmSignIn: DefaultConfirmSignInComponent = ({
   toSignIn,
   ...rest
 }) => {
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit: disabled,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -44,10 +48,20 @@ const ConfirmSignIn: DefaultConfirmSignInComponent = ({
 
   const buttons = useMemo(
     () => ({
-      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      primary: {
+        children: primaryButtonText,
+        disabled,
+        onPress: handleFormSubmit,
+      },
       links: [{ children: secondaryButtonText, onPress: toSignIn }],
     }),
-    [handleFormSubmit, primaryButtonText, secondaryButtonText, toSignIn]
+    [
+      disabled,
+      handleFormSubmit,
+      primaryButtonText,
+      secondaryButtonText,
+      toSignIn,
+    ]
   );
 
   return (

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

@@ -127,6 +127,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -171,6 +172,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -200,6 +206,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -391,6 +398,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -420,6 +432,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={