I have been playing with React Native and AWS Amplify these past months and I am really enjoying the experience.

I would like to share what I have learned so far.

In this series of articles, we will build a simple serverless tweeting application using AWS cloud formation.

The app, that we will call ‘’Zopher’’ (naming is not important), will use React Native as its front-end and AWS Amplify as its cloud back-end service.

Throughout these series, I assume you have an active AWS account and an Expo account ready to use.

This app will demonstrate how to provide full user authentication workflow and perform CRUD operations from our front-end to our cloud back-end using the Amplify services: auth and api.

Below is a demo of the final product we are going to build.

Tweeting app with React Native and AWS Amplify.

The full code of this series can be found here.

Without further ado, let us get started.

If you never worked with Expo and AWS amplify before, make sure you globally install their respective CLIs. Open up your command line terminal and execute the following commands:



npm i -g npm install -g expo-clinpm i -g @aws -amplify/cli

Initialize a new Expo project:

expo init Zopher

When prompt, choose ‘’default’’ for the expo template.

cd into the newly created project:

cd Zopher

We will add AWS Amplify dependencies to our project (using yarn add or npm install):

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

As for now, we can test if the app is working perfectly by launching the simulator from the terminal:

expo start --ios // or --android depending on your simulator

Expo boilerplate app with the default template.

In order to use the Amplify CLI with our project, you must configure the service using an AWS Identity And Management User (IAM) by running:

amplify configure

Please refer to the following video from Nader Dabit that shows perfectly how to configure your project with Amplify.

Now we need to initialize a new Amplify project:

amplify init

You will be prompt to choose your favorite code editor (Visual Studio Code in my case), the language of the app (put javascript), and the framework (choose react-native).

When prompt for source directory and default commands just press enter.

When prompt if you’d like to use an AWS profile, choose Yes.

Choose the user profile you have created when you configured the Amplify CLI (if you did not provide a username this would be default).

Now that our app is fully integrated with an Amplify back-end, we can start using Amplify services such as authentication and GraphQL.

We Start by adding authentication. To add authentication as a back-end service to our app, we type the following in the command line terminal:

amplify add auth

When asked if ‘’Do you want to use default authentication and security configuration?’’ choose Yes, use the default configuration.

Now we will add GraphQL capabilities to our app:

amplify add api

You will be prompt to answer the following:

? Please select from one of the below mentioned services GraphQL ? Provide API name: zopher ? Choose an authorization type for the API Amazon Cognito User Pool Use a Cognito user pool configured as a part of this project ? Do you have an annotated GraphQL schema? No ? Do you want a guided schema creation? true ? What best describes your project: ? What best describes your project: One-to-many relationship (“Blogs” with “Posts” and “Comments”) ? Do you want to edit the schema now? Yes

This will automatically open up your code editor with a preconfigured schema.graphql file that looks like this:

type Blog @model {

id: ID!

name: String!

posts: [Post] @connection(name: "BlogPosts")

} type Post @model {

id: ID!

title: String!

blog: Blog @connection(name: "BlogPosts")

comments: [Comment] @connection(name: "PostComments")

} type Comment @model {

id: ID!

content: String

post: Post @connection(name: "PostComments")

}

The following schema describes a basic blog application that supports one to many relationships to a DynamoDB database through the @model and @connection directives.

For more details on how these schema work I will refer you to Adrian Hall medium articles on the matter.

Erase the above schema completely from your file and replace it with the following:

type Post @model {

id: ID!

postOwnerUsername: String!

postOwnerId: String!

postContent: String!

likes: [Like] @connection(name: "PostLikes")

} type Like @model {

id: ID!

numberLikes: Int!

likeOwnerUsername: String!

likeOwnerId: String!

post: Post @connection(name: "PostLikes")

}

After saving the new schema.graphql, go back to your terminal and:

Press enter.

You should see the following message:

GraphQL schema compiled successfully.

Now that we have added authentication and API capabilities to our app, it is time to push these changes to enable these capabilities in our AWS account.

Type the following command in the terminal:

amplify push

You will be prompt the following:

Are you sure you want to continue? Yes

Do you want to generate code for your newly created GraphQL API? No

Wait a few minutes and then you should see the following message:

✔ All resources are updated in the cloud

Run the following to check if everything is updated:

amplify status | Category | Resource name | Operation | Provider plugin | | -------- | --------------- | --------- | ----------------- | | Auth | cognitoNumber | No Change | awscloudformation | | Api | zopher | No Change | awscloudformation |

Now that our app and AWS account has authentication and API capabilities, we can start writing React Native code to interact with these services.

If you enjoyed this tutorial, you can give me as many claps👏 as 50. Hit the follow button to stay updated with the upcoming articles. You can stay updated with my latest open source projects on Twitter and Github.

Stay tuned for Part 2 of this article.

Join our community Slack and read our weekly Faun topics ⬇