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

问题

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?

回答1:

According to the docs, you should be able to wrap your app in a HOC (Authenticator) instead of using the withAuthenticator.

import { Authenticator } from 'aws-amplify-react';

export default class AppWithAuth extends Component {
 render(){
    return (
      <Authenticator>
        <App />
      </Authenticator>
    );
  }
}

回答2:

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 />
]);

回答3:

I had the same probleme with customise the signUp and SignIn Component for aws-amplify so I created this lib (aws-amplify-react-custom-ui) . this is the example for customise the signIn :

    import SignIn from "./SignIn";
    import AmplifyCustomUi from "aws-amplify-react-custom-ui";
    AmplifyCustomUi.setSignIn(SignIn);

for more infroamtion : https://github.com/ysfmag/aws-amplify-react-custom-ui

回答4:

Yes, we could customize the screens with the aws-amplify-react-native package. The Amplify CLI API's are called with our custom screens. The logic may differ by use cases, here's a glimpse of code that may help you ahead kindly ref this doc

   import React, { Component } from 'react';
    import { View } from 'react-native';
    import {
      Authenticator,
      AmplifyTheme
    } from 'aws-amplify-react-native';
    // Custom  screens
    import Home from './screens/Home';
    import SignIn from './screens/SignIn';
    import SignUp from './screens/SignUp';
    import ConfirmSignUp from './screens/ConfirmSignUp';
    import ForgotPassword from './screens/ForgotPassword';
    //Custom theme
    const theme = {
      ...AmplifyTheme,
      container: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-around',
        paddingTop: 10,
        width: '100%',
        marginTop: 30
      },
    }
    class App extends Component {

      render() {
        return (
          <View style={{ flex: 1 }}>
            <Authenticator theme={theme} hideDefault={true} hide="Home" 
            includeGreetings={true}
            >
              <SignIn />
              <SignUp/>
              <ConfirmSignUp />
              <ForgotPassword />
              <Home />
            </Authenticator>
          </View>
        );
      }
    }

    export default App;

;)

来源：https://stackoverflow.com/questions/50859539/is-it-possible-to-customize-default-sign-up-sign-in-screens-of-aws-amplify-reac