Build a serverless React Native mobile app by using AWS Amplify

Set up a React Native development environment.

For instructions, see Setting up the development environment in the React Native documentation.

Create and run the ToDoList React Native mobile app in iOS Simulator.

Create the backend services needed to support the app in Amplify.

For the ToDoList app setup used in this pattern, apply the following example configuration.

Example React Native Amplify app configuration settings

? Name: ToDoListAmplify

? Environment: dev

? Default editor: Visual Studio Code

? App type: javascript

? Javascript framework: react-native

? Source Directory Path: src

? Distribution Directory Path: /

? Build Command: npm run-script build

? Start Command: npm run-script start

? Select the authentication method you want to use: AWS profile

? Please choose the profile you want to use: default

For more information, see Create a new Amplify backend in the Amplify Dev Center documentation.

Note: The amplify init command provisions the following resources by using AWS CloudFormation: 

Create an Amazon Cognito authentication service.

For the ToDoList app setup used in this pattern, apply the following example configuration.

Example authentication service configuration settings

? Do you want to use the default authentication and security configuration? \ 
Default configuration
 
? How do you want users to be able to sign in? \ 
Username 

? Do you want to configure advanced settings? \ 
No, I am done

Note: The amplify add auth command creates the necessary folders, files, and dependency files in a local folder (amplify) within the project’s root directory. For the ToDoList app setup used in this pattern, the aws-exports.js is created for this purpose.

Deploy the Amazon Cognito service to the AWS Cloud.

Note: To see the deployed services in your project, go to the Amplify console by running the following command:

amplify console

Install the required Amplify libraries for React Native and the CocoaPods dependencies for iOS.

Import and configure the Amplify service.

In the app’s entry point file (for example, App.js), import and load the Amplify service’s configuration file by entering the following lines of code:

import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)

Note: If you receive an error after importing the Amplify service in the app’s entry point file, stop the app. Then, open XCode and select the ToDoListAmplify.xcworkspace from the project’s iOS folder and run the app.

Update your app's entry point file to use the withAuthenticator Higher-order component (HOC).

Note: The withAuthenticator HOC provides sign-in, sign-up, and forgot password workflows in your app by using only a few lines of code. For more information, see Option 1: Use pre-build UI components in the Amplify Dev Center. Also, Higher-order components in the React documentation.

withAuthenticator HOC code example

import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)
import { withAuthenticator } from 'aws-amplify-react-native';


const App = () => {
  return null;
};


export default withAuthenticator(App);

Note: In iOS Simulator, the app shows the login screen that’s provided by the Amazon Cognito service.

Test the authentication service setup.

In iOS Simulator, do the following:

Note: You can also open the Amazon Cognito console and check if a new user has been created in the Identity Pool or not.

Create an AWS AppSync API and DynamoDB database.

For the ToDoList app setup used in this pattern, apply the following example configuration.

Example API and database configuration settings

? Please select from one of the below mentioned services: \ 
GraphQL 

? Provide API name: todolistamplify

? Choose the default authorization type for the API \ 
Amazon Cognito User Pool

Do you want to use the default authentication and security configuration

? Default configuration How do you want users to be able to sign in? \ 
Username

Do you want to configure advanced settings? \ 
No, I am done.

? Do you want to configure advanced settings for the GraphQL API \ 
No, I am done.

? Do you have an annotated GraphQL schema? \ 
No

? Choose a schema template: \ 
Single object with fields (e.g., “Todo” with ID, name, description)

? Do you want to edit the schema now? \ 
Yes

Example GraphQL schema

 type Todo @model {
   id: ID!
   name: String!
   description: String
}

Deploy the AWS AppSync API.

For the ToDoList app setup used in this pattern, apply the following example configuration.

Example AWS AppSync API configuration settings

Note: The following configuration creates the GraphQL API in AWS AppSync and a Todo table in Dynamo DB.

 ? Are you sure you want to continue? Yes
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - \ 
queries, mutations and subscriptions Yes
? Enter maximum statement depth \
[increase from default if your schema is deeply nested] 2

Connect the app's frontend to the AWS AppSync API.

To use the example ToDoList app provided in this pattern, copy the code from the App.js file in the aws-amplify-react-native-ios-todo-app GitHub repository. Then, integrate the example code into your local environment.

The example code provided in the repository’s App.js file does the following: