When using Firebase on ReactNative, it will show such error message:
can't find variable process
However, if I require firebase/lib/firebase-web.js manually, it will show:
can't find variable document
How can I resolve this?
I just went through the same issue while trying to use sockets.io in my react native app so hopefully I can help.
The reason that you cannot use firebase's node module is because there hasn't been a polyfill created yet for websockets support (which firebase is dependent on) in react native.
If you take a look at issue #619 in react native's repo you'll find the current discussion on creating a websockets api polyfill.
The way that we solved it is by using Jason's modified version of the sockets library and creating our own repo around just that file. Then we added the line below to our package.json dependencies.
"react-sockets": "crewapp/react-native-sockets-io"
The reason that Jason's version of the sockets.io client file works is because react-native is added as a user agent. You can find the code that makes this change at the top of the file:
window.navigator = {
userAgent: "react-native"
}
Once you've gone through these steps you should be able to require sockets.io / firebase as normal.
Just figuring it our. Pavan's answer is helpful, but it is not quite true when using with Firebase.
For firebase, please follow the steps:
Download the firebase-debug.js from wsExample. Or you can just install wsExample by npm and require the firebase-debug.js inside it.
Use badfortrains's forked React-Native:
"react-native": "git://github.com/badfortrains/react-native#WebSocket"
New the Firebase like this:
var firebase = require("../../firebase-debug.js");
var rootRef = new Firebase(Const.FB_ROOT);
Things should just work now!
I had issues with socket.io on React Native too, solution was to get notifications about new data and if data is big enough - get it by simple RESTfull request. in my case data was small enough to be sent all within notifications API.
I was using GCM service to send notification to phone from nodejs server. BTW, it uses less battery then socket connection and works great :)
Related
I have this database.
database
How can i get firstName in React-Native ?
It's simple in your case : use react-native-firebase
import firebase from 'react-native-firebase'
const ref = firebase.database().ref('users/fwDRY...G3');
const name = ref.get({ firstname: 'firstname' });
console.log(name.firstname)
Find yourself helpful from the docs: https://rnfirebase.io/docs/v5.x.x/database/reference/database
As React Native runs in Java Script thread on mobile platforms there are 2 ways to use it.
Using Web SDK, but it might be slower and is not as well integrated to the mobile operating system as native.
Using Native SDK for each platform. Using them manually on 2 platforms would require you to write React Native bindings for both platforms. Fortunately, the job has already been done. I highly recommend you to use this library https://github.com/invertase/react-native-firebase. It uses native APIs internally but exposes them into nice JavaScript API. It requires some setup but you won't work it around anyway regardless of the method chosen.
For example, to set it up for Android, you need to follow
https://rnfirebase.io/docs/v5.x.x/installation/initial-setup
https://rnfirebase.io/docs/v5.x.x/installation/android
https://rnfirebase.io/docs/v5.x.x/database/android
After you set it up, follow the link provided by frank-van-puffelen, https://firebase.google.com/docs/database/web/read-and-write#listen_for_value_events. The API on react-native-firebase is almost the same.
i made an app with Electron, react, realm.
my OS is windows 10(x64)
and now i meet a problem when i try to use 'encryptionKey ' option.
var realm = new Realm({schema: [CarSchema, PersonSchema], encryptionKey: new Int8Array(64)});
as you can see, i followed Docs.
and my electron app say "Error: Encryption not enabled at Object."
i try to find the reason for 2 days...but still i can't understand.
i use latest electron(ver.1.6.2) and realm(ver.1.2.0)
and i used 'electron-rebuild' to use realm db in Electron.
so, when i check node_modules
node_modules
------|--relam
------------|-- compiled
------------------|-- electron-v1.6_win32_x64_ <--- this is newly added after i use
electron-rebuild.
------------------|-- node-v48_win32_x64
if i don't use encryptionKey option, my app is working well with no problems to use relam DB.
please give me an answer how to fix it.
Encryption and Sync aren't supported on Windows.
This isn't mentioned in the Realm React Native docs, but it's in the Realm Xamarin Docs under Limitations: https://realm.io/docs/xamarin/latest/#limitations-on-windows-desktop-or-uwp
I would like to use Firebase analytics for one of my library modules. I would like to program in such a way that configuration file (google-services.json) should be accessible from either client app folder or configure the same from the client side.
Is there a way I could implement the above mentioned scenario?
Thanks in advance.
You can initialize your library project configurations manually as below,
For more info, kindly refer working-with-multiple-firebase-projects-in-an-android-app
Also go-through how-does-firebase-initialize-on-android to understand; how the Firebase module is getting initialized by itself.
For Android apps using Firebase, there is a central FirebaseApp object
that manages the configuration for all the Firebase APIs. This is
initialized automatically by a content provider when your app is
launched, and you typically never need to interact with it. However,
when you want to access multiple projects from a single app, you'll
need a distinct FirebaseApp to reference each one individually. It's
up to you to initialize the instances other than the default that
Firebase creates for you.
FirebaseOptions options = new FirebaseOptions.Builder()
.setApplicationId("1:530266078999:android:481c4ecf3253701e") // Required for Analytics.
.setApiKey("AIzaSyBRxOyIj5dJkKgAVPXRLYFkdZwh2Xxq51k") // Required for Auth.
.setDatabaseUrl("https://project-1765055333176374514.firebaseio.com/") // Required for RTDB.
.build();
FirebaseApp.initializeApp(this /* Context */, options, "secondary");
Hope I've answered your question.
I've found interesting workaround. Try the following:
put your google-services.json to any sample app google provides for Firebase integration. Compile it.
Take a look on path app/build/generated/res/google-services/debug/values/ there should be generated values.xml file with bunch of strings mentioned in errors you described. Copy these strings to value.xml file of your project. That's it.
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)