Is it possible to customize default Sign Up, Sign In screens of aws-amplify-react-native package?

Question

In order to have default auth screen, I can merely do this (https://github.com/aws-samples/aws-mobile-react-native-starter):

import { withAuthenticator } from 'aws-amplify-react-native';
export default withAuthenticator(App);

And I get pretty ugly default out-of-the-box login screen:

Then docs say I can't modify default, I have to create my own (https://github.com/aws-samples/aws-mobile-react-native-starter):

You can either use this Higher Order Component, or build your own UI and use the APIs from Amplify too.

But also they thay say, that I can customize default login screens (https://github.com/aws/aws-amplify/blob/master/README.md):

AWS Amplify will provide you customizable UI for common use cases such as user registration and login.

Question is, can we customize default screen or we must create our own screens if we want something fancy?

Answer 1

All the Amplify Authenticator components can be imported separately from aws-amplify-react-native. You can copy the source code the repo (https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native/src) to your own project, modify it and import from there. * If you want to get the package for other framework - React, Vue, Angular, etc, visit here https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native.

Currently, in my project, I am customizing SignUp, SignIn and ConfigrmSignUp components as shown below. This is the suggested way of creating your own UI and it works seamlessly with the amplify authenticator.

Check out more here: https://aws-amplify.github.io/docs/js/authentication#create-your-own-ui

import {
  withAuthenticator,
  SignUp,
  ConfirmSignIn,
  ConfirmSignUp,
  ForgotPassword,
  VerifyContact,
  Greetings,
  Loading,
  RequireNewPassword
} from 'aws-amplify-react-native';

import { 
  Authenticator, 
  ConfirmSignUpScreen, <----- customized authenticator component
  SignUpScreen, <----- customized authenticator component
  SignInScreen <----- customized authenticator component
} from './screens/auth';

export default withAuthenticator(App, false, [
  <Loading />
  <SignInScreen />  <----- customized authenticator component
  <ConfirmSignIn />  
  <VerifyContact />
  <SignUpScreen />  <----- customized authenticator component
  <ConfirmSignUpScreen />  <----- customized authenticator component
  <ForgotPassword />
  <RequireNewPassword />
  <Greetings />
]);