React Native Support

[rgstephens]

Does this package support React Native? When I try to use it in RN I get the following error on load:

Bundling `index.android.js`  [development, non-minified, hmr disabled]  99.9% (1341/1342), failed.
error: bundling failed: "TransformError: /.../node_modules/mongodb-stitch/dist/node/index.js: 

Unknown plugin \"babel-plugin-add-module-exports\" specified in \"/.../node_modules/mongodb-stitch/.babelrc\" at 2, 
attempted to resolve relative to \"/.../node_modules/mongodb-stitch\""

[jsflax]

Hi there @rgstephens ,

Is there any more information you can give us? What command are you running before this error occurs?

We have unofficial support for React Native, but official support is not being added until the next major release.

Thanks!

[rgstephens]

This is an existing React Native app that has been running for 6 months. I use a Nexus Pixel 2XL as my main test device. I added mongodb-stitch to the project with npm and add code to call an existing stitch function. (BTW, I have a separate node.js IoT app that is successfully using Stitch to post bluetooth scans for a few weeks now).

I execute the RN command to start the app on my device and debug:

react-native run-android

The app starts loading to the phone and during the loading process I get the screen shot below. In the React Native packager, the following error is displayed:

Loading dependency graph, done.
Bundling `index.android.js`  [development, non-minified, hmr disabled]  0.0% (0/1337), failed.
error: bundling failed: "TransformError: /Users/greg/Dev/javascript/reactnative/eddygrid-rn-clean/node_modules/mongodb-stitch/dist/node/index.js: Unknown plugin \"babel-plugin-add-module-exports\" specified in \"/Users/greg/Dev/javascript/reactnative/eddygrid-rn-clean/node_modules/mongodb-stitch/.babelrc\" at 2, attempted to resolve relative to \"/Users/greg/Dev/javascript/reactnative/eddygrid-rn-clean/node_modules/mongodb-stitch\""

[jsflax]

We will try adding our .babelrc to our npmignore. Babel has a weird way of deciding which babelrc file to use when configuring what to transform.

We'll keep you updated as far as our progress on this issue.

[rgstephens]

Thanks. I saw some references to that issue so hopefully a change to .babelrc will do the trick.

[jsflax]

Hi @rgstephens . We're going to try to do a patch release in the next couple weeks to address this issue. Thanks for your patience!

[edaniels]

Hey Greg. We plan on releasing a react native SDK in the coming months. Keeping this issue open for now.

[jeremypagley]

+1

Would have loved to use this Stitch for a new react native app I am building but get this error which is self explanatory & I get it after adding the code snippet provided in the Stitch setup guide to a brand new create-react-native-app with expo. If any help from @rgstephens or @edaniels would be great if one of you know a possible fix?

Error The package at "node_modules/detect-browser/index.js" attempted to import the Node standard library module "os". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo

Example

import { 
  Stitch,
  RemoteMongoClient,
  AnonymousCredential
} from "mongodb-stitch-browser-sdk";

const client = Stitch.initializeDefaultAppClient('somevalue');

const db = client.getServiceClient(RemoteMongoClient.factory, 'mongodb-atlas').db('Example');

client.auth.loginWithCredential(new AnonymousCredential()).then(user => 
db.collection('Products').updateOne({owner_id: client.auth.user.id}, {$set:{number:42}}, {upsert:true})
).then(() => 
db.collection('Products').find({owner_id: client.auth.user.id}, { limit: 100}).asArray()
).then(docs => {
  console.log("Found docs", docs)
  console.log("[MongoDB Stitch] Connected to Stitch")
}).catch(err => {
  console.error(err)
});

[edaniels]

hey @jeremypagley the browser SDK isn't designed for react native unfortunately. We are working on a react native SDK though. I don't have a release date but it's on our immediate roadmap. There won't be too much to it honestly. We just have to get the storage solution working across ios and android. It will consume our mongodb-stitch-core- libraries, instead of mongodb-stitch-browser- libraries.

[edaniels]

We're working on writing the React Native version of this SDK now! @adamchel is on vacation but will be resuming work on it when he's back.

[rgstephens]

@jeremypagley I'm on another project now and have not gotten back to this so I don't have anything to add at this point.

[kashi-halma]

Any word on the react native release @edaniels?

[edaniels]

Adam gets back tomorrow and it seems very possible to have it in by Friday. No promises but it feels like a reasonable date to me sans any testing issues we may come about.

[edaniels]

Release is going out today! @adamchel will update here when it's ready.

[adamchel]

I've just published the React Native SDK to NPM: https://www.npmjs.com/package/mongodb-stitch-react-native-sdk

If you run into any issues, please feel free to open another issue and I'll try to help you as soon as possible.