Mohenni / react-native-s3

React Native app to upload and display images from Amazon S3 using AWS Amplify as the back end service.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

layout

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

Configuring the project

  1. Clone this repo to your local machine.
git clone https://github.com/jtaylor1989/react-native-s3.git

cd react-native-s3
  1. Add AWS Amplify dependencies to your project.
yarn add aws-amplify@1.1.7 aws-amplify-react-native@2.0.7

# or

npm install aws-amplify aws-amplify-react-native
  1. Initialise the AWS Amplify project.
amplify init

Follow the same instructions as below.

Screenshot 2019-03-14 at 20 28 11

  1. Configure an Amazon Cognito User Pool to store users credentials.
amplify add auth

# When prompt, choose: Yes, use the default configuration.
  1. 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.
  1. Time to deploy your project to AWS.
amplify push

Screenshot 2019-03-14 at 20 10 27

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
  1. 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.

About

React Native app to upload and display images from Amazon S3 using AWS Amplify as the back end service.

License:MIT License


Languages

Language:JavaScript 100.0%