detail step-by-step guide

[chunghe]

The official document of aws-sdk-react-native is too sparse and not easy to follow. I've been trying to set up the aws-sdk-react-native for two days. Finally it works! Here's the step-by-step guide for your reference.

I'm a web developer just step into native app development world. If there's anything wrong with following steps, please let me know. Thanks!

The guide should be able to fix #33, #24, #18, and #20.

build aws-sdk-react-native

you could skip this step and go ahead download form here.

1. download AWS Mobile SDK for iOS here
2. git clone https://github.com/awslabs/aws-sdk-react-native.git
3. copy AWSCore.framework file to aws-sdk-react-native/Core/ios/Frameworks
4. to fix #20, edit aws-sdk-react-native/Core/src/AWSCognitoCredentials.js, change line 48 from
   listener.addListener("LoginsRequestedEvent", async {callbackId} => {
   to
   listener.addListener("LoginsRequestedEvent", async ({callbackId}) => {
5. cd aws-sdk-react-native/Core
6. npm pack

install aws-sdk-react-native

1. yarn add ../../path/to/aws-sdk-react-native-core-0.0.2.tgz
2. react-native link aws-sdk-react-native-core

Then follow step2/step3/step4 of the official aws ios sdk guide.

3. With your project open in Xcode, select your Target. Under General tab, find Embedded Binaries and then click the + button.

4. Click the Add Other... button, navigate to the project_folder/node_modules/aws-sdk-react-native-core/ios/Frameworks/AWSCore.framework and select them. ( DO NOT check the Destination: Copy items if needed checkbox when prompted. it's already in the node_modules)

5. Under the Build Phases tab in your Target, click the + button on the top left and then select New Run Script Phase. Then setup the build phase as follows. Make sure this phase is below the Embed Frameworks phase.

    Shell /bin/sh
    
    bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/AWSCore.framework/strip-frameworks.sh"
    
    Show environment variables in build log: Checked
    Run script only when installing: Not checked
    
    Input Files: Empty
    Output Files: Empty
   

6. Click on your main project file, select Build Settings, click 'Framework Search Paths', add $(SRCROOT)/../node_modules/aws-sdk-react-native-core/ios/Frameworks.

7. Build and run, that's it.

[alexmngn]

@chunghe Awesome I was able to build for iOS!

Now I have some issue about how to use Cognito. I am trying to use the regular Cognito Provider to login a user. I use the method initWithOptions first with the region and pool id:

import { AWSCognitoCredentials } from 'aws-sdk-react-native-core';

AWSCognitoCredentials.initWithOptions({
      region: 'us-east-1',
      identity_pool_id: 'yyy',
});

This code above throw an error (for some reason the double quotes are weird but that's the way I get it):

Exception 'Invalid region type.' was thrown while invoking initWithOptions on target AWSRNCognitoCredentials with params (
{
"identity_pool_id" = us-east-1;
region = "yyy";
}
)

I cannot find any documentation about how to use the Cognito Provider unfortunately.

[chunghe]

@alexmngn

identity_pool_id and region should look like this:

let identity_pool_id = 'ap-northeast-1:b5d7410a-113e-4dcd-ace5-fc5be54771f9'
let region = 'ap-northeast-1';

there will be an error message if identity_pool_id format not correct

identityPoolId' failed to satisfy constraint: Member must satisfy regular expression pattern: [\w-]+:[0-9a-f-]+}

[proProbe]

@chunghe Great job with the tutorial!
Quick question, I havent been able to see anything about the library being able to upload while being in the background. Do you know if this works? Should of course work with both iOS and Android

[khelil]

@chunghe Bravo and thanks for sharing ;)

[philberg]

For anyone who comes here and wonders how to make it work on android, I finally got the example working on android, using react-native 0.40.

I followed the instructions from @chunghe and had to add one step to get the TransferUtility to work. The step by step is copied here to avoid confusion.

Core

Build aws-sdk-react-native-core

1. git clone https://github.com/awslabs/aws-sdk-react-native.git
2. To fix #20, edit aws-sdk-react-native/Core/src/AWSCognitoCredentials.js, change line 48 from
   listener.addListener("LoginsRequestedEvent", async {callbackId} => {
   to
   listener.addListener("LoginsRequestedEvent", async ({callbackId}) => {
3. cd aws-sdk-react-native/Core
4. npm pack

Install aws-sdk-react-native-core

0. Install yarn if you don't already have it
1. yarn add ../../path/to/aws-sdk-react-native-core-0.0.2.tgz
2. react-native link aws-sdk-react-native-core

At this point, you should be able to use the core utility on android just fine.

TransferUtility

Build aws-sdk-react-native-transfer-utility

0. Assuming you have already cloned aws-sdk-react-native
1. cd aws-sdk-react-native/TransferUtility
2. npm pack

Install aws-sdk-react-native-transfer-utility

0. Assuming you still have yarn installed
1. yarn add ../../path/to/aws-sdk-react-native-transfer-utility-0.0.1.tgz
2. react-native link aws-sdk-react-native-transfer-utility
3. Add the required service to the main/AndroidManifest.xml file (this does not happen automatically. Thanks @fabriciovergal)
   Remember, this goes inside of the application like so:

    <application
        ...

        <service
            android:name="com.amazonaws.mobileconnectors.s3.transferutility.TransferService"
            android:enabled="true" />

       ...
    </application>

Now you should be able to run the example on android!

[Deleted user]

@philberg - I couldn't get it to work past yarn add aws-sdk-react-native-core-0.0.2.tgz for android

It fails at react-native link aws-sdk-react-native-core. I am using react-native-cli@2.0.1

[philberg]

@nkhinchi what error message are you seeing?

[xavicolomer]

initWithOptions(options) is failing because cognitoClient is undefined. Is anyone else having this problem?

AWSCognitoCredentials.initWithOptions({'region':AWS_REGION,'identity_pool_id':COGNITO_IDENTITY_POOL_ID})

And inside this function:

cognitoClient.initWithOptions(options)

[philberg]

@xavicolomer ios or android?

Did you re-compile the project after doing all the install steps? That is the only way I have seen that happen

[BerndWessels]

@chunghe I followed the guide here, it works fine on Android, but on IOS I get the following error in XCode property 'exception' not found on object of type 'AWSTask *'

In both places the error is in task.exception

The error is here

RCT_EXPORT_METHOD(getCredentialsAsync:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject){

    //start a separate thread for this to avoid blocking the component queue, since
    //it will have to comunicate with the javascript in the mean time while trying to get the list of logins

    NSString* queueName = [NSString stringWithFormat:@"%@.getCredentialsAsyncQueue",
                           [NSString stringWithUTF8String:dispatch_queue_get_label(self.methodQueue)]
                           ];
    dispatch_queue_t concurrentQueue = dispatch_queue_create([queueName UTF8String], DISPATCH_QUEUE_CONCURRENT);

    dispatch_async(concurrentQueue, ^{

        [[credentialProvider credentials] continueWithBlock:^id(AWSTask *task) {
            if (task.exception){
                dispatch_async(dispatch_get_main_queue(), ^{
                    @throw [NSException exceptionWithName:task.exception.name reason:task.exception.reason userInfo:task.exception.userInfo];
                });
            }

and here

RCT_EXPORT_METHOD(getIdentityIDAsync:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject){
    [[credentialProvider getIdentityId] continueWithBlock:^id(AWSTask *task) {
        if (task.exception){
            dispatch_async(dispatch_get_main_queue(), ^{
                @throw [NSException exceptionWithName:task.exception.name reason:task.exception.reason userInfo:task.exception.userInfo];
            });
        }

Any ideas what might be wrong?

[brentmitchell25]

@BerndWessels You need to use an older version of the SDK. I got your error with 2.5+ version. http://sdk-for-ios.amazonwebservices.com/aws-ios-sdk-2.4.16.zip

[girish989]

I followed all the steps you mentioned times but I still got the bellow error:

apps/reactnative/TestAppRu /node_modules/aws-sdk-react-native-transfer-utility/ios/AWSTransferUtility/AWSRNS3TransferUtility.m:127:23: No visible @interface for 'AWSS3TransferUtility' declares the selector 'downloadToURL:bucket:key:expression:completionHander:'

Any help is greatly appreciated. Tna k you very much in advance

[vulcanoidlogic]

@chunghe - thank you very much for this guide!

[jcollum]

Small change:

Then follow step2/step3/step4 of the official aws ios sdk guide.

to:

Then follow step2/step3/step4 of the official aws ios sdk guide as duplicated here:

I thought I had to go do steps 2, 3 and 4 then do the steps in your guide.

[jcollum]

Anyone know how to fix a permission denied error during the build phase?

/Users/jcollum/Library/Developer/Xcode/DerivedData/roughJupiter-cplaignyznpytfanokwksqskgjrb/Build/Products/Debug-iphonesimulator/roughJupiter.app/Frameworks/AWSCore.framework/strip-frameworks.sh: Permission denied

I used chmod on the file (and it built) but I feel like it will probably just break again -- feels like a band-aid.

[ChristophRob]

@chunghe I couldn't get it to work past "yarn add ../../aws-sdk-react-native/Core/aws-sdk-react-native-core-0.0.2.tgz"
It fails at:
Core Username$ react-native link aws-sdk-react-native-core.
Command link unrecognized. Make sure that you have run npm install and that you are inside a react-native project.

[jcollum]

react-native link should be running regardless of what this library is doing. What happens if you call react-native link with no args?

[ChristophRob]

@jcollum thanks for your response. It's the same. react-native link also not works in the folder "Core". Maybe because it is not a react-native project? run-ios also not works

[jcollum]

you are in the wrong folder I bet; try running it from the folder that contains your package.json file

[ChristophRob]

@jcollum Ok thanks, so i should start "install aws-sdk-react-native " in the react folder where i want to install it. well that makes sense

[sibelius]

we should have a react-native link command that helps us