fix(rna): prefer route over authStatus for rendering children (#4712)

.changeset/selfish-zebras-decide.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-native": patch
+---
+
+fix(rna): prefer route over authStatus for rendering children

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

@@ -5,6 +5,10 @@ import { LaunchArguments } from 'react-native-launch-arguments';
 
 import { EXAMPLE_APP_NAME } from '@env';
 
+// .env file or launch argument passed from Detox
+const getExampleAppName = () =>
+  EXAMPLE_APP_NAME ?? LaunchArguments.value().EXAMPLE_APP_NAME;
+
 /**
  * `Authenticator` Example and Demo Apps
  */
@@ -89,9 +93,11 @@ const WithAuthenticator = React.lazy(
 );
 
 export const ExampleComponent = () => {
-  // .env file or launch argument passed from Detox
-  const APP = EXAMPLE_APP_NAME ?? LaunchArguments.value().EXAMPLE_APP_NAME;
-  switch (APP) {
+  const appName = getExampleAppName();
+
+  console.log(`Running Example App: ${appName}`);
+
+  switch (appName) {
     case 'DemoExample':
       return <DemoExample />;
     case 'BasicExample':

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

@@ -75,7 +75,7 @@ function Authenticator({
 
   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`
@@ -86,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;
   }
 

packages/react-native/src/Authenticator/__tests__/Authenticator.spec.tsx

@@ -81,24 +81,27 @@ describe('Authenticator', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('handles `authStatus` of authenticated as expected', () => {
-    useAuthenticatorSpy.mockImplementation(
-      () => ({ authStatus: 'authenticated' }) as unknown as UseAuthenticator
-    );
+  it.each(['authenticated', 'signOut'])(
+    'handles a `route` value of %s as expected',
+    (route) => {
+      useAuthenticatorSpy.mockImplementation(
+        () => ({ route }) as unknown as UseAuthenticator
+      );
 
-    const { getByTestId, toJSON } = render(
-      <Authenticator>
-        <TestChildren />
-      </Authenticator>
-    );
+      const { getByTestId, toJSON } = render(
+        <Authenticator>
+          <TestChildren />
+        </Authenticator>
+      );
 
-    const children = getByTestId(CHILD_TEST_ID);
+      const children = getByTestId(CHILD_TEST_ID);
 
-    expect(children.type).toBe('Text');
-    expect(children.props.children).toBe(CHILD_CONTENT);
+      expect(children.type).toBe('Text');
+      expect(children.props.children).toBe(CHILD_CONTENT);
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 
   it.each(['unauthenticated', 'configuring'])(
     'handles an authStatus of %s as expected',

packages/react-native/src/Authenticator/__tests__/__snapshots__/Authenticator.spec.tsx.snap

@@ -59,7 +59,15 @@ exports[`Authenticator behaves as expected in the happy path 1`] = `
 </SafeAreaProvider>
 `;
 
-exports[`Authenticator handles \`authStatus\` of authenticated as expected 1`] = `
+exports[`Authenticator handles a \`route\` value of authenticated as expected 1`] = `
+<Text
+  testID="child-test-id"
+>
+  Test Children
+</Text>
+`;
+
+exports[`Authenticator handles a \`route\` value of signOut as expected 1`] = `
 <Text
   testID="child-test-id"
 >

packages/react-native/src/Authenticator/__tests__/withAuthenticator.spec.tsx

@@ -61,8 +61,8 @@ describe('withAuthenticator', () => {
     useAuthenticatorSpy.mockImplementation(
       () =>
         ({
-          authStatus: 'authenticated',
-        } as unknown as UIReactCoreModule.UseAuthenticator)
+          route: 'authenticated',
+        }) as unknown as UIReactCoreModule.UseAuthenticator
     );
 
     const { toJSON, getByTestId } = render(<TestApp />);