Customizing Amplify UI components for Expo and React Native apps
AWS Amplify for React Native is a little bit less customizable compared to Amplify for ReactJS – perhaps that's because it is still new. We can only customize the sign-up screen, instead of all the screens as we did with the ReactJS app. But we can still configure what is to be used as the username, choosing between username
, email
, and phone_number
. Let's open App.tsx
and do the following:
- Import the
react
andreact-native
libraries:import React from 'react'; import { Text } from 'react-native';
- Import the
withAuthenticator
component from theaws-amplify-react-native
library. This is an HOC, which is a function that takes a component and returns a new component. In our case, we will use it to wrap around theApp
component and return it with the Amplify Authenticator component:import { withAuthenticator } from 'aws-amplify-react-native'; import Amplify from &apos...