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
-
npm install -g expo-cli
-
npm install -g @aws-amplify/cli
amplify configure
(link for a step by step video).
Configuring the project
- Clone this repo to your local machine.
git clone https://github.com/yhenni1989/react-native-s3.git
cd react-native-s3
- Add AWS Amplify dependencies to your project.
yarn add [email protected] [email protected]
# or
npm install aws-amplify aws-amplify-react-native
- Initialise the AWS Amplify project.
amplify init
Follow the same instructions as below.
- Configure an Amazon Cognito User Pool to store users credentials.
amplify add auth
# When prompt, choose: Yes, use the default configuration.
- 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.
- 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
- Install client dependencies.
yarn
# or
npm install
- 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.