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

Question

[email protected]

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)

Answer 1

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')
    ...
}