diff --git a/.changeset/selfish-zebras-decide.md b/.changeset/selfish-zebras-decide.md new file mode 100644 index 00000000000..f860caad1fd --- /dev/null +++ b/.changeset/selfish-zebras-decide.md @@ -0,0 +1,5 @@ +--- +"@aws-amplify/ui-react-native": patch +--- + +fix(rna): prefer route over authStatus for rendering children diff --git a/examples/react-native/src/App/App.tsx b/examples/react-native/src/App/App.tsx index 1100bf26ca6..8bf8fed20e2 100644 --- a/examples/react-native/src/App/App.tsx +++ b/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 ; case 'BasicExample': diff --git a/packages/react-native/src/Authenticator/Authenticator.tsx b/packages/react-native/src/Authenticator/Authenticator.tsx index a956f069e00..4b5a443d568 100644 --- a/packages/react-native/src/Authenticator/Authenticator.tsx +++ b/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; } diff --git a/packages/react-native/src/Authenticator/__tests__/Authenticator.spec.tsx b/packages/react-native/src/Authenticator/__tests__/Authenticator.spec.tsx index 30149fe5a62..002a3ecdd71 100644 --- a/packages/react-native/src/Authenticator/__tests__/Authenticator.spec.tsx +++ b/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( - - - - ); + const { getByTestId, toJSON } = render( + + + + ); - 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', diff --git a/packages/react-native/src/Authenticator/__tests__/__snapshots__/Authenticator.spec.tsx.snap b/packages/react-native/src/Authenticator/__tests__/__snapshots__/Authenticator.spec.tsx.snap index 09dedec06ee..52ba50e9bd1 100644 --- a/packages/react-native/src/Authenticator/__tests__/__snapshots__/Authenticator.spec.tsx.snap +++ b/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`] = ` `; -exports[`Authenticator handles \`authStatus\` of authenticated as expected 1`] = ` +exports[`Authenticator handles a \`route\` value of authenticated as expected 1`] = ` + + Test Children + +`; + +exports[`Authenticator handles a \`route\` value of signOut as expected 1`] = ` diff --git a/packages/react-native/src/Authenticator/__tests__/withAuthenticator.spec.tsx b/packages/react-native/src/Authenticator/__tests__/withAuthenticator.spec.tsx index 4d5764e8f29..cbc7e401969 100644 --- a/packages/react-native/src/Authenticator/__tests__/withAuthenticator.spec.tsx +++ b/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();