React Native image upload/display with Amazon S3 using AWS Amplify

Description

This project integrates a React Native front-end with an AWS Amplify back-end that has user authentication (AWS Cognito) and the Storage API from AWS Amplify. This configuration allows us to perfomr CRUD operations to interact with Amazon S3 from our React native front end.

App Overview

• Users can sign up/in to the app.

• Users can upload pictures by pressing the add button.

• Users can delete pictures by pressing the trash button.

• Users can update the feed by pressing the reload button.

Prerequisites

• Expo CLI

  • npm install -g expo-cli

• AWS account

• Node JS with NPM

• AWS Amplify CLI

  • npm install -g @aws-amplify/cli
  • amplify configure (link for a step by step video).

Configuring the project

1. Clone this repo to your local machine.

git clone https://github.com/yhenni1989/react-native-s3.git

cd react-native-s3

2. Add AWS Amplify dependencies to your project.

yarn add [email protected] [email protected]

# or

npm install aws-amplify aws-amplify-react-native

3. Initialise the AWS Amplify project.

amplify init

Follow the same instructions as below.

4. Configure an Amazon Cognito User Pool to store users credentials.

amplify add auth

# When prompt, choose: Yes, use the default configuration.

5. Add an Amazon S3 bucket to store pictures.

amplify add storage

# Choose: Content (Images, audio, video, etc.)
# Give access to only authenticated users.
# Give users read/write acces.

6. Time to deploy your project to AWS.

amplify push

After few minutes of automated operations, the Amplify CLI will create an Amazon Cognito User Pool and Identity Pool to store users crendentials and an S3 bucket to allow for CRUD operations for images.

Running the application

1. Install client dependencies.

yarn

# or

npm install

2. Launch the React Native app in your simulator under your project directory.

expo start --ios

# or

expo start --android

Contribute

• Feel free to contribute to this project.