Firebase 3.3 realtime database stuck to "Making a connection attempt" with React Native 0.32

Question

react-native v0.32 tested on android device with wifi

Firebase database doesn't have any auth rules, it's open read and write.

Given the following file structure :

|_ firebase.js
|_ actions.js

This doesn't work :

firebase.js

import firebase from 'firebase'

const config = {
    apiKey: "*****",
    authDomain: "****",
    databaseURL: "*****",
    storageBucket: "*****",
}

firebase.database.enableLogging(true);

export default firebase.initializeApp(config)

actions.js

import firebase from './firebase'

export const fetchData = () => {
    const Data = firebase.database().ref('some/data')
    Data.on('value', (snapshot) => {
        console.log("snapshot", snapshot.val())  // never printed
    }, (error) => {
        console.error(error)
    })
}

debug output

p:0: Browser went online.  
firebase-database.js:36 p:0: Listen called for /some/data default  
firebase-database.js:36 p:0: Making a connection attempt

Nothing else...

This does work (but it's not a solution) :

firebase.js

...same content as above...

export default () => firebase.initializeApp(config)  // we export a function instead to trigger the initialization when the app is ready

actions.js

...same content as above...
const Data = firebase().database().ref('some/data') // we "manually" trigger the initialization, it's obviously not a good solution since we can't initialize the app multiple times

output

p:0: Browser went online.  
firebase-database.js:36 p:0: Listen called for /some/data default  
firebase-database.js:36 p:0: Making a connection attempt  
firebase-database.js:36 p:0: Auth token refreshed  
firebase-database.js:36 getToken() completed. Creating connection. 
firebase-database.js:36 c:0:0: Connection created

What am I doing wrong here ? I also noticed that once I import firebase from 'firebase', the firebase variable is available globally in all the files that is NOT the firebase var from the import statement (I could have written import FooBar from 'firebase', the firebase global var is still imported)

Have you tried turn off debug mode? I had similar problem but it only happens in debug mode. — Xeijp
– Xeijp, Commented Aug 26, 2016 at 2:09
I actually did turned on the debug mode since nothing was happening, so unfortunately it's not that. — Pierre Criulanscy
– Pierre Criulanscy, Commented Aug 26, 2016 at 6:28
You're not doing anything wrong, something is broken between latest firebase and react-native (this might be normal but it doesn't seem documented anywhere). Worked for me with "firebase": "^3.1.0", "react": "15.2.1", "react-native": "^0.29.0". — Dagobert Renouf
– Dagobert Renouf, Commented Aug 31, 2016 at 11:04
@Pcriulan you could try different dependency combination to see which one breaks first. I had actually started to but npm caching issues made it take way too long for the time I could dedicate to it. — Dagobert Renouf
– Dagobert Renouf, Commented Aug 31, 2016 at 13:07

Pierre Criulanscy · Accepted Answer · 2016-09-20 10:33:23Z

2

Since nobody seems to have an "official" answer. Here is the workaround I came with to provide some sort of lazy initialization :

firebase.js

import Firebase from 'firebase'

let _database = null

const initFirebase = () => {
    var config = {
        apiKey: "*************",
        authDomain: "************",
        databaseURL: "**********",
        storageBucket: "************",
    }

    Firebase.database.enableLogging(true)
    Firebase.initializeApp(config)
}

export const getDatabase = () => {
    if (!_database) {
        initFirebase()
        _database = Firebase.database()
    }
    return _database
}

Then, anywhere you need the database:

import { getDatabase } from './firebase'

const methodThatNeedDatabase = () => {
    getDatabase().ref('/some/ref')
    ...
}

edited Sep 20, 2016 at 10:33

answered Sep 4, 2016 at 9:14

Pierre Criulanscy

8,7063 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kato Over a year ago

Does this actually make it faster or just defer the delay?

Collectives™ on Stack Overflow

Firebase 3.3 realtime database stuck to "Making a connection attempt" with React Native 0.32

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related