chore(rna): add labelHidden support and example apps (#3043)

Author: calebpollman

examples/react-native/src/App/App.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 
-// import Example from '../features/Authenticator/Demo/Example';
-import Example from '../features/Authenticator/Slots/Example';
+import Example from '../features/Authenticator/Demo/Example';
+// import Example from '../features/Authenticator/Fields/Example';
+// import Example from '../features/Authenticator/LabelHidden/Example';
+// import Example from '../features/Authenticator/Slots/Example';
 // import Example from '../features/Authenticator/Styles/Example';
 
 // import { Demo as InAppDemo } from '../features/InAppMessaging';

examples/react-native/src/features/Authenticator/Demo/Example.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Button, StyleSheet, View } from 'react-native';
 
 import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
 import { Amplify } from 'aws-amplify';
 
-import { Button } from '../../../ui';
-
 // replace with actual amplify config from environments
 // import config from '../../../aws-exports';
 
 Amplify.configure({});
 
 function SignOutButton() {
   const { signOut } = useAuthenticator();
-  return <Button onPress={signOut}>Sign Out</Button>;
+  return <Button onPress={signOut} title="Sign Out" />;
 }
 
 function App() {

examples/react-native/src/features/Authenticator/Fields/Example.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Button, StyleSheet, View } from 'react-native';
+
+import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
+import { Amplify } from 'aws-amplify';
+
+// replace with actual amplify config from environments
+// import config from '../../../aws-exports';
+
+Amplify.configure({});
+
+function SignOutButton() {
+  const { signOut } = useAuthenticator();
+  return <Button onPress={signOut} title="Sign Out" />;
+}
+
+function App() {
+  return (
+    <Authenticator.Provider>
+      <Authenticator
+        components={{
+          SignUp: ({ fields, ...props }) => (
+            <Authenticator.SignUp
+              {...props}
+              fields={[
+                ...fields,
+                {
+                  name: 'preferred_username',
+                  label: 'Preferred Username',
+                  type: 'default',
+                  placeholder: 'Enter your preferred username',
+                },
+              ]}
+            />
+          ),
+        }}
+      >
+        <View style={style.container}>
+          <SignOutButton />
+        </View>
+      </Authenticator>
+    </Authenticator.Provider>
+  );
+}
+
+const style = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});
+
+export default App;

examples/react-native/src/features/Authenticator/LabelHidden/Example.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Button, StyleSheet, View } from 'react-native';
+
+import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
+import { Amplify } from 'aws-amplify';
+
+// replace with actual amplify config from environments
+// import config from '../../../aws-exports';
+
+Amplify.configure({});
+
+function SignOutButton() {
+  const { signOut } = useAuthenticator();
+  return <Button onPress={signOut} title="Sign Out" />;
+}
+
+function App() {
+  return (
+    <Authenticator.Provider>
+      <Authenticator
+        components={{
+          SignIn: ({ fields, ...props }) => (
+            <Authenticator.SignIn
+              {...props}
+              fields={fields.map((field) => ({ ...field, labelHidden: true }))}
+            />
+          ),
+        }}
+      >
+        <View style={style.container}>
+          <SignOutButton />
+        </View>
+      </Authenticator>
+    </Authenticator.Provider>
+  );
+}
+
+const style = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});
+
+export default App;

packages/react-native/src/Authenticator/hooks/types.ts

@@ -17,19 +17,20 @@ export type TextFieldOnBlur = TextFieldProps['onBlur'];
 export type OnChangeText = TextFieldProps['onChangeText'];
 
 type FieldOptions<FieldProps, Type extends AuthenticatorFieldTypeKey> = {
-  type: Type;
   name: string;
-  required?: boolean;
   onBlur?: Type extends 'radio' ? RadioFieldOnBlur : TextFieldOnBlur;
+  required?: boolean;
+  type: Type;
 } & Omit<FieldProps, 'disabled' | 'onBlur'>;
 
 type PasswordFieldOptions = FieldOptions<PasswordFieldProps, 'password'>;
 type PhoneFieldOptions = FieldOptions<PhoneNumberFieldProps, 'phone'>;
 type DefaultFieldOptions = FieldOptions<TextFieldProps, 'default'>;
-export type TextFieldOptionsType =
+export type TextFieldOptionsType = (
   | PasswordFieldOptions
   | PhoneFieldOptions
-  | DefaultFieldOptions;
+  | DefaultFieldOptions
+) & { labelHidden?: boolean };
 
 export type RadioFieldOptions = FieldOptions<RadioProps<string>, 'radio'>;
 

packages/react-native/src/Authenticator/hooks/useFieldValues/__tests__/useFieldValues.spec.ts

@@ -14,6 +14,7 @@ import useFieldValues from '../useFieldValues';
 const warnSpy = jest.spyOn(Logger.prototype, 'warn').mockImplementation();
 
 const textField = {
+  label: 'test',
   type: 'default',
   name: 'test',
   value: 'testValue',
@@ -61,6 +62,28 @@ describe('useFieldValues', () => {
     });
   });
 
+  it('removes hidden labels from text fields', () => {
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        fields: [{ ...textField, labelHidden: true }],
+      })
+    );
+    expect(result.current).toStrictEqual({
+      disableFormSubmit: false,
+      fields: [
+        {
+          ...textField,
+          label: undefined,
+          onBlur: expect.any(Function),
+          onChangeText: expect.any(Function),
+          value: undefined,
+        },
+      ],
+      handleFormSubmit: expect.any(Function),
+    });
+  });
+
   it('returns the expected values for radio fields', () => {
     const { result } = renderHook(() =>
       useFieldValues({
@@ -205,6 +228,7 @@ describe('useFieldValues', () => {
       fields: [
         {
           ...mockTextField,
+          label: undefined,
           onBlur: expect.any(Function),
           onChangeText: expect.any(Function),
           value: undefined,
@@ -216,6 +240,7 @@ describe('useFieldValues', () => {
 
   it('enables form submit if required fields have values', () => {
     const mockTextField = {
+      label: 'test',
       type: 'default',
       name: 'test',
       required: true,

packages/react-native/src/Authenticator/hooks/useFieldValues/useFieldValues.ts

@@ -50,7 +50,7 @@ export default function useFieldValues<FieldType extends TypedField>({
       return { ...field, onChange };
     }
 
-    const { name } = field;
+    const { name, label, labelHidden, ...rest } = field;
 
     const onBlur: TextFieldOnBlur = (event) => {
       // call `onBlur` passed as text `field` option
@@ -70,7 +70,14 @@ export default function useFieldValues<FieldType extends TypedField>({
       setValues({ ...values, [name]: value });
     };
 
-    return { ...field, onBlur, onChangeText, name, value: values[name] };
+    return {
+      ...rest,
+      label: labelHidden ? undefined : label,
+      onBlur,
+      onChangeText,
+      name,
+      value: values[name],
+    };
   }) as FieldType[];
 
   const disableFormSubmit = isRadioFieldComponent