When I try to use npm install to use firebase with React native, I am getting errors.
Then when I try to use require for the firebase module, it says that the document can't be found.
Is there a way to utilize the firebase API with React native instead?
Firebase uses WebSockets, which currently is not supported by React Native. As of now, there is no good solution to integrate Firebase with React Native.
In lieu of requiring firebase as a module, you can indeed use the firebase API instead. If you were doing a simple get request, your fetch function would look like this:
var url = "https://YourDatabaseName.firebaseio.com/some/val.json";
fetch(url)
.then((response) => response.json())
.then((responseData) => {
console.log(responseData);
})
.done();
For more information, you can check out a blog post I wrote about the topic here:
http://anuj.io/using-firebase-api-with-react/
Firebase dev here — as of v0.4.4 of React Native, WebSockets are now supported, and as of version 2.2.5 of Firebase's JS client, we've implemented the integration with React Native. Therefore, Firebase should now work in your React Native app!
There is a known issue with our authentication methods at the moment, but we're working on it.
Let us know if you have any questions!
Related
I am new to react native. I want to know how to call ASP.NET api from react native. I don't have any URL to call inside fetch(). Can any one point me in right direction? It is fair to say I don't know much about ASP.NET web API.
There is good library available in React-native to handle api calls axios.
Installation
npm install axios for npm
yarn add axios for yarn users
Delete Request
axios.delete(URL).then((response)=>{
console.log(response);
//Do whatever you want to do with data
}).catch((error)=>{
console.log(error);
})
For more info read here(Its pretty good library to handle Api calls)
Axios Docs Github
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'm using https://rnfirebase.io in react native, and I'm getting this strange error when trying to call firebase sign in with phone
submit() {
firebase
.auth()
.signInWithPhoneNumber(this.phoneInput)
.then(confirmResult => console.log(confirmResult))
.catch(error => console.log(error));
}
What could it be?
This can happen when you've updated a native dependancy via npm but have not rebuilt the native side of your app.
The JS bundle will generally have the latest code immediately (after packager restart) but the native side will not until you rebuild your app on xcode/studio; therefore causing argument mismatches across React Native's bridge as both could be expecting very different arguments based on their previous versions.
The same applies in reverse, you've re-built your native app but not restarted the packager after updating a native dependancy via npm.
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)