FireBase Lab And Components

Documentation & Snack

Expo has great documentation on interfaces with firebase and firestore

Below is an example of how to write a Mario document to character collection.

import * as firebase from 'firebase';
import 'firebase/firestore';
const firebaseConfig = { ... }  // apiKey, authDomain, etc. (see above)

const dbh = firebase.firestore();
employment: "plumber",
outfitColor: "red",
specialAttack: "fireball"

Don’t initialize multiple duplicates.

import firebase from 'firebase'
if (!firebase.apps.length) {

Here is an example of reading from a collection

let cityRef = db.collection('characters').doc('mario');
let getDoc = cityRef.get()
  .then(doc => {
    if (!doc.exists) {
      console.log('No such document!');
    } else {
      console.log('Document data:',;
  .catch(err => {
    console.log('Error getting document', err);

Listener syntax for firestore

Listens for changes to the document. It can be modified to listen to changes to a collection.

 let doc = db.collection('characters').doc('mario');
let observer = doc.onSnapshot(docSnapshot => {
  console.log(`Received doc snapshot: ${docSnapshot}`);
  // ...
}, err => {
  console.log(`Encountered error: ${err}`);

Firebase lab (total 120 points)

For this lab, implement the following screen meeting these specs (link to design), use the previous lab as your starting point.

1.    Integrating with firebase
(total 45 points)

1.1    Invitations and Firebase (25 Points)

When a user accepts or rejects an invitation the appropriate firebase objects are updated or deleted.   Spend some time talking with your partner about how you would structure, collections and JSON objects.

Also, think about what queries you could run to get the information that you need. You don’t have to create new collections to represent categories. You can do this with querying.

1.2    Linking Card to Firebase Invitation Card (20 points)

1.2.1    As a user I can click the accept button to accept an invitation and change is reflected in firebase. (10 points)

Once the user clicks the accept button the Invitation should flash green for 1 second and then disappear. After clicking accept/reject, the next pending (if any) invitation replaces the original invitation.

1.2.2    As a user I can click the reject button on an invitation and the change is reflected in firebase. (10 points)

Practice with Navigation.

2.    Invitation Details/Edit Detail Screen (total 75 points)

The screen below shows the design for the invitation screen. This is the screen that the user will see when they click on any part of the invitation card (not including the Accept or Decline sections). The screen is intended to provide the user with an overview of the events as well as a map including directions on how to get to the event.

Screen Shot 2019-10-30 at 5.06.02 PM.png

2.1    Click on the invitation card. (20 points)

2.1.1    As a user I can navigate to the invitation screen by clicking on the invitation card on the home screen. (20 points)

Practice with Expo Components.

Remember that expo provides a list of components that makes integrating feature like this really easy.  Check the documentation: (Important you don’t have to get blue overlay. That is just apart of the style of the design) 

2.2    Display Map with the location of the event marked. (25 points)

To make it easier for a user to decide if they will accept a dinner invitation, we would like to show them a map of location relative to their current location. Feel free to create your own data for this section.    Assume The longitude and Latitude are available as part of the Invitation object. You can choose longitudes and latitudes that are close to you.

2.2.1    As a user I can see a marker on the screen displaying the location of the current event. (25 points)

2.3    Display your current location on the map. (30 points)

In addition to displaying the location of the event. It would also be useful if the user can see the current location.


Submit the lab, by publishing to expo from your local machine instructions in the slide set. Deploying  & Testing[PDF]