@aws-amplify/ui-react-native 1.2.28 → 2.0.0

package/lib/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.js

@@ -3,24 +3,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
+const auth_1 = require("aws-amplify/auth");
 const ui_1 = require("@aws-amplify/ui");
-const assets_1 = require("../../../assets");
-const FederatedProviderButton_1 = require("../FederatedProviderButton");
 const primitives_1 = require("../../../primitives");
+const theme_1 = require("../../../theme");
+const FederatedProviderButton_1 = require("../FederatedProviderButton");
+const assets_1 = require("../../../assets");
 const styles_1 = require("./styles");
-function FederatedProviderButtons({ socialProviders, toFederatedSignIn, }) {
+const { getSignInWithFederationText, getOrText } = ui_1.authenticatorTextUtil;
+// use `signInWithRedirect` directly instead of `toFederatedSignIn`
+// exposed on `useAuthenticator` for RN. `@aws-amplify/rtn-web-browser`
+// does not emit an event on federated sign in flow cancellation,
+// preventing the `Authenticator` from updating state and leaving the
+// UI in a "pending" state
+const handleSignInWithRedirect = (provider) => (0, auth_1.signInWithRedirect)({ provider: (0, ui_1.capitalize)(provider) });
+function FederatedProviderButtons({ buttonStyle, dividerLabelStyle, route, socialProviders, style, }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme);
     const providerButtons = (0, react_1.useMemo)(() => socialProviders?.map((provider) => {
         const providerIconSource = assets_1.icons[`${provider}Logo`];
         const handlePress = () => {
-            toFederatedSignIn({ provider });
+            handleSignInWithRedirect(provider);
         };
-        return (<FederatedProviderButton_1.FederatedProviderButton key={provider} onPress={handlePress} source={providerIconSource} style={styles_1.styles.button}>
-            {`Sign In with ${(0, ui_1.capitalize)(provider)}`}
+        return (<FederatedProviderButton_1.FederatedProviderButton key={provider} onPress={handlePress} source={providerIconSource} style={[themedStyle.button, buttonStyle]}>
+            {getSignInWithFederationText(route, provider)}
           </FederatedProviderButton_1.FederatedProviderButton>);
-    }), [socialProviders, toFederatedSignIn]);
-    return providerButtons?.length ? (<react_native_1.View style={styles_1.styles.container}>
+    }), [route, socialProviders, themedStyle, buttonStyle]);
+    return providerButtons?.length ? (<react_native_1.View style={[themedStyle.container, style]} testID="amplify__federated-provider-buttons">
       {providerButtons}
-      <primitives_1.Divider labelStyle={styles_1.styles.text}>Or</primitives_1.Divider>
+      <primitives_1.Divider labelStyle={[themedStyle.dividerLabel, dividerLabelStyle]}>
+        {getOrText()}
+      </primitives_1.Divider>
     </react_native_1.View>) : null;
 }
 exports.default = FederatedProviderButtons;

package/lib/Authenticator/common/FederatedProviderButtons/styles.js

@@ -1,8 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.styles = void 0;
-exports.styles = {
-    button: { marginVertical: 8 },
-    container: { paddingVertical: 4 },
-    text: { paddingVertical: 8, textAlign: 'center' },
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const getThemedStyles = (theme) => {
+    const { space } = theme.tokens;
+    return react_native_1.StyleSheet.create({
+        button: {
+            marginVertical: space.xs,
+        },
+        dividerLabel: {
+            textAlign: 'center',
+        },
+        container: {
+            marginHorizontal: space.small,
+        },
+    });
 };
+exports.getThemedStyles = getThemedStyles;

package/lib/Authenticator/hooks/useFieldValues/useFieldValues.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const aws_amplify_1 = require("aws-amplify");
-const utils_1 = require("./utils");
-const logger = new aws_amplify_1.Logger('Authenticator');
+const utils_1 = require("aws-amplify/utils");
+const utils_2 = require("./utils");
+const logger = new utils_1.ConsoleLogger('Authenticator');
 function useFieldValues({ componentName, fields = [], handleBlur, handleChange, handleSubmit, validationErrors, }) {
     const [values, setValues] = (0, react_1.useState)({});
     const [touched, setTouched] = (0, react_1.useState)({});
@@ -15,12 +15,12 @@ function useFieldValues({ componentName, fields = [], handleBlur, handleChange,
             return [];
         }
         if (isRadioFieldComponent) {
-            return (0, utils_1.getSanitizedRadioFields)(fields, componentName);
+            return (0, utils_2.getSanitizedRadioFields)(fields, componentName);
         }
-        return (0, utils_1.getSanitizedTextFields)(fields, componentName);
+        return (0, utils_2.getSanitizedTextFields)(fields, componentName);
     }, [componentName, fields, isRadioFieldComponent]);
     const fieldsWithHandlers = sanitizedFields.map((field) => {
-        if ((0, utils_1.isRadioFieldOptions)(field)) {
+        if ((0, utils_2.isRadioFieldOptions)(field)) {
             const onChange = (value) => {
                 // call `onChange` passed as radio `field` option
                 field.onChange?.(value);
@@ -38,7 +38,7 @@ function useFieldValues({ componentName, fields = [], handleBlur, handleChange,
             handleBlur({ name, value: values[name] });
             setFieldValidationErrors({
                 ...fieldValidationErrors,
-                [name]: (0, utils_1.runFieldValidation)(field, values[name], validationErrors),
+                [name]: (0, utils_2.runFieldValidation)(field, values[name], validationErrors),
             });
         };
         const onChangeText = (value) => {
@@ -49,7 +49,7 @@ function useFieldValues({ componentName, fields = [], handleBlur, handleChange,
             if (touched[name]) {
                 setFieldValidationErrors({
                     ...fieldValidationErrors,
-                    [name]: (0, utils_1.runFieldValidation)(field, value, validationErrors),
+                    [name]: (0, utils_2.runFieldValidation)(field, value, validationErrors),
                 });
             }
             setValues({ ...values, [name]: value });

package/lib/Authenticator/hooks/useFieldValues/utils.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runFieldValidation = exports.getRouteTypedFields = exports.getTypedFields = exports.getTypedField = exports.getSanitizedTextFields = exports.getSanitizedRadioFields = exports.isRadioFieldOptions = void 0;
-const aws_amplify_1 = require("aws-amplify");
+const utils_1 = require("aws-amplify/utils");
 const ui_1 = require("@aws-amplify/ui");
 const ui_react_core_1 = require("@aws-amplify/ui-react-core");
 const constants_1 = require("./constants");
-const logger = new aws_amplify_1.Logger('Authenticator');
+const logger = new utils_1.ConsoleLogger('Authenticator');
 const { getInvalidEmailText, getRequiredFieldText } = ui_1.authenticatorTextUtil;
 const isRadioFieldOptions = (field) => field?.type === 'radio';
 exports.isRadioFieldOptions = isRadioFieldOptions;

package/lib/InAppMessaging/components/InAppMessageDisplay/handleMessageLinkAction.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_native_1 = require("react-native");
-const core_1 = require("@aws-amplify/core");
-const logger = new core_1.ConsoleLogger('Notifications.InAppMessaging');
+const utils_1 = require("aws-amplify/utils");
+const logger = new utils_1.ConsoleLogger('InAppMessaging');
 const handleMessageLinkAction = async (url) => {
     let supported = false;
     try {

package/lib/InAppMessaging/hooks/useMessageImage/types.js

@@ -6,4 +6,4 @@ var ImagePrefetchStatus;
     ImagePrefetchStatus["Failure"] = "FAILURE";
     ImagePrefetchStatus["Fetching"] = "FETCHING";
     ImagePrefetchStatus["Success"] = "SUCCESS";
-})(ImagePrefetchStatus = exports.ImagePrefetchStatus || (exports.ImagePrefetchStatus = {}));
+})(ImagePrefetchStatus || (exports.ImagePrefetchStatus = ImagePrefetchStatus = {}));

package/lib/InAppMessaging/hooks/useMessageImage/useMessageImage.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const core_1 = require("@aws-amplify/core");
+const utils_1 = require("aws-amplify/utils");
 const types_1 = require("./types");
-const utils_1 = require("./utils");
-const logger = new core_1.ConsoleLogger('Notifications.InAppMessaging');
+const utils_2 = require("./utils");
+const logger = new utils_1.ConsoleLogger('InAppMessaging');
 /**
  * Handles prefetching and dimension setting for message images
  *
@@ -28,11 +28,11 @@ function useMessageImage(image, layout) {
         if (!shouldPrefetch) {
             return;
         }
-        (0, utils_1.prefetchNetworkImage)(src).then((prefetchResult) => {
+        (0, utils_2.prefetchNetworkImage)(src).then((prefetchResult) => {
             if (prefetchResult === 'loaded') {
                 // get image size once loaded
                 react_native_1.Image.getSize(src, (imageWidth, imageHeight) => {
-                    const { height, width } = (0, utils_1.getLayoutImageDimensions)(imageHeight, imageWidth, layout);
+                    const { height, width } = (0, utils_2.getLayoutImageDimensions)(imageHeight, imageWidth, layout);
                     imageDimensions.height = height;
                     imageDimensions.width = width;
                     setPrefetchStatus(types_1.ImagePrefetchStatus.Success);

package/lib/InAppMessaging/hooks/useMessageImage/utils.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLayoutImageDimensions = exports.prefetchNetworkImage = void 0;
 const react_native_1 = require("react-native");
-const core_1 = require("@aws-amplify/core");
+const utils_1 = require("aws-amplify/utils");
 const constants_1 = require("./constants");
-const logger = new core_1.ConsoleLogger('Notifications.InAppMessaging');
+const logger = new utils_1.ConsoleLogger('InAppMessaging');
 const inAppMessageImageSizes = {
     BOTTOM_BANNER: constants_1.BANNER_IMAGE_SCREEN_SIZE,
     MIDDLE_BANNER: constants_1.BANNER_IMAGE_SCREEN_SIZE,

package/lib/InAppMessaging/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withInAppMessaging = exports.InAppMessageDisplay = exports.useInAppMessaging = exports.InAppMessagingProvider = void 0;
+// re-export in-app types from '@aws-amplify/ui-react-core-notifications'
 var ui_react_core_notifications_1 = require("@aws-amplify/ui-react-core-notifications");
 Object.defineProperty(exports, "InAppMessagingProvider", { enumerable: true, get: function () { return ui_react_core_notifications_1.InAppMessagingProvider; } });
 Object.defineProperty(exports, "useInAppMessaging", { enumerable: true, get: function () { return ui_react_core_notifications_1.useInAppMessaging; } });

package/lib/assets/icons/icons.ts

@@ -1,3 +1,6 @@
+// disable `@typescript-eslint/no-var-requires` for this file
+// .png icons will be removed in favor of .svg icons
+/* eslint-disable @typescript-eslint/no-var-requires */
 import { ImageSourcePropType } from 'react-native';
 
 const icons = {

package/lib/primitives/Button/styles.js

@@ -8,8 +8,10 @@ const getThemedStyles = (theme) => {
     return react_native_1.StyleSheet.create({
         container: {
             alignItems: 'center',
-            backgroundColor: colors.transparent,
             justifyContent: 'center',
+            flexDirection: 'row',
+            gap: space.small,
+            backgroundColor: colors.transparent,
             paddingVertical: space.small,
             paddingHorizontal: space.medium,
             borderRadius: radii.small,
@@ -21,7 +23,7 @@ const getThemedStyles = (theme) => {
             ...components?.button?.containerDefault,
         },
         containerPrimary: {
-            backgroundColor: colors.brand.primary[80],
+            backgroundColor: colors.primary[80],
             ...components?.button?.containerPrimary,
         },
         containerLink: {

package/lib/primitives/Carousel/Carousel.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
-const ui_1 = require("@aws-amplify/ui");
 const CarouselPageIndicator_1 = tslib_1.__importDefault(require("./CarouselPageIndicator"));
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
@@ -40,16 +39,7 @@ function Carousel(props) {
             updateOrientation(window.width);
         };
         const subscription = react_native_1.Dimensions.addEventListener('change', orientationHandler);
-        // Clean up listener. Dimensions.removeEventListener is deprecated as of React Native 0.65 but it is technically
-        // available so try to remove via a `EmitterSubscription` first before falling back to `removeEventListener`
-        return () => {
-            if ((0, ui_1.isFunction)(subscription?.remove)) {
-                subscription.remove();
-            }
-            else {
-                react_native_1.Dimensions.removeEventListener('change', orientationHandler);
-            }
-        };
+        return subscription.remove;
     }, [updateOrientation]);
     const carouselRenderItem = (renderInfo) => (<react_native_1.View style={{ width }}>{renderItem(renderInfo)}</react_native_1.View>);
     if (!data?.length) {

package/lib/primitives/Divider/styles.js

@@ -4,7 +4,7 @@ exports.getThemedStyles = void 0;
 const react_native_1 = require("react-native");
 const getThemedStyles = (theme) => {
     const { tokens, components } = theme;
-    const { colors, fontSizes, space } = tokens;
+    const { colors, fontSizes, space, borderWidths } = tokens;
     return react_native_1.StyleSheet.create({
         container: {
             alignItems: 'center',
@@ -15,12 +15,13 @@ const getThemedStyles = (theme) => {
             fontSize: fontSizes.medium,
             margin: space.medium,
             textAlign: 'center',
+            color: colors.font.tertiary,
             ...components?.divider?.label,
         },
         line: {
-            backgroundColor: colors.black,
+            backgroundColor: colors.border.secondary,
             flex: 1,
-            height: react_native_1.StyleSheet.hairlineWidth,
+            height: borderWidths.small,
             ...components?.divider?.line,
         },
     });

package/lib/primitives/ErrorMessage/ErrorMessage.js

@@ -10,10 +10,10 @@ const IconButton_1 = require("../IconButton");
 const theme_1 = require("../../theme");
 const styles_1 = require("./styles");
 exports.CLOSE_BUTTON_TEST_ID = 'authenticator--error-message--close-button';
-function ErrorMessage({ children, iconStyle, labelStyle, onDismiss, style, ...rest }) {
+function ErrorMessage({ accessible = true, accessibilityRole = 'alert', children, iconStyle, labelStyle, onDismiss, style, ...rest }) {
     const theme = (0, theme_1.useTheme)();
     const themedStyle = (0, styles_1.getThemedStyles)(theme);
-    return (<react_native_1.View {...rest} accessibilityRole="alert" style={[themedStyle.container, style]}>
+    return (<react_native_1.View {...rest} accessible={accessible} accessibilityRole={accessibilityRole} style={[themedStyle.container, style]}>
       <Icon_1.Icon size={20} source={assets_1.icons.error} style={[themedStyle.icon, iconStyle]}/>
       <react_native_1.Text style={[themedStyle.label, labelStyle]}>{children}</react_native_1.Text>
       {onDismiss ? (<IconButton_1.IconButton onPress={onDismiss} size={20} source={assets_1.icons.close} style={themedStyle.icon} testID={exports.CLOSE_BUTTON_TEST_ID}/>) : null}

package/lib/primitives/Icon/Icon.js

@@ -5,11 +5,12 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
 const theme_1 = require("../../theme");
 const styles_1 = require("./styles");
-function Icon({ accessibilityRole = 'image', animated, color, size, style, ...rest }) {
+function Icon({ accessible = true, accessibilityRole = 'image', animated, color, size, style, ...rest }) {
     const theme = (0, theme_1.useTheme)();
     const themedStyle = (0, react_1.useMemo)(() => (0, styles_1.getThemedStyles)(theme, color, size), [theme, color, size]);
     const imageProps = {
         ...rest,
+        accessible,
         accessibilityRole,
         style: [themedStyle.icon, style],
     };

package/lib/primitives/Icon/styles.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getThemedStyles = void 0;
 const react_native_1 = require("react-native");
-const core_1 = require("@aws-amplify/core");
+const utils_1 = require("aws-amplify/utils");
 const constants_1 = require("./constants");
-const logger = new core_1.ConsoleLogger('Icon-logger');
+const logger = new utils_1.ConsoleLogger('Icon-logger');
 const getIconSize = (size) => {
     if (!size) {
         return constants_1.iconSizes.medium;

package/lib/primitives/Radio/styles.js

@@ -29,7 +29,7 @@ const getThemedStyles = (theme) => {
             ...components?.radio?.radioContainer,
         },
         radioDot: {
-            backgroundColor: colors.brand.primary[80],
+            backgroundColor: colors.primary[80],
             borderRadius: ROUNDED_BORDER_RADIUS,
             ...components?.radio?.radioDot,
         },

package/lib/primitives/RadioGroup/RadioGroup.js

@@ -8,7 +8,7 @@ const theme_1 = require("../../theme");
 const Label_1 = require("../Label");
 const utils_1 = require("../Label/utils");
 const styles_1 = require("./styles");
-function RadioGroup({ accessibilityRole = 'radiogroup', children, direction = 'vertical', disabled, initialValue, label, labelPosition = 'top', labelStyle, onChange, onValueChange, size, style, ...rest }) {
+function RadioGroup({ accessible = true, accessibilityRole = 'radiogroup', children, direction = 'vertical', disabled, initialValue, label, labelPosition = 'top', labelStyle, onChange, onValueChange, size, style, ...rest }) {
     const theme = (0, theme_1.useTheme)();
     const themedStyle = (0, styles_1.getThemedStyles)(theme);
     const [value, setValue] = (0, react_1.useState)(initialValue);
@@ -30,7 +30,7 @@ function RadioGroup({ accessibilityRole = 'radiogroup', children, direction = 'v
         onChange?.(nextValue);
     }, [onChange]);
     return (<react_native_1.View {...rest} style={[themedStyle.container, containerStyle, style]}>
-      <react_native_1.View accessibilityRole={accessibilityRole} style={childContainerStyle}>
+      <react_native_1.View accessible={accessible} accessibilityRole={accessibilityRole} style={childContainerStyle}>
         {react_1.Children.map(children, (child) => {
             if ((0, react_1.isValidElement)(child)) {
                 const { disabled: childDisabled, onChange: childOnChange, value: childValue, size: childSize, } = child.props;

package/lib/primitives/Tabs/Tabs.js

@@ -5,13 +5,13 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
 const theme_1 = require("../../theme");
 const styles_1 = require("./styles");
-function Tabs({ children, indicatorPosition = 'bottom', onChange, selectedIndex = 0, style, ...rest }) {
+function Tabs({ accessible = true, accessibilityRole = 'tablist', children, indicatorPosition = 'bottom', onChange, selectedIndex = 0, style, ...rest }) {
     const theme = (0, theme_1.useTheme)();
     const themedStyle = (0, styles_1.getThemedStyles)(theme, indicatorPosition);
     const handleOnChange = (nextIndex) => {
         onChange?.(nextIndex);
     };
-    return (<react_native_1.View {...rest} accessibilityRole="tablist" style={[themedStyle.tabList, style]}>
+    return (<react_native_1.View {...rest} accessible={accessible} accessibilityRole={accessibilityRole} style={[themedStyle.tabList, style]}>
       {react_1.Children.map(children, (child, index) => {
             if ((0, react_1.isValidElement)(child)) {
                 return (0, react_1.cloneElement)(child, {

package/lib/primitives/Tabs/styles.js

@@ -7,12 +7,12 @@ const getThemedStyles = (theme, indicatorPosition) => {
     const selectedTabBorderStyles = {};
     const tabBorderStyles = {};
     if (indicatorPosition && indicatorPosition === 'top') {
-        selectedTabBorderStyles.borderTopColor = colors.brand.primary[80];
+        selectedTabBorderStyles.borderTopColor = colors.primary[80];
         tabBorderStyles.borderTopWidth = borderWidths.medium;
         tabBorderStyles.borderTopColor = colors.border.secondary;
     }
     else {
-        selectedTabBorderStyles.borderBottomColor = colors.brand.primary[80];
+        selectedTabBorderStyles.borderBottomColor = colors.primary[80];
         tabBorderStyles.borderBottomWidth = borderWidths.medium;
         tabBorderStyles.borderBottomColor = colors.border.secondary;
     }
@@ -49,7 +49,7 @@ const getThemedStyles = (theme, indicatorPosition) => {
         },
         selected: {
             backgroundColor: colors.background.primary,
-            color: colors.brand.primary[80],
+            color: colors.primary[80],
             ...selectedTabBorderStyles,
             ...components?.tabs?.selected,
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "1.2.28",
+  "version": "2.0.0",
   "main": "lib/index.js",
   "module": "dist/index.js",
   "react-native": "src/index.ts",
@@ -11,47 +11,32 @@
     "build:cjs": "tsc --project tsconfig.cjs.json && cp -a src/assets/icons lib/assets",
     "build:esm": "tsc --project tsconfig.esm.json && cp -a src/assets/icons dist/assets",
     "clean": "rimraf dist",
-    "dev": "yarn build:esm --watch",
+    "dev": "tsc --watch",
     "lint": "yarn typecheck && eslint src",
     "prebuild": "rimraf dist",
     "test": "jest",
-    "test:ci": "yarn test",
     "test:watch": "yarn test --watch",
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@aws-amplify/eslint-config-amplify-ui": "0.0.0",
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@testing-library/react-native": "^11.1.0",
-    "@types/react": "^17.0.2",
-    "@types/react-native": "^0.67.6",
-    "@types/react-test-renderer": "^17.0.1",
-    "babel-jest": "^28.0.3",
-    "eslint": "^8.44.0",
-    "jest": "^27.0.4",
-    "metro-react-native-babel-preset": "^0.70.2",
-    "react": "^17.0.2",
-    "react-native": "^0.68.1",
-    "react-native-safe-area-context": "^4.2.5",
-    "react-test-renderer": "^17.0.2",
-    "rimraf": "^3.0.2"
+    "@aws-amplify/react-native": "^1.0.1",
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-typescript": "^7.23.2",
+    "@testing-library/react-native": "^12.3.0",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "react-native-safe-area-context": "^4.7.3"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.8.1",
-    "@aws-amplify/ui-react-core": "2.1.33",
-    "@aws-amplify/ui-react-core-notifications": "1.0.10"
+    "@aws-amplify/ui": "6.0.0",
+    "@aws-amplify/ui-react-core": "3.0.0",
+    "@aws-amplify/ui-react-core-notifications": "2.0.0"
   },
   "peerDependencies": {
-    "aws-amplify": "^5.0.1",
-    "react": ">= 16.14.0",
-    "react-native": ">= 0.63.4",
-    "react-native-safe-area-context": ">= 4.2.5"
-  },
-  "resolutions": {
-    "@types/react": "^17.0.2"
+    "aws-amplify": "^6.0.2",
+    "react-native": "^0.70 || ^0.71 || ^0.72",
+    "react-native-safe-area-context": "^4.2.5"
   },
   "files": [
     "dist",

package/src/Authenticator/Authenticator.tsx

@@ -8,10 +8,9 @@ import {
   useAuthenticator,
   useAuthenticatorRoute,
   useAuthenticatorInitMachine,
+  useSetUserAgent,
 } from '@aws-amplify/ui-react-core';
 
-import { configureComponent } from '@aws-amplify/ui';
-
 import { useDeprecationWarning } from '../hooks';
 import { DefaultContainer, InnerContainer } from './common';
 import { TypedField, getRouteTypedFields } from './hooks';
@@ -24,8 +23,8 @@ import {
   ConfirmSignUp,
   ConfirmVerifyUser,
   ForceNewPassword,
-  ResetPassword,
-  SetupTOTP,
+  ForgotPassword,
+  SetupTotp,
   SignIn,
   SignUp,
   VerifyUser,
@@ -37,8 +36,8 @@ const DEFAULTS = {
   ConfirmSignUp,
   ConfirmVerifyUser,
   ForceNewPassword,
-  ResetPassword,
-  SetupTOTP,
+  ForgotPassword,
+  SetupTotp,
   SignIn,
   SignUp,
   VerifyUser,
@@ -61,19 +60,22 @@ function Authenticator({
   useDeprecationWarning({
     message:
       'The `passwordSettings` prop has been deprecated and will be removed in a future major version of Amplify UI.',
-    shouldWarn: !!options?.passwordSettings,
+    // shouldWarn: !!options?.passwordSettings,
+    /**
+     * @migration turn off until getConfig returns zero config
+     */
+    shouldWarn: false,
   });
 
-  React.useEffect(() => {
-    configureComponent({
-      packageName: '@aws-amplify/ui-react-native',
-      version: VERSION,
-    });
-  }, []);
+  useSetUserAgent({
+    componentName: 'Authenticator',
+    packageName: 'react-native',
+    version: VERSION,
+  });
 
   useAuthenticatorInitMachine(options);
 
-  const { authStatus, fields, route } = useAuthenticator(routePropSelector);
+  const { fields, route } = useAuthenticator(routePropSelector);
 
   const components = useMemo(
     // allow any to prevent TS from assuming that all fields are of type `TextFieldOptions`
@@ -84,8 +86,9 @@ function Authenticator({
   const { Component, props } = useAuthenticatorRoute({ components });
 
   const typedFields = getRouteTypedFields({ fields, route });
+  const isAuthenticatedRoute = route === 'authenticated' || route === 'signOut';
 
-  if (authStatus === 'authenticated') {
+  if (isAuthenticatedRoute) {
     return children ? <>{children}</> : null;
   }
 
@@ -110,8 +113,8 @@ Authenticator.ConfirmSignIn = ConfirmSignIn;
 Authenticator.ConfirmSignUp = ConfirmSignUp;
 Authenticator.ConfirmVerifyUser = ConfirmVerifyUser;
 Authenticator.ForceNewPassword = ForceNewPassword;
-Authenticator.ResetPassword = ResetPassword;
-Authenticator.SetupTOTP = SetupTOTP;
+Authenticator.ForgotPassword = ForgotPassword;
+Authenticator.SetupTotp = SetupTotp;
 Authenticator.SignIn = SignIn;
 Authenticator.SignUp = SignUp;
 Authenticator.VerifyUser = VerifyUser;

package/src/Authenticator/Defaults/{ResetPassword/ResetPassword.tsx → ForgotPassword/ForgotPassword.tsx}

@@ -9,9 +9,9 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultResetPasswordProps } from '../types';
+import { DefaultForgotPasswordProps } from '../types';
 
-const COMPONENT_NAME = 'ResetPassword';
+const COMPONENT_NAME = 'ForgotPassword';
 const {
   getResetYourPasswordText,
   getSendCodeText,
@@ -28,7 +28,7 @@ const ResetPassword = ({
   toSignIn,
   validationErrors,
   ...rest
-}: DefaultResetPasswordProps): JSX.Element => {
+}: DefaultForgotPasswordProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,

package/src/Authenticator/Defaults/ForgotPassword/index.ts

@@ -0,0 +1 @@
+export { default as ForgotPassword } from './ForgotPassword';