CODEWITHSUNDEEP
firebasereact-nativefirebase-realtime-database
Vinay Abhishek Manchiraju
Vinay Abhishek Manchiraju

Reputation: 127

How to connect/debug Firebase connectivity on a React-Native Android App

I was trying to implement the sample react-native firebase app posted in a popular blog.

My initialization looks like this:

const firebaseConfig = {
  apiKey: "AIzaSyDKTvsqGoMn9ksXxaujXqciM2M5R0tuZlw",
  authDomain: "my-awesome-project-a8216.firebaseapp.com",
  databaseURL: "https://my-awesome-project-a8216.firebaseio.com",
  storageBucket: "my-awesome-project-a8216.appspot.com",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);

My code looks like this:

     constructor(props) {
      super(props);
      this.state = {
        dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
      };
      this.itemsRef = this.getRef().child('items');
    }
    getRef() {
      console.log("Reference "+firebaseApp.database().ref().child('items'));
        return firebaseApp.database().ref();
      }

    componentDidMount() {
        this.listenForItems(this.itemsRef);
      }
  _renderItem(item) {
      return (
        <ListItem item={item}  onPress = {() => {

        }}/>
      );

    }

    listenForItems(itemsRef) {
      console.log("Came 1");

    itemsRef.on('value', (snap) => {
      console.log("Came Here");

      // get children as an array
      var items = [];
      snap.forEach((child) => {
        console.log("my data "+ child.key);
        items.push({
          title: child.val().title,
          _key: child.key
        });
      });

      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(items)
      });

    });
  }

In the above code, there are two console.log debug statements in the listenForItems function. 

console.log("Came 1");
console.log("Came Here");

I see "Came 1" on the chrome console and do not see "Came Here" The Network Tab in the chrome console does not show any outbound calls to the firebase url referenced in the code. There are no errors on the console as such leaving me no clue to debug whats going on...

I appreciate all your answers. Thanks :)

Upvotes: 1

Views: 4103

Answers (1)

Dagobert Renouf
Dagobert Renouf

Reputation: 2148

If you want to debug more easily, you can do firebase.database.enableLogging(true); right after your firebase conf.

Firebase 3.3 seems to have trouble integrating with react-native. Waiting for a fix to be released, you can downgrade to the same dependencies used in the tutorial :

"dependencies": {
    "firebase": "^3.1.0",
    "react": "15.2.1",
    "react-native": "^0.29.0"
}

This should fix your problem for now.

Also make sure that you have allowed public access in your firebase settings. Go to project > database > rules.

Replace

// These rules require authentication
{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

with

// These rules give anyone, even people who are not users of your app,
// read and write access to your database
{
  "rules": {
    ".read": true,
    ".write": true
  }
}

See this https://firebase.google.com/docs/database/security/quickstart

Upvotes: 2

Related Questions