@aws-amplify/ui-react-native 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @aws-amplify/ui-react-native
 
+## 1.2.1
+
+### Patch Changes
+
+- [#3216](https://github.com/aws-amplify/amplify-ui/pull/3216) [`a4c5feea8`](https://github.com/aws-amplify/amplify-ui/commit/a4c5feea83057dc6fd615e2547c9456a81302060) Thanks [@calebpollman](https://github.com/calebpollman)! - fix(rna): add Field component to address iOS TextInput secureTextEntry bug
+
+- Updated dependencies [[`db8f019a7`](https://github.com/aws-amplify/amplify-ui/commit/db8f019a7737c4762ff19c1b03c7c06625277989), [`cbbf51f53`](https://github.com/aws-amplify/amplify-ui/commit/cbbf51f53c428dc378d8986ae27c3bf9e52f67ab)]:
+  - @aws-amplify/ui@5.4.1
+  - @aws-amplify/ui-react-core@2.1.6
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/Authenticator/common/DefaultFormFields/DefaultTextFormFields.js

@@ -1,19 +1,14 @@
 import React, { Fragment } from 'react';
 import { View } from 'react-native';
 import { getErrors } from '@aws-amplify/ui';
-import { PasswordField, PhoneNumberField, TextField, } from '../../../primitives';
+import Field from './Field';
 import { FieldErrors } from './FieldErrors';
 const DefaultTextFormFields = ({ fieldContainerStyle, fieldErrorsContainer, fieldErrorStyle, fieldStyle, fields = [], isPending, style, validationErrors, }) => {
     const formFields = fields.map(({ name, type, ...field }) => {
         const errors = validationErrors ? getErrors(validationErrors?.[name]) : [];
         const hasError = errors?.length > 0;
-        const Field = type === 'password'
-            ? PasswordField
-            : type === 'phone'
-                ? PhoneNumberField
-                : TextField;
         return (<Fragment key={name}>
-        <Field {...field} disabled={isPending} error={hasError} fieldStyle={fieldStyle} key={name} style={fieldContainerStyle}/>
+        <Field {...field} disabled={isPending} error={hasError} fieldStyle={fieldStyle} key={name} style={fieldContainerStyle} type={type}/>
         <FieldErrors errors={errors} errorStyle={fieldErrorStyle} style={fieldErrorsContainer}/>
       </Fragment>);
     });

package/dist/Authenticator/common/DefaultFormFields/Field.d.ts

@@ -0,0 +1,6 @@
+import { FieldProps } from './types';
+declare const Field: {
+    ({ type, ...rest }: FieldProps): JSX.Element;
+    displayName: string;
+};
+export default Field;

package/dist/Authenticator/common/DefaultFormFields/Field.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+import { PasswordField, PhoneNumberField, TextField, } from '../../../primitives';
+import { platform } from '../../../utils';
+const { IS_IOS } = platform;
+// to prevent issues with iOS when multiple `TextInput` components have `secureTextEntry`
+// set to `true`, insert a "hidden" `TextInput` after each `PasswordField`
+// Issue reference: https://github.com/facebook/react-native/issues/21911
+const HIDDEN_INPUT_PROPS = {
+    // prevent iOS screen reader from picking up element
+    accessibilityElementsHidden: true,
+    // prevent `TextInput` from capturing touch events
+    pointerEvents: 'none',
+    // this workaround requires the `height` and `width` applied to the `TextInput`
+    // are greater than `0`
+    // NOTE: do not attempt to set an opacity value here to further hide the element,
+    // it will cause the issues mitigated by this workaround to re-surface
+    style: { backgroundColor: 'transparent', height: 0.1, width: 0.1 },
+};
+const HiddenInput = () => <TextInput {...HIDDEN_INPUT_PROPS}/>;
+const Field = ({ type, ...rest }) => {
+    const isPassword = type === 'password';
+    const Field = isPassword
+        ? PasswordField
+        : type === 'phone'
+            ? PhoneNumberField
+            : TextField;
+    return IS_IOS && isPassword ? (<>
+      <Field {...rest}/>
+      <HiddenInput />
+    </>) : (<Field {...rest}/>);
+};
+Field.displayName = 'Field';
+export default Field;

package/dist/Authenticator/common/DefaultFormFields/types.d.ts

@@ -1,6 +1,9 @@
 import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { AuthenticatorFormFieldsComponent } from '@aws-amplify/ui-react-core';
 import { RadioFieldOptions, TextFieldOptionsType } from '../../hooks';
+export declare type FieldProps = Omit<TextFieldOptionsType, 'name'> & {
+    disabled: boolean;
+};
 export interface FieldErrorsProps {
     errors: string[];
     errorStyle?: StyleProp<TextStyle>;

package/dist/InAppMessaging/components/CarouselMessage/CarouselMessage.js

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { Carousel } from '../../../primitives';
+import { IN_APP_MESSAGING_TEST_ID } from '../../constants';
 import { MessageWrapper } from '../MessageWrapper';
 import CarouselMessageItem from './CarouselMessageItem';
 import { defaultStyle } from './styles';
@@ -15,6 +16,6 @@ export default function CarouselMessage(props) {
     }), [style]);
     const renderItem = ({ item }) => (<CarouselMessageItem {...item} {...rest}/>);
     return (<MessageWrapper disableSafeAreaView>
-      <Carousel data={data ?? []} renderItem={renderItem} indicatorActiveStyle={indicatorStyle.active} indicatorInactiveStyle={indicatorStyle.inactive}/>
+      <Carousel data={data ?? []} renderItem={renderItem} indicatorActiveStyle={indicatorStyle.active} indicatorInactiveStyle={indicatorStyle.inactive} testID={IN_APP_MESSAGING_TEST_ID.CAROUSEL}/>
     </MessageWrapper>);
 }

package/dist/InAppMessaging/constants.d.ts

@@ -29,4 +29,5 @@ export declare const IN_APP_MESSAGING_TEST_ID: {
     IMAGE: string;
     PRIMARY_BUTTON: string;
     SECONDARY_BUTTON: string;
+    CAROUSEL: string;
 };

package/dist/InAppMessaging/constants.js

@@ -41,4 +41,5 @@ export const IN_APP_MESSAGING_TEST_ID = {
     IMAGE: 'in-app-messaging--image',
     PRIMARY_BUTTON: 'in-app-messaging--primary-button',
     SECONDARY_BUTTON: 'in-app-messaging--secondary-button',
+    CAROUSEL: 'in-app-messaging--carousel',
 };

package/dist/primitives/Carousel/types.d.ts

@@ -6,6 +6,7 @@ export interface CarouselProps<T> {
     onClose?: () => void;
     renderItem: ListRenderItem<T>;
     style?: StyleProp<ViewStyle>;
+    testID?: string;
 }
 export interface CarouselPageIndicatorProps {
     activeStyle?: StyleProp<ViewStyle>;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.0";
+export declare const VERSION = "1.2.1";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '1.2.0';
+export const VERSION = '1.2.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -43,8 +43,8 @@
     "type-fest": "^2.3.4"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.4.0",
-    "@aws-amplify/ui-react-core": "2.1.5"
+    "@aws-amplify/ui": "5.4.1",
+    "@aws-amplify/ui-react-core": "2.1.6"
   },
   "peerDependencies": {
     "aws-amplify": ">= 5.0.1",

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

@@ -249,6 +249,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Array [
@@ -387,6 +398,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
   </View>,
   <View
     accessibilityRole="alert"
@@ -795,6 +817,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Array [
@@ -933,6 +966,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
   </View>,
   <View
     accessibilityRole="button"

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

@@ -141,6 +141,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
   </View>,
   <View
     accessibilityRole="alert"
@@ -450,6 +461,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
   </View>,
   <View
     accessibilityRole="button"
@@ -704,6 +726,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Object {

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

@@ -249,6 +249,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
   </View>,
   <View
     accessibilityRole="button"
@@ -656,6 +667,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
   </View>,
   <View
     accessibilityRole="button"
@@ -1015,6 +1037,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
   </View>,
   <View
     accessibilityRole="alert"

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

@@ -249,6 +249,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Array [
@@ -387,6 +398,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Array [
@@ -837,6 +859,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Array [
@@ -975,6 +1008,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Array [
@@ -1371,6 +1415,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Array [
@@ -1512,6 +1567,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Array [
@@ -1963,6 +2029,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Array [
@@ -2101,6 +2178,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Array [
@@ -2642,6 +2730,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Array [
@@ -2783,6 +2882,17 @@ Array [
         </View>
       </View>
     </View>
+    <TextInput
+      accessibilityElementsHidden={true}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "height": 0.1,
+          "width": 0.1,
+        }
+      }
+    />
     <View
       style={
         Array [

package/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx

@@ -3,12 +3,7 @@ import { View } from 'react-native';
 
 import { getErrors } from '@aws-amplify/ui';
 
-import {
-  PasswordField,
-  PhoneNumberField,
-  TextField,
-} from '../../../primitives';
-
+import Field from './Field';
 import { FieldErrors } from './FieldErrors';
 import { DefaultTextFormFieldsComponent } from './types';
 
@@ -27,13 +22,6 @@ const DefaultTextFormFields: DefaultTextFormFieldsComponent = ({
 
     const hasError = errors?.length > 0;
 
-    const Field =
-      type === 'password'
-        ? PasswordField
-        : type === 'phone'
-        ? PhoneNumberField
-        : TextField;
-
     return (
       <Fragment key={name}>
         <Field
@@ -43,6 +31,7 @@ const DefaultTextFormFields: DefaultTextFormFieldsComponent = ({
           fieldStyle={fieldStyle}
           key={name}
           style={fieldContainerStyle}
+          type={type}
         />
         <FieldErrors
           errors={errors}

package/src/Authenticator/common/DefaultFormFields/Field.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { TextInput, TextInputProps } from 'react-native';
+
+import {
+  PasswordField,
+  PhoneNumberField,
+  TextField,
+} from '../../../primitives';
+import { platform } from '../../../utils';
+import { FieldProps } from './types';
+
+const { IS_IOS } = platform;
+
+// to prevent issues with iOS when multiple `TextInput` components have `secureTextEntry`
+// set to `true`, insert a "hidden" `TextInput` after each `PasswordField`
+// Issue reference: https://github.com/facebook/react-native/issues/21911
+const HIDDEN_INPUT_PROPS: TextInputProps = {
+  // prevent iOS screen reader from picking up element
+  accessibilityElementsHidden: true,
+  // prevent `TextInput` from capturing touch events
+  pointerEvents: 'none',
+  // this workaround requires the `height` and `width` applied to the `TextInput`
+  // are greater than `0`
+  // NOTE: do not attempt to set an opacity value here to further hide the element,
+  // it will cause the issues mitigated by this workaround to re-surface
+  style: { backgroundColor: 'transparent', height: 0.1, width: 0.1 },
+};
+
+const HiddenInput = () => <TextInput {...HIDDEN_INPUT_PROPS} />;
+
+const Field = ({ type, ...rest }: FieldProps): JSX.Element => {
+  const isPassword = type === 'password';
+  const Field = isPassword
+    ? PasswordField
+    : type === 'phone'
+    ? PhoneNumberField
+    : TextField;
+
+  return IS_IOS && isPassword ? (
+    <>
+      <Field {...rest} />
+      <HiddenInput />
+    </>
+  ) : (
+    <Field {...rest} />
+  );
+};
+
+Field.displayName = 'Field';
+export default Field;

package/src/Authenticator/common/DefaultFormFields/types.ts

@@ -3,6 +3,10 @@ import { AuthenticatorFormFieldsComponent } from '@aws-amplify/ui-react-core';
 
 import { RadioFieldOptions, TextFieldOptionsType } from '../../hooks';
 
+export type FieldProps = Omit<TextFieldOptionsType, 'name'> & {
+  disabled: boolean;
+};
+
 export interface FieldErrorsProps {
   errors: string[];
   errorStyle?: StyleProp<TextStyle>;