This repository has been archived by the owner. It is now read-only.

detail step-by-step guide #35

Open
chunghe opened this Issue Jan 12, 2017 · 21 comments

Comments

Projects
None yet
@chunghe
Copy link

chunghe commented Jan 12, 2017

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.

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

  2. 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)

2017-01-12 10 08 15

  1. 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
    
  2. Click on your main project file, select Build Settings, click 'Framework Search Paths', add $(SRCROOT)/../node_modules/aws-sdk-react-native-core/ios/Frameworks.

2017-01-12 13 15 35

  1. Build and run, that's it.

@chunghe chunghe changed the title correct step-by-step guide detail step-by-step guide Jan 12, 2017

@alexmngn

This comment has been minimized.

Copy link

alexmngn commented Jan 12, 2017

@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

This comment has been minimized.

Copy link

chunghe commented Jan 12, 2017

@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

This comment has been minimized.

Copy link

proProbe commented Jan 12, 2017

@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

This comment has been minimized.

Copy link

khelil commented Jan 14, 2017

@chunghe Bravo and thanks for sharing ;)

@philberg

This comment has been minimized.

Copy link

philberg commented Jan 21, 2017

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

  1. Install yarn if you don't already have it
  2. yarn add ../../path/to/aws-sdk-react-native-core-0.0.2.tgz
  3. 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

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

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

  1. Assuming you still have yarn installed
  2. yarn add ../../path/to/aws-sdk-react-native-transfer-utility-0.0.1.tgz
  3. react-native link aws-sdk-react-native-transfer-utility
  4. 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!

@nkhinchi

This comment has been minimized.

Copy link

nkhinchi commented Jan 25, 2017

@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

This comment has been minimized.

Copy link

philberg commented Jan 26, 2017

@nkhinchi what error message are you seeing?

@xavicolomer

This comment has been minimized.

Copy link

xavicolomer commented Feb 3, 2017

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

This comment has been minimized.

Copy link

philberg commented Feb 3, 2017

@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

This comment has been minimized.

Copy link

BerndWessels commented Feb 4, 2017

@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

This comment has been minimized.

Copy link

brentmitchell25 commented Feb 24, 2017

@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

This comment has been minimized.

Copy link

girish989 commented Apr 14, 2017

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

This comment has been minimized.

Copy link

vulcanoidlogic commented May 6, 2017

@chunghe - thank you very much for this guide!

@jcollum

This comment has been minimized.

Copy link

jcollum commented May 19, 2017

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

This comment has been minimized.

Copy link

jcollum commented May 19, 2017

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

This comment has been minimized.

Copy link

ChristophRob commented May 27, 2017

@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

This comment has been minimized.

Copy link

jcollum commented May 29, 2017

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

This comment has been minimized.

Copy link

ChristophRob commented May 29, 2017

@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

This comment has been minimized.

Copy link

jcollum commented May 29, 2017

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

@ChristophRob

This comment has been minimized.

Copy link

ChristophRob commented May 30, 2017

@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

This comment has been minimized.

Copy link

sibelius commented Aug 28, 2017

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.