Troubleshooting Firebase in React Native

I am creating an Android app using React Native and Firebase. I had some trouble getting started.

Navigator is dead

React Native is a framework which constantly changes. It is sometimes tough to keep up with it. Do you notice something missing in the documentation?

Navigator component is deprecated. That shocked me for some time. I have used Navigator in several applications now. And some of them are still running (in production). So, why was it deprecated? I don’t know. They found something better. The new hotness is react-navigation. It is easy to use.

import {
  StackNavigator,
} from 'react-navigation';

const BasicApp = StackNavigator({
  Main: {screen: MainScreen},
  Profile: {screen: ProfileScreen},
});

The code is self explanatory. There are quite a few configuration options. I did play around with it for some time. The key prop to understand is navigation options.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Home from './components/home';

const ReactQuiz = StackNavigator({
  Home: { 
    screen: Home,
    navigationOptions: ({navigation}) => ({
      title: 'React Quiz',
      headerStyle: styles.header,
      headerTintColor: '#fff'
    }),
  },
});

const styles = StyleSheet.create({
  header: {
    backgroundColor: '#3A5199'
  }
});

AppRegistry.registerComponent('ReactQuiz', () => ReactQuiz);

Firebase rules

After fixing the navigator, I started working on Firebase. Firebase is so simple to use. I have used it previously. The below code should work but it did not work.

import database from './database';

export default class Quiz {
    static getQuestions() {
        return new Promise((resolve, reject) => {
            const quiz = [];
            database.ref('quizzes/0/questions').once('value', (snapshot) => {
                snapshot.forEach(childSnapshot => {
                    quiz.push(childSnapshot.val());
                })
                resolve(quiz);
            });
        });   
    }
}

After scratching all over for an hour, I realised I forgot to turn on the database rules. By default, Firebase allows only authenticated users to access the data. To change it, the database rules should be modified.

{
  "rules": {
    ".read": true,
    ".write": false
  }
}

Timer warning

After Firebase started working, I came across a console warning. The warning message referred to a github issue.

For some reason, I ignored the github issue and posted a question in StackOverflow. The right answer pointed back to the Github issue. But it saved some time by asking me to ignore the console warning.

console.ignoredYellowBox = [
    'Setting a timer'
]

React Native reminds me of some of the technologies from Microsoft. It is easy when it works. But when it does not, it requires some silly tweaks.