Heads up about React Native and Firebase

[Joey Yang]

Hey y'all –

I'm Joey, a UX Engineer on the Firebase team, and I'm a huge fan of React! I attended React Conf in January and have gotten to play with React Native over the last two months, and it's awesome. 

While trying to include Firebase in a React Native project, I ran into issues requiring the Firebase npm module, and some of you may also run into this as well. The short reason for this is that React Native uses JavascriptCore, which doesn't have support for WebSockets. Firebase uses WebSockets to open sync connections between our servers and your apps. 

We're always trying to go where our developers go, so getting Firebase to work with React Native is super important to us. We've been investigating this issue internally.

In the meantime, please feel free to use Firebase in your React Native apps through either the Objective-C SDK or through REST. Let us know if you have any questions, and happy hacking!

Joey

[Brendan Barr]

Cheers! +1

Really happy to hear you guys are on the case, here.. I can confirm that no matter how hard you try as an average developer, you can't resolve the myriad of missing dependencies and other weird stuff, either using firebase-web.js or firebase-node.js.. I knew it was a fool's errand, but I just love Firebase and React so much, I couldn't accept the reality without several hours of fruitless hacking.

[Chetstone]

Thanks for posting about this. I'm hoping someone will come up with a react-native bridge for the iOS SDK. In my app this would be preferable to using the npm module, since I need offline persistence and the iOS SDK has at least beta support for that.

[Christopher Chedeau]

I'm a React Native engineer,

We'd love to get Firebase working on it. There are multiple ways you can approach the problem.

1) Implement a websocket polyfill

This would be really nice as I'm sure many other people will want to use websocket in React Native. It also means that you don't have to change a single line of JavaScript, and ReactFirebase would work as is. We already include a websocket objective-c library call libSocketRocket. You would need to bridge it.

2) Bridge Firebase Obj-C SDK

This is probably going to get trickier to do as the obj-c library probably wasn't designed with a JavaScript-y API and you'll need to massage it quite a bit.

See docs on bridge: http://facebook.github.io/react-native/docs/nativemodulesios.html#content

See example on how we bridged XMLHttpRequest: https://github.com/facebook/react-native/tree/master/Libraries/Network

Let me know if you need any help

On Thursday, March 26, 2015 at 7:24:27 PM UTC-7, Joey Yang wrote:

[Sander Spies]

Started with a polyfill for WebSockets here: https://github.com/SanderSpies/react-native-1/tree/WebSocket

Hope to do a PR in the coming days.

Cheers

Op maandag 30 maart 2015 05:46:30 UTC+2 schreef Christopher Chedeau:

[Joey Yang]

Hey everyone – thank you all for all the suggestions! Feel free to drop us a line (either on this thread, sup...@firebase.com, @firebase, or anywhere else) if you have any questions!

[Jason Brown]

Some headway has been made on this here https://github.com/badfortrains/wsExample

Discussion here https://github.com/facebook/react-native/issues/619#issuecomment-89702070

[Joey Yang]

Jason – thanks for sending this over! We'll take a look at it.

-Joey

--
You received this message because you are subscribed to a topic in the Google Groups "Firebase Google Group" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/firebase-talk/aoPNvQQsVUE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/065e6ce8-f24e-4014-aa1a-8e551b6b4509%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Marcin Jekot]

Hi all,

I'm just dropping a line to find out if there are any more news on this front. I know it's only been a week since the last post, but I'm surprised how fast the React Native community is coming up with new things ;-)

Here's what I found on github:

issue #619

issue #579

A project which looks promising: https://github.com/tptee/RCTWebSocket

And an early prototype: https://github.com/badfortrains/wsExample

On another note, I was quite surprised that FB don't use WebSockets but use long polling instead (see @vjeux's comment on issue #619).

[Joey Yang]

Hi Marcin — 

We're looking at what the Facebook team is up to and what the community is coming up with, and we're working to figure something out. Stay tuned, and let me know if you have any other questions!

Thanks!
Joey

[Harrison Harnisch]

Hey guys, chiming in here -- submitted a PR yesterday for websocket polyfills https://github.com/facebook/react-native/pull/890

[Sam Mueller]

I've been using the RCTWebSocket implementation by Harrison Harnisch, which is currently sitting as a PR to react-native. Unfortunately, it's looking like the WebSocket polyfill won't be enough to get firebase working with react-native. The reason is because firebase uses aspects of the DOM (like document to create iframes), that aren't available when executing within JavaScriptCore.  You end up getting errors like "Can't find variable: document", which seems to be a frequent problem with other libraries as well.

There was one point where I was able to get data back, but I can't tell at this point whether it was because I was avoiding certain codepaths within firebase, or if I had the chrome debugging tools attached to my instance and perhaps made some stuff available for firebase.

Just to be clear, I'm using npm install firebase and using it via require().  When used this way, the packaged script only contains a dist with a minified and uglified version of the firebase client.  I did manage to find the debug version of the script, which revealed that I was flowing through FirebaseIFrameScriptHolder.prototype.createIFrame_, which may only be invoked if not a NODE_CLIENT. I'm not an expert on the firebase api, but maybe the library is written in such a way that it still can be used within the context of JSC+Websocket polyfill.

--Sam

[Sam Mueller]

Is there a way to install the debug version of firebase as a module that can be bundled via the react native packager?  It would be way easier to get this working if I had this as an option.  I tried dropping in the unminified version but it fails with exception "undefined is not an object (evaluating 'goog.debug')"

[Itzy]

I recently npm install'ed firebase -- it comes with 2 files: firebase-web.js and firebase-node.js. The latter is listed as the main file by its package.json -- am I missing something?

[Michael Lehenbauer]

Hey guys,

Unfortunately we don't have an official "debug" version of the node module, mostly because it's not straightforward to create one via our build process.  But I've manually fixed up the 2.2.4 firebase-debug.js file so it should work in node: https://mike-shared.firebaseapp.com/firebase-node-debug.js   Perhaps this will let you get a bit further?  Feel free to ping me if you have specific errors you're trying to resolve.  In theory, you shouldn't hit any code trying to access "document" or similar if you're using that version of the library.  In any case, we'd love to hear back on what you figure out.  We're eager to get Firebase and react-native playing well together.

Thanks!

-Michael

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.

To post to this group, send email to fireba...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/7405f1d7-6dce-4b26-920d-a161ba8a095c%40googlegroups.com.

[bert.c...@gmail.com]

So ... the current solution is

1. using 2.2.4. firebase-debug.js provided by Michael (https://mike-shared.firebaseapp.com/firebase-node-debug.js)

2. using Harrison's forked RN

is that right?

Michael Lehenbauer於 2015年4月21日星期二 UTC+8下午11時38分26秒寫道：

[Michael Lehenbauer]

Hey guys, a couple more notes:

1) It looks like the latest react-native (at least 0.4.1) now respects the "browser" field in our package.json, which means it'll use firebase-web.js instead of firebase-node.js from our npm package.  This means it may work a bit better (in particular we should automatically pick up the window.WebSocket polyfill if it's available).

2) I had trouble with setTimeout(..., 0) calls not working in the react-native 0.4.1, which breaks Firebase.  I logged an issue here.

3) I had trouble getting Harrison's polyfill to show up, but if you get it to work but are still running into issues with Firebase trying to access "document", you can try adding "Firebase.INTERNAL.forceWebSockets();" to the beginning of your app.  That should prevent the long-polling code that tries to use "document" from running.

We're keen to get this working, but are somewhat blocked until the WebSocket polyfill officially lands.  If anybody's going down this path in the meantime and getting specific errors from Firebase or whatever, feel free to ping me directly (mic...@firebase.com) and I'll try to help you out.

Thanks,

-Michael

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/924d84f4-f9e3-4075-91f2-7971247c5002%40googlegroups.com.

[Tom Bray]

I got Firebase working with this version of RN

"git://github.com/badfortrains/react-native#WebSocket"

and the firebase-debug.js from here: https://github.com/badfortrains/wsExample

The only issue that I'm running into is that the socket doesn't reconnect after resuming the app from sleep (lock/unlock).

Any suggestions to get around that issue?

Thanks,

Tom

[Michael Lehenbauer]

My guess would be that the WebSocket polyfill isn't notifying us that the websocket was closed.  Do you have the same problem if you toggle airplane mode?  You can get some insight into our reconnect logic with our verbose logging, enabled with "Firebase.enableLogging(true);"

If this is indeed an issue with the WebSocket polyfill, hopefully the final version that lands in react-native would resolve this.  In the meantime, if you can manually detect the sleep/unlock case, you may be able to work around the issue by calling Firebase.goOffline() and then Firebase.goOnline().  But this is a hack, and you may still have other connection unreliability issues.

-Michael

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/9679ca2e-2949-4fdd-a5b6-3c5e4852bd84%40googlegroups.com.

[Tom Bray]

Yep, toggling airplane mode has the same behavior. I also started logging .info/connected and confirmed that it isn't aware of the disconnection. I'll try your hack next!

Thanks,

Tom

--
You received this message because you are subscribed to a topic in the Google Groups "Firebase Google Group" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/firebase-talk/aoPNvQQsVUE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to firebase-tal...@googlegroups.com.

To post to this group, send email to fireba...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/CAJCyStfPNdW-5z0XJqty9UOB7CX0VLmPperbUr6op9keGcUGkw%40mail.gmail.com.

[Tom Bray]

The 

Firebase.goOffline()

Firebase.goOnline()

hack works for me. Good enough to get me by until websockets/firebase are officially supported!

Thank you!

Tom

[Sam Mueller]

Hi all,

I published an npm package containing my hacked version of firebase-debug.js, and works with Harrison's websocket polyfill.  I also came across the setTimeout issue mentioned by Michael, and put in a fix so that v0.4.1 works with the package.  Not sure if it's useful for the firebase team, but you can search through my modified firebase.js for react-native-hack to see all the places I touched, along with some of the reasoning.  

https://github.com/sjmueller/firebase-react-native/blob/master/firebase-debug.js

Hope this helps until official support is released!

--Sam

[Sam Mueller]

npm package can be found here: https://www.npmjs.com/package/firebase-react-native

--Sam

[Alvin Woon]

Websocket polyfill just landed react native! Thanks everyone.

[Harrison Harnisch]

Make sure you use 0.4.4 fixes an issue with the WebsocketDebugger. 

[Marcin Jekot]

This is awesome news indeed. There was a lot of pieces to put this
together, and I think all the people involved in all the different areas
deserve props. Thanks for all the work!!

I have a question: the native iOS/Android clients are currently the only
ones supporting persistence. In React Native, it's the JS client, and so it
won't have persistence yet. Is the plan to wait for persistence to land in
the JS firebase client, and have it supported that way in React Native?
(That is, provided the WebSocket polyfill supports the storage firebase JS
is going to use).

Thanks,
Marcin

--

You received this message because you are subscribed to a topic in the Google Groups "Firebase Google Group" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/firebase-talk/aoPNvQQsVUE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/2bb19876-bbb6-4a3e-b86c-615e794f22b5%40googlegroups.com.

[Michael Lehenbauer]

Hey guys,

First, I just wanted to let everybody know that we pushed out a 2.2.5 firebase client that works with the WebSocket polyfill.  Unfortunately, I just discovered that Firebase Login isn't quite working, so there will likely be another update to address that in the coming days.

Marcin, regarding your question, it's a good one.  As you note, right now there's no persistence for JS and we don't have a timeline for when it will be available (and it will probably depend on react native having an IndexedDB polyfill).  In the meantime, you could write something akin to a "firebase Polyfill" that actually exposed our iOS Firebase client to react-native, thus providing offline support.  If somebody in the community was interested in tackling that, we'd love to see it. :-)

-Michael

--

You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.

To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.

To post to this group, send email to fireba...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/CAGDAj4075%3DzCKD%3DfR0TP0QGJsWqhjb-YMDvaZTcEx8HHStNWTA%40mail.gmail.com.

[Marcin Jekot]

Thanks for the reply Michael.

I was actually really keen to try get my hands dirty on getting the iOS
firebase client working in React Native, when all this started, but I got
pulled away on work projects. I still think that it would be a great one to
do, with React Native you only need .on("value") and .set({}) to work,
right? ;-P

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/CAJCyStddWg9vndWZoYBc%2B7o1hxPcF89E_oKMMcrY7%2BPfLSZdXw%40mail.gmail.com.

[Elie Toubiana]

Just following up here.

I tried firebase with react native and I get a Network Error when I try to use the createUser call.

Did someone got it to work?

[Joey Yang]

Hey Elie – we've discovered this as well, and we're working on a fix! In the meantime please let us know if you run into any other issues.

Thanks!
Joey

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/a4f85dda-f66e-40bb-bcbd-58dd4cf81078%40googlegroups.com.

[Michael Lehenbauer]

Hey Elie, 

This should be fixed in the latest firebase client (2.2.6).  Give it a try and let us know if you hit any other issues.

Thanks!

-Michael

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/CABu%3DoeY%2B%3DbeRzo1JSV_BOZmDJuzRveOskcYYB-LO24u%3DDV2RKg%40mail.gmail.com.

[Tom Nguyen]

I'm on the latest Firebase client (2.26), and I've also noticed an error about document.createElement when using Firebase and React Native -- but only when the Chrome debugger is opened.

Someone else noticed this as well:

https://github.com/facebook/react-native/issues/1149

Are others able to use the Chrome debugger with firebase + react-native?

[Michael Lehenbauer]

Hey Tom,

Sorry about this!  It turns out that when you have the chrome debugger open, document.createElement ends up being defined, but set to null, and this defeats our logic that tries to figure out if we should try to use our long-polling transport (our normal fallback for websockets) and so you can hit this error.

I have a fix in the pipeline that I'm hoping will be released in the next day or two.

Sorry for the trouble. Thanks for your patience!

-Michael

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/60c7ff83-cd79-4edb-8a21-cee9b6e9c785%40googlegroups.com.

[Albert Chang]

@Tom:  I am also experiencing this exact problem.  I just updated (https://github.com/facebook/react-native/issues/1149) with a picture of the problem, along with a sample codebase that's leading up to the issue...

[Michael Lehenbauer]

Hey guys,

Just wanted to let you know that this should be fixed with the latest release we just put out (2.2.7).  Give it a try and holler if you're still hitting issues!

Thanks,

-Michael

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/8dc37917-bd4e-41ba-9317-2ebbe40e01a7%40googlegroups.com.

[Tyler McGinnis]

Has anyone tried React Native 0.6 with Firebase 2.2.7 lately? Whenever I require('firebase') React Native is throwing the following error "

Invariant Violation: Application myApp has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.""

Not sure what's going on.

Tyler

[Michael Lehenbauer]

Hey Tyler,

I'm not familiar with that error, but googling around a bit it looks like it can be caused by the react server not being restarted.  Maybe try closing the terminal window that React Native started as well as XCode and start fresh?

If it still happens, let me know... I can try upgrading my test app to React Native 0.6 and see what happens.

-Michael

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/f8d1ff5c-8f10-4e8f-bc8a-a24ae6d83d52%40googlegroups.com.

[Russell Stewart]

Tyler,

Have you tested firebase with React Native Android? I'm able to require('firebase'), but I'm never getting responses to my requests. The same code that works with nodejs has no response on the device.

[Frank van Puffelen]

Hey Russell,

React Native for Android initially shipped without support for web sockets, which makes it impossible to run Firebase on it. Since then there have been community contributions to add web socket support (including contributions by us). These have been accepted and it looks like they're getting ready to ship in React Native 0.13: https://github.com/facebook/react-native/releases/tag/v0.13.0-rc

If you're not working with that 0.13 release candidate, that would explain why Firebase doesn't work yet. Hang in there, the release should be out soon!

       Frank