React Native and Particle

Developer Tools
1

Hi Community

I’m curious if anyone has any experience using React Native and the Particle API JS (Javascript SDK)?

I’m getting a few errors when I attempt to use the js SDK via node. My hope was to not use the IOS and Android native SDKs, but perhaps the native route might be the only option?

Anyone care to confirm they’ve successfully implemented Particle API JS using React Native?

Thanks

jeff

1 Like
2

Hi there,

I’m currently trying to accomplish the same thing.
I’m hitting various errors in the module inclusion; now stuck because react-native is looking for the EventStream.js in the wrong locations. I’m new to react-native and it probably has more to do with react-native than the particle-api-js, but I thought I might ask again here :smile:

Did you finally succeed in using the particle-api-js module in a react-native app?

3

HI @JohanB

Long story short, I decided to use plain react to build a web app. I wanted to get a working version first, but once the web app is complete, I plan to revisit RN.

I’ll be sure to share any insights along the way.

4

So, have people been having success using the particle JS API with react native? Or is the preferred method to just use the native sdk’s with bridges?

5

Im trying to get the javascript sdk working in React Native as well but am running into problems right off the bat. I get this error when trying to reference the particle npm package.

I’m getting the error:
TransformError: /MyApp/node_modules/particle-api-js/lib/Particle.js: Unkown plugin “add-module-exports” specified in “/MyApp/node_modules/particle-api-js/.babelrc” at 0, attempted to resolve relative to “/MyApp/node_modules/particle-api-js”

6

When trying to integrate the JS SDK I ran into similar issues, you can get through the one you mentioned by just manually putting in the missing babel plugin. You will likely find that after you add in that add-module-exports plugin, you will be prompted a few more times to add various missing plugins. I had to add in like 4 or 5 of them and the errors kept coming, eventually I just decided to go with the native SDK’s with bridging.

If anyone has come up with an easy way to use the JS SDK, I would like to know as well.

7

I ended up using the HTTP endpoints. Curious how you went about bridging the SDK library and if you think that was better than using the REST API?

8


Currently I am only using the iOS one, but I assume the android one works just as well. I can’t speak as to whether or not its ‘better’, but as a native developer I found being able to just write native code and calling it from the javascript to be extremely simple. You can just create the methods provided in the android or ios SDK’s in obj-c/swift/java, and you can call those methods from within the javascript on the react native side. Little example below of a method to run the iOS softAP setup wizard below:

Objective-C method:

RCT_EXPORT_METHOD(open)
{
  SparkSetupMainController *setupController = [[SparkSetupMainController alloc] initWithSetupOnly:YES];
  AppDelegate *delegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
  [delegate.window.rootViewController presentViewController:setupController animated:YES completion:nil];
}

To access that method from your javascript:

// SoftAPManager is the name of the class where the objective C method was made
const setupNewParticleDevice = () => {
  SoftAPManager.open();
};

I left out some details on precise setup required but you can read about it on the links I linked at the top. Using bridges like this you can access any methods you write natively from your javascript.

Whether you find this easier or harder than what you’ve done is up to you, personally I find this method very simple to use.

1 Like
9

I too am running into these issues… which is too bad… would be great to get this working.

10

Any progress here?

I tried to use the browserify version with no success.

I think I will go using the HTTP endpoints myself. But would be terrific to transform the https://github.com/spark/softap-setup-js to a version that works on RN or having a wrapper for the native SDKs

Cheers.

11

Hi @hugomosh, we were able to get React Native softap-setup working in our react native project. Looking at our project I see we are using version softap-setup@^4.0.1. You can see a code sample here:

I should add it was a pain in the butt and we had to dig hack a number of things. You can see our post npm install hack file here:

Just to give you a sense of the number of the type of hack that were needed. Your mileage may varay.

1 Like
12

Wow! Indeed seems like a lot of hacking.

I can see that there was a lot of problem with the node-rsa. I bet it duplicated and that caused packager problem . but what is all the ‘cp’ about? What file did you had to rewrite o change?

Did you tried the ReacNativify approach?

I am very new with the packager workflow, and all this thing about the node libraries.

Love when thing are simple like npm install and start doing my redux actions : ]

I hope I can get throw all and start running the softap-setup-js. in RN
Or I will have to rewrite it for react-native friendly modules
Or building the native sdk bridges . Either way seems like I have a long journey ahed.

Thanks for the reply @incorvia

13

It has been 18 months since the last comment/request here. Has there been any subsequent success on particle-api-js usage in React Native?

I have installed node-libs-react-native which installs several packages to replace Nodejs core features that particle-api-js requires, however the ‘stream’ replacement is not named the same. It looks like NodeJS is recommending to use ‘readable-stream’ instead of the ‘stream’ from its core. This would mean that particle-iot/stream-http that Particle-api-js requires needs to have it’s response.js and request.js changed to use ‘readable-stream’ (https://github.com/nodejs/readable-stream) package instead of ‘stream’. If I need to fork particle-api-js to make the adjustments to check and see what breaks after that I will. But if someone has already done the work to fix things so that the particle-api-js will work with React Native, I would be happy for a point in the right direction.

Thanks.

1 Like