Adding Amplify UI components to a React Native project

In this section, we will cover the steps of how to implement Amplify UI components for a React Native app. Before we do that, we need to make sure we have installed the dependencies by entering the following command in the terminal:

yarn add aws-amplify aws-amplify-react-native

Once we have added the Amplify libraries to the Expo or React Native project, we would like to test the Authenticator UI library. There are two ways to do that: using the withAuthenticator Higher-Order Component (HOC) or using the actual Authenticator component. We picked the withAuthenticator component as an example. Let's add the following code to the existing App.tsx file:

import React from 'react';
import { withAuthenticator } from 'aws-amplify-react-native';
import Amplify from 'aws-amplify';
import awsExports from "./aws-exports";
Amplify.configure(awsExports);
const App = () => {
  ...