React Native - withAuthenticator - Custom Greetings UI

** Which Category is your question related to? **

• Authentication

** What AWS Services are you utilizing? **

• Cognito, AppSync

Hi There! Is it possible to replace the built in Greetings component in aws-amplify-react-native with a custom component when using withAuthenticator?

From looking at the related code for withAuthenticator here it appears that the Amplify’s built-in Greetings component is hard-coded.

We’ve followed the documentation for custom UI here and have successfully built our own components for SignIn, etc. Unfortunately we have been unable override Greetings.

[jordanranz]

Glad you got this working!

I think your solution is the preferred way to achieve what you are asking for. Since the Greetings component simply provides a UI wrapper for sign out and username text, it is simpler to use the Auth method mentioned above and create your own Header above your app. I will close this for now. Please reopen if you experience any related issue.

[jessedoyle]

Hi @jordanranz! Thanks for reminding me of this issue!

We ended up going down an alternate path to achieve the same results (I’ll explain this later), but I can give a brief overview of the issue we encountered.

Unfortunately I don’t have the exact code we had written handy, but it was similar to this:

// App.js
import React from 'react';
import { StyleSheet } from 'react-native';
import { withAuthenticator } from 'aws-amplify-react-native';
import { 
  Greetings,
  Loading,
  SignIn,
  ForgotPassword
} from './customAuth';

const authComponents = [
  <Greetings />
  <Loading />,
  <SignIn />,
  <ForgotPassword />,
]

const App = ...

export default withAuthenticator(
  App,
  false,
  authComponents,
  null,
  StyleSheet.create({
    container: {
      flex: 1,
    },
  }),
);

// customAuth/Greetings.js
import React from 'react';
import { 
  Text,
  View
} from 'react-native';
import { Auth } from 'aws-amplify';
import { Greetings } from 'aws-amplify-react-native';

export default class CustomGreetings extends Greetings {
  render() {
    const name = Auth.user && Auth.user.username;
    const message = `Hello, ${name}`;

    return (
      <View>
        <Text>{message}</Text>
      </View>
    );
  }
}

Unfortunately this approach didn’t work for us and the custom Greetings component didn’t appear to display in the Authenticator component.

I wasn’t able to troubleshoot the root issue, but I believe the custom Greetings component was not displayed due to the following:

• The Greetings component defines a render function as opposed to a showComponent function.
• The Greetings class does not set the _validAuthStates property in the constructor (example).

The approach we ultimately went forward with was creating our own custom component to display the user message by reading from Auth.currentAuthenticatedUser() directly. Our custom component was able to initiate a sign out by utilizing the onStateChange prop that is passed down from withAuthenticator.

I would say we were able to work around the issue we were encountering, so feel free to close this issue if necessary.