Error when running Firebase 3.0 with React Native

-

Just loaded firebase 3.0 with react-native and getting the error

[fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: Can't find variable: document

Is react-native supported yet?

React-native code:

var firebase = require('firebase')

// Initialize Firebase
var config = {
    apiKey: '<apiKey>',
    authDomain: '<app>.firebaseapp.com',
    databaseURL: 'https://<app>.firebaseio.com',
    storageBucket: 'firebase-<app>.appspot.com'
};
firebase.config(config)

Firebase JS SDK 3.1 just got released and is now compatible with React Native!

See release notes.

The newest version of firebase uses the document variables that are used in web applications and the RCTWebSocket or RCTView doesn't work the same way. (I'm not 100% sure about all the details). Anyway, you can just install an older version of firebase and it will work for you. Assuming you have npm installed follow these instructions.

  1. Uninstall Firebase from your react-native project npm uninstall firebase --save
  2. Install version 2.4.2 of firebase npm install firebase@2.4.2 --save
  3. Happy Firebaseing!

I was able to get Firebase 3.0.2 to load in React Native by putting the following in a .js file and importing it at the top of index.ios.js:

global.location = {
  href: ''
};
global.screen = {

};
global.document = {
  getElementsByTagName: function(){}
};
global.parent = global;

There may be other gotchas - I have not explored further than this but it might get Firebase 3 working for you.

Firebase 3.x is not supported in RN (yet..).

Issue

I think the issue relates to the auth module's dependency on the browser's window variable.

Will it be officially supported?

According to the following discussion thread from the Firebase team, they are presently working on 3.x support. There is however no release time frame set.

Google Groups Discussion.

Workarounds

Option 1 (with FB 2.x)

From Jacob Wenger:

If React Native support is a blocker for you, please continue to use the 2.x.x SDKs until we resolve this issue. The 2.x.x SDKs will continue to work, even after you migrate to the new console..`

Option 2 (with FB 3.x)

From Jacob Wenger:

As a "workaround" if you don't need auth (unlikely, I know, but still worth mentioning), you should be able to do the following:

var app = require('firebase/app');
var database = require('firebase/database');

To use last version of Firebase with ReactNative you can use Firebase Bridge.

I have a demo app here.

Whilst the Firebase JS SDK does work on react native now, it is mainly built for the web and is generally not the best solution for react-native.

The Firebase Web SDK runs entirely on react native's JS thread, therefore affecting your application frame rate (the link explains this well).

In my tests, the native firebase SDK's has been roughly 2-3 times quicker than using the web SDK.

But on top of the potential performance impacts there's a lot of features you'll be unable to use with the web SDK on android/ios devices. For example:

  • Notifications / FCM
  • Offline capabilities
  • Storage upload/download
  • Firebase Crash Reporting
  • Analytics
  • Use of social authentication providers

The best approach would be to run with the native android/ios firebase sdk's and have a bridge between them and your js code (i.e. a native module setup).

Thankfully you don't have to implement this yourself, there's already modules out there to do this for you:

react-native-firebase for example mirrors the the web sdk's api js side but executes on the native side using the native android & ios firebase sdk's. It's fully compatible with any existing firebase js logic that you may have already implemented and is intended as a drop in replacement for the web sdk.

(disclaimer: I am the author of react-native-firebase)

Comments

Post a Comment

Popular posts from this blog

Meaning of `{}` for return expression

-
15 1 I found by accident that the following compiles: #include <string> #include <iostream> class A{ int i{}; std::string s{}; public: A(int _i, const std::string& _s) : i(_i), s(_s) { puts("Called A(int, const std::string)"); } }; A foo(int k, const char* cstr){ return {k, cstr}; // (*) } int main(){ auto a = foo(10, "Hi!"); return 0; } The line of interest is (*). I guess the function foo is equivalent to: A foo(int k, const char* str){ return A(k, cstr); } However, is there a special name for this mechanism in (*)? Or is it just the simple fact that the compiler knows which constructor to call due to the return type? ...
Read more

Get current scroll position of ScrollView in React Native

-
Is it possible to get the current scroll position, or the current page of a <ScrollView> component in React Native? So something like: <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView> Try. <ScrollView onScroll={this.handleScroll} /> And then: handleScroll: function(event: Object) { console.log(event.nativeEvent.contentOffset.y); }, Disclaimer: what follows is primarily the result of my own experimentation in React Native 0.50. The ScrollView documentation is currently missing a lot of the information covered below; for instance onScrollEndDrag is completely undocumented. Since everything here relies upon undocumented behaviour, I can unfortunately make no promises that this information will remain correct a ...
Read more

flutter websocket connection issue

-
I am trying to develop a flutter app which connects to the server and exchanges data using websocket. The server is in .Net Core and using Asp.Net Core Websockets to implement this functionality. The problem I am facing is, my flutter app is not able to connect to the server and throws following error. E/flutter (31498): [ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception: E/flutter (31498): WebSocketChannelException: WebSocketChannelException: WebSocketException: Connection to 'http://127.0.0.1/client#' was not upgraded to websocket E/flutter (31498): #0 new IOWebSocketChannel._withoutSocket.<anonymous closure> (package:web_socket_channel/io.dart:83:24) E/flutter (31498): #1 _invokeErrorHandler (dart:async/async_error.dart:13:29) E/flutter (31498): #2 _HandleErrorStream._handleError (dart:async/stream_pipe.dart:286:9) E/flutter (31498): #3 _ForwardingStreamSubscription._handleError (dart:async/stream_pipe.dart:168:13) E/flutter (3149...
Read more