Getting started with AWS S3 and React Native

AWS ( i.e Amazon Web Services) is a buzz word these days among developer community. So, I decided to give it a try. To get started I checked articles and videos on AWS website but I found most of the articles are not up-to-date and thus doesn’t work.  Then , I also checked some other tutorials and videos on Internet, but, again those where outdated and not from scratch. I collected bits and pieces from different places, did some trial and error and made things work. So, here I am doing things from scratch so that you don’t have to do it the hard way.

First thing you have to do is that you have to sign-up with AWS, so, go to AWS website and click on Create an AWS Account button on top right side. Fill in all the fields and click on “continue” button. In the next step you will get some more fields to fill in where you also have to fill in your address. If you are in India then enter any address thats not an Indian address, so that,  you account is created with parent AWS company and you are able to use all the services provided by AWS. In the next screen you have to fill in your credit/debit card details. Once you fill in all the details $1 will be deducted from your account to verify that your account details are real.

Next, you have to open your email with which you have registered and click on verification link sent by AWS. Now, you can sign in to AWS Management Console.

One you are in console you will see list of AWS services. Click on S3 listed under “Storage” service. Now click on “Create bucket” button. Enter bucket name, select a region nearest to your place and click “Next” button. In the Set properties we won’t do anything so again click Next. In Set permissions don’t make any changes and click Next. Finally click on Create bucket and your new bucket will be created.

Now, click on Services menu and then under “Security, Identity and Compliance” click on “Cognito”. Next click on “Manage Federated Identities”. In the next screen enter “Identity pool name”  and check “

"us-east-1:d2927435-8dd8-4a7d-8ab5-f5948b598212"

copy it and keep it safe.

Again, click on Services menu and then under “Security, Identity and Compliance” click on “IAM”. Now, click on “Roles”. You will see two roles that we created above are listed there. Unauthenticated role (Unauth_Role). Click on “Add inline policy”  and click the “JSON” tab. Now, replace the code below in the editor and click on “Review policy” button.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:DeleteObject",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::mybucket/*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket",
                "s3:GetBucketLocation"
            ],
            "Resource": "arn:aws:s3:::mybucket",
            "Condition": {}
        }
    ]
}

Enter a name for the policy and click on “Create policy” button.  Remember to replace the “mybucket” with your own bucket name.

Now, click on “Services” menu under “History”. Click on the bucket name and then click on “Permissions” tab. Click on “CORS configuration” button and replace the code with the code below :

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2018-04-02/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

We are done with the S3 settings and now we can use S3 and see it in action. To do that, we will use code from here . Create and html page,  copy the js code and replace the IdentityPoolId, bucketRegion and BucketName. Now you will be able to test the code and upload images to S4 bucket.

Thank you for going through this tutorial. For more such awesome tutorials please do subscribe to our news letter and you-tube channel.

Video Tutorial