Aws-sdk-js: React Native compatibility

[Lohit9]

Is the AWS node js SDK compatible with React native?

[AdityaManohar]

@Lohit9

I'm not sure of the internal details of React Native, but the SDK should work similarly to any other npm modules you may use in your React Native applications.

Let us know if you run into any trouble using the SDK in your React Native applications.

[Lohit9]

Ok, I will be implementing a sample in the next 2 days and will mention in case I encounter any issues.

[Lohit9]

React Native runs JS on JavaScriptCore (when on the device or simulator) and on Chrome itself (when using Chrome debugging), so modules that depend on built-in Node.js modules won't work.

The AWS node SDK has many core node dependencies, due to which you cannot use it in your React native app. Unless you find a fork of the SDK that doesn't use any core node modules

[AdityaManohar]

@Lohit9 Thanks for the update!

The AWS node SDK has many core node dependencies, due to which you cannot use it in your React native app. Unless you find a fork of the SDK that doesn't use any core node modules

This is unavoidable because the core http and https modules are required to make HTTP requests.

Is there a way you can bundle external dependencies into a React Native app?

If so you can use the browser version of the AWS SDK for JavaScript by downloading it here: https://sdk.amazonaws.com/js/aws-sdk-2.2.4.min.js

You can also build a custom version of the SDK for the browser here: https://sdk.amazonaws.com/builder/js

Hope this helps!

[Lohit9]

@AdityaManohar Thanks for the links, trying out stuff to see if the javascript sdks does the job.

[chrisradek]

@Lohit9
Did you have any luck with the browser version of the SDK?

[Lohit9]

@chrisradek No I could not get it working. I don't remember the exact issue I had, but the javascript files in the browser version of the SDK were not being imported into the react native javascript code. I believe it was expecting a different kind of file structure/or maybe some dependency related issue.

What I finally did was to use the AWS Mobile SDK and natively bridge it with the react native javascript code. The downside is that I had to do this twice - for Android and iOS, would love to hear from someone who got their react native app working with the browser version of the SDK.

[morenoh149]

I'm currently seeing

WARNING in ./~/aws-sdk/lib/util.js
Critical dependencies:
50:30-45 the request of a dependency is an expression
53:11-53 the request of a dependency is an expression
 @ ./~/aws-sdk/lib/util.js 50:30-45 53:11-53

WARNING in ./~/aws-sdk/lib/api_loader.js
Critical dependencies:
17:15-59 the request of a dependency is an expression
108:12-46 the request of a dependency is an expression
112:21-58 the request of a dependency is an expression
118:18-52 the request of a dependency is an expression
 @ ./~/aws-sdk/lib/api_loader.js 17:15-59 108:12-46 112:21-58 118:18-52

WARNING in ./~/aws-sdk/lib/region_config.json
Module parse failed: /Users/harrymoreno/programming/souscompany/sousReactNative/node_modules/aws-sdk/lib/region_config.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "rules": {
|     "*/*": {
|       "endpoint": "{service}.{region}.amazonaws.com"
 @ ./~/aws-sdk/lib ^\.\/.*$

ERROR in ./~/aws-sdk/lib/api_loader.js
Module not found: Error: Cannot resolve module 'fs' in /Users/harrymoreno/programming/souscompany/sousReactNative/node_modules/aws-sdk/lib
 @ ./~/aws-sdk/lib/api_loader.js 5:9-22

ERROR in ./~/aws-sdk/lib/services.js
Module not found: Error: Cannot resolve module 'fs' in /Users/harrymoreno/programming/souscompany/sousReactNative/node_modules/aws-sdk/lib
 @ ./~/aws-sdk/lib/services.js 3:9-22
webpack: bundle is now VALID.

a possible solution would be to fork the sdk and use https://github.com/johanneslumpe/react-native-fs in place of the fs module.

[hdzidic]

I'm having this exact issue morenoh149 described.

Any updates?

[datapimp]

@morenoh149 @hdzidic I discovered this issue researching this topic and saw your posts.

If you could avoid using webpack to parse the AWS SDK dependency I believe you wouldn't encounter those problems. Webpack doesn't work normally with most dynamic require statements, which is why you're getting those warnings. (see https://github.com/webpack/docs/wiki/context). You could load the AWS SDK as an external library in your webpack setup, or ignore it in your loader config.

I'd love to know if you're able to get it working after that.

[dcflow]

I get requiring unknown module 'crypto'. Even after installing cryto-js the error is the same.

[KristoferEng]

I have had the same issue for a bit now. End of the day is there a simple solution to connect to S3 while building a react native app?

[KristoferEng]

@Lohit9 Did you have any luck connecting your react native app to aws/s3?

[leimd]

@DHidee66 I think that is because module 'crypto' is a node.js standard library which doesn't even exist on the browser, the aws js sdk got around this by using the crypto-browserify package on the browser. My way of get this this SDK working would be using something like browersify, but I haven't succeeded yet, currently I am just calling the AWS REST api which actually isn't that bad. Not having sdk isn't the end of the world, but I'd definitely like to see if anyone can get it work with react-native.

[dcflow]

@leimd I ended up using the REST api too. I saw somewhere a project that could make node modules work with react native, that maybe could help but still there is a lot of browser specific code in the sdk.

[KristoferEng]

@DHidee66 @leimd Thanks for pointing me in the right direction. I didn't realize that the module either has to be pure JS or created for react-native which is why the SDK does not work (or other modules I've tried).

How did you generate the signature required for the AWS REST api?

[dcflow]

@KristoferEng Use this https://github.com/lifuzu/react-native-uploader-s3

[tomprogers]

The problem appears to be that there isn't an ES6-module-style version of the SDK that works outside of a nodejs environment.

The SDK you can get via npm is designed to run in a node environment. It assumes that core nodejs libraries (like crypto) are available and can be depended upon. This assumption is false in a react-native application.

The SDK you can load from the CDN (or via bower) is a browserland script. It doesn't rely on nodejs modules, but it isn't module-aware _at all_ i.e. it doesn't export anything, so import and require don't seem to accomplish anything. As a browserland script, it assumes it can "publish" it's public API by declaring a top-level variable in a global namespace. This assumption is also false in a react-native application.

As a result, neither the npm module nor the browserland script can be used in a react-native application. The npm module will cause a build-time failure (because of unresolvable dependencies), while the browserland script will fail at runtime (because there's no way to access the AWS object it tries to expose).

What I think we all need is a module-aware script that doesn't rely on nodejs modules -- a mix of the existing npm and CDN scripts. If react-native used webpack (instead of the react-native-packager), we could use custom loader configuration to accommodate the browserland script, or we could use custom resolution mappings to polyfill the npm module's nodejs dependencies. However, react-native does not use webpack, and it's not clear how someone would integrate webpack into their proprietary build pipeline.

Not having this is a huge blocker. I'm having to reverse-engineer a subset of the official SDK so I can work with SNS. I expect everyone else here is in roughly the same boat.

[esamattis]

Yeah. I ran to this also when trying to use SNS from RN. We ended up writing a simple proxy server for the api calls we needed.

The SDK you can load from the CDN (or via bower) is a browserland script. It doesn't rely on nodejs modules, but it isn't module-aware at all i.e. it doesn't export anything, so import and require don't seem to accomplish anything.

Has anyone tried to create an UMD-bundle using Browserify out of the node.js modules and import that from RN code? There is even browser field in package.json so it should load only the browser stuff and add CommonJS exports.

[tomprogers]

I found a third-party library that appears to have what we need: an npm package with no nodejs dependencies, built as an ES6-style module: https://github.com/nisaacson/aws-v4-sign-small

I'm trying to get it to work now.

[leimd]

Hey everyone, over the weekend I wrote a library to generate the signature needed for AWS calls that is compatible to be used in React-Native, here is the link to the GitHub repo, everyone is welcome to contribute to this project. https://github.com/leimd/AWSSignature

[leimd]

@KristoferEng hey I just open sourced a library to generate the signature, see the previous comment.

[vespakoen]

Working on supporting this natively: https://github.com/facebook/node-haste/pull/46

[dcflow]

https://github.com/mybigday/react-native-s3

[benjreinhart]

Hey all, I wrote a library to upload files to S3 in React Native. I had problems with the existing solutions and was hoping to find a solution without native dependencies. The library I wrote doesn't have any native dependencies, uses only XMLHttpRequest & FormData. It has a simple API and does exactly what I need it to. Have plans to add more to it. Hope it's useful:

https://github.com/benjreinhart/react-native-aws3

[procedurallygenerated]

+1

[sesteva]

+100

[dfejgelis]

+1

[newlix]

+1

[hassankhan]

+1

[seantempesta]

+1

[morenoh149]

https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments

[kdenz]

+1

[cagodoy]

+1

[anthonyalayo]

+1

[devhyunjae]

+1

[warrenronsiek]

+1

[mikedizon]

+1

[appwiz]

We've released a developer preview of the AWS SDK for React Native. Try it out and let us know what you think.

[lielran]

@appwiz -I'm missing the basic of Cognito integration in this first drop of the sdk. any planning to support that in the future?

[ZepAviator]

Am I right in reading that AWS SDK for React Native fails to provide any actual login methods to the AWS Cognito User Pools?

This can't be right. First, I believe that iOS policy dictates that you have to provide a user/pass login method in addition to 3rd parties (Facebook, twitter, etc...). Thus, if you are in the AWS services, that's User Pools. Not having this is almost an immediate non-starter. :(

[ChenLi0830]

Hi @appwiz, thanks for the work. It is said in the repository that the react-native SDK is a developer preview version one. Could you please let us know if AWS is planning to publish a formal release soon?

[BerndWessels]

@appwiz Are you guys actively working on this? Lots of issues there and not many closed yet.

[chrisradek]

Wanted to give an update here. The react-native branch of this repo adds support for react native using the JavaScript SDK as well. It's still a work in progress, mostly needing tests, but I have tried it with a few XML and JSON-based services with iOS and Android. Feel free to check it out and comment on #1393 or here if you have any feedback.

[mdjnewman]

Thanks for the initial cut of RN support @chrisradek !

I've tested out the react-native branch with Cognito, S3 and SNS and haven't run into any issues so far. I'd be keen to see #1393 merged :)

[chrisradek]

Closing since the react-native branch was merged in v2.48.0 of the SDK. Please open up new issues regarding any feedback/problems found with react native support!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in this thread.