I just started to play around with Firebase and React Native, and I noticed 2 major problems:
React Native seems to break debugging in Chrome
I get a Network error when tyring to use the createUser call.
Otherwise the integration seems to be awesome!
For 1, You can use Firebase 2.2.7.
https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/firebase-talk/aoPNvQQsVUE/Kh1E5rjrCAkJ
It said that this is fixed with the latest release we just put out (2.2.7).
And this issue was closed. https://github.com/facebook/react-native/issues/1149
Related
We are using firebase crashlytics in react native. But the problem is when the android app crashed, crashlytics give us android native code report. Not the react native code. That is obvious since it is already compiled to native code. But the thing is we are not able to map issues into react native code. Is there any mechanism to do this automatically or manually with the minimum human involvement?
Crash Analytics won't give you detailed report in javascript. Rather it would define the screen where it crashed and the devices/OS etc. You will have to figure the crash yourself. It will give you the crash report like :
com.facebook.soloader.SoLoader.doLoadLibraryBySoName (SoLoader.java)
com.facebook.soloader.SoLoader.assertInitialized (SoLoader.java)
com.facebook.soloader.SoLoader.assertInitialized (SoLoader.java)
com.facebook.soloader.SoLoader.assertInitialized (SoLoader.java)
com.facebook.react.bridge.ReactBridge.staticInit (ReactBridge.java)
com.facebook.react.bridge.NativeMap. (NativeMap.java)
com.facebook.react.jscexecutor.JSCExecutorFactory.create
(JSCExecutorFactory.java)
com.facebook.react.ReactInstanceManager$5.run
(ReactInstanceManager.java)
*You need to have a basic native knowledge or you can google these errors and know the root cause. Also, FYI Sentry can of great help to you as it records javascript error also. Also, A/c firebase latest version 6+ now records JS errors also*
i have to implement mixpannel analytics in one of my app.
i checked out Mixpannel officail site and react-native-mixpannel
but i'm struggling how to get started with it.
How to use it from scratch and what things i need for it like firebase
or not ?
Please suggest me some article or something else from where i can implement mixpannel anaylits to my react native app
Thanks
First of all did you use react-native init AwesomeProject or expo new?
With the first one you have access to the native code for iOS and Android.
For expo you have only the JavaScript files and you can't use this SDK.
I want to add Firebase Crashlytics to my React native project. I had a look online and some of the links suggested using Crashlytics with Fabric,
When I looked at Fabric and at somepoint it was mentioned that it was only available till 2020 and recommended to use Firebase Crashlytics. I am a bit confused.
Can any one suggest any link/guide to implement Firebase Crashlytics in my React native project.
Thanks
R
Its kind of simple.
First you need to add firebase to your project use the following link to link react-native-firebase .
https://rnfirebase.io/docs/v5.x.x/installation/initial-setup
Then use there doc to add firebase crash analytics into your code
https://rnfirebase.io/docs/v5.x.x/crashlytics/reference/crashlytics
for example:
import firebase from 'react-native-firebase'
componentDidMount(){
firebase.crashlytics().log('Test Message!');
firebase.crashlytics().recordError(37,"Test Error");
}
Add firebase to your project followed by crashlytics sdk. You might need to put the keys in your android and ios projects. Thts it.
Also have a look at sentry- its more suitable for JS based apps as it shows the line nos and the code which caused the crash. Crashlytics on the other hand as i remember shows only native crashes.
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)
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.
Uninstall Firebase from your react-native project npm uninstall firebase --save
Install version 2.4.2 of firebase npm install firebase#2.4.2 --save
Happy Firebaseing!
Firebase JS SDK 3.1 just got released and is now compatible with React Native!
See release notes.
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)
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)
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.
Uninstall Firebase from your react-native project npm uninstall firebase --save
Install version 2.4.2 of firebase npm install firebase#2.4.2 --save
Happy Firebaseing!
Firebase JS SDK 3.1 just got released and is now compatible with React Native!
See release notes.
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)