feat(rna): add DefaultContent and override styles

examples/react-native/index.js

@@ -9,7 +9,7 @@ import { name as appName } from './app.json';
 import { setupStorybook } from './storybook';
 
 //TODO: replace with env var
-const initStorybook = false;
+const initStorybook = true;
 
 const { StorybookRoot } = setupStorybook(initStorybook);
 

examples/react-native/ios/Podfile.lock

@@ -286,7 +286,7 @@ PODS:
     - React-Core
   - react-native-netinfo (8.3.1):
     - React-Core
-  - react-native-safe-area-context (4.3.3):
+  - react-native-safe-area-context (4.4.1):
     - RCT-Folly
     - RCTRequired
     - RCTTypeSafety
@@ -564,7 +564,7 @@ SPEC CHECKSUMS:
   React-logger: f79dd3cc0f9b44f5611c6c7862badd891a862cf8
   react-native-get-random-values: a6ea6a8a65dc93e96e24a11105b1a9c8cfe1d72a
   react-native-netinfo: 1a6035d3b9780221d407c277ebfb5722ace00658
-  react-native-safe-area-context: b456e1c40ec86f5593d58b275bd0e9603169daca
+  react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
   React-perflogger: 30ab8d6db10e175626069e742eead3ebe8f24fd5
   React-RCTActionSheet: 4b45da334a175b24dabe75f856b98fed3dfd6201
   React-RCTAnimation: d6237386cb04500889877845b3e9e9291146bc2e

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

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { AuthenticatorDemo } from '../features/Authenticator';
+// import Example from '../features/Authenticator/Demo/Example';
+import Example from '../features/Authenticator/Styles/Example';
 // import { Demo as InAppDemo } from '../features/InAppMessaging';
 
 const App = () => {
-  return <AuthenticatorDemo />;
-  // return <InAppDemo />;
+  return <Example />;
 };
 
 export default App;

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { useDeepLinkingDebug } from '../../../hooks';
-
 import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
 import { Amplify } from 'aws-amplify';
 
@@ -19,8 +17,6 @@ function SignOutButton() {
 }
 
 function App() {
-  useDeepLinkingDebug();
-
   return (
     <Authenticator.Provider>
       <Authenticator>

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

@@ -0,0 +1,50 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
+
+import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
+import { Amplify } from 'aws-amplify';
+
+import { Button } from '../../../ui';
+
+Amplify.configure({});
+
+const MyHeader = ({
+  children,
+  style,
+}: {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}) => (
+  <View style={style}>
+    <Text style={{ fontSize: 36 }}>{children}</Text>
+  </View>
+);
+
+function SignOutButton() {
+  const { signOut } = useAuthenticator();
+  return <Button onPress={signOut}>Sign Out</Button>;
+}
+
+function App() {
+  return (
+    <Authenticator.Provider>
+      <Authenticator
+        components={{
+          SignIn: (props) => (
+            <Authenticator.SignIn {...props} Header={MyHeader} />
+          ),
+        }}
+      >
+        <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/storybook/stories/Authenticator.stories.tsx

@@ -147,7 +147,9 @@ const signUpProps = {
 const verifyUserProps = {
   ...sharedProps,
   ...getComponentSlots(Authenticator.VerifyUser),
-  fields: [],
+  fields: [
+    { name: 'email', type: 'radio' as const, value: 'jeff@example.com' },
+  ],
   skipVerification: noop,
 };
 

packages/react-core/src/Authenticator/index.ts

@@ -11,7 +11,11 @@ export {
   Overrides as AuthenticatorComponentOverrides,
   Defaults as AuthenticatorComponentDefaults,
   DefaultProps as AuthenticatorComponentDefaultProps,
+  FooterComponent as AuthenticatorFooterComponent,
+  FormFieldsComponent as AuthenticatorFormFieldsComponent,
+  HeaderComponent as AuthenticatorHeaderComponent,
   isComponentRouteKey as isAuthenticatorComponentRouteKey,
+  AuthenticatorRouteComponentKey,
   AuthenticatorRouteComponentName,
   AuthenticatorLegacyField,
   AuthenticatorMachineContext,

packages/react-core/src/index.ts

@@ -3,9 +3,13 @@ export {
   AuthenticatorComponentDefaults,
   AuthenticatorComponentDefaultProps,
   AuthenticatorComponentOverrides,
+  AuthenticatorFooterComponent,
+  AuthenticatorFormFieldsComponent,
+  AuthenticatorHeaderComponent,
   AuthenticatorLegacyField,
   AuthenticatorMachineContext,
   AuthenticatorProvider,
+  AuthenticatorRouteComponentKey,
   AuthenticatorRouteComponentName,
   isAuthenticatorComponentRouteKey,
   resolveAuthenticatorComponents,

packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { authenticatorTextUtil } from '@aws-amplify/ui';
 
 import { Button, ErrorMessage } from '../../../primitives';
-import { DefaultFooter, DefaultFormFields, DefaultHeader } from '../../common';
+import {
+  DefaultFooter,
+  DefaultTextFormFields,
+  DefaultHeader,
+} from '../../common';
 import { useFieldValues } from '../../hooks';
 
 import { DefaultConfirmResetPasswordComponent } from '../types';
@@ -58,7 +62,7 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
 };
 
 ConfirmResetPassword.Footer = DefaultFooter;
-ConfirmResetPassword.FormFields = DefaultFormFields;
+ConfirmResetPassword.FormFields = DefaultTextFormFields;
 ConfirmResetPassword.Header = DefaultHeader;
 
 ConfirmResetPassword.displayName = COMPONENT_NAME;