Realtime Database in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Realtime Database module from Firebase.

React Native

import { getDatabase } from '[1]';

Drag options to blanks, or click blank then click option'

Afirebase/firestore

Bfirebase/database

Cfirebase/auth

Dfirebase/app

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from 'firebase/firestore' instead of 'firebase/database'.

Importing from 'firebase/app' which is the core but not the database module.

You import getDatabase from firebase/database to use Realtime Database features.

2fill in blank

medium

Complete the code to get a reference to the Realtime Database.

React Native

const db = [1]();

Drag options to blanks, or click blank then click option'

AgetDatabase

BgetFirestore

CinitializeApp

DgetAuth

Attempts:

3 left

💡 Hint

Common Mistakes

Using getFirestore() which is for Firestore database.

Using initializeApp() which initializes Firebase but does not return the database.

getDatabase() returns the Realtime Database instance to read or write data.

3fill in blank

hard

Fix the error in the code to write data to the Realtime Database.

React Native

import { ref, set } from 'firebase/database';

const db = getDatabase();

set([1](db, 'users/user1'), {
  username: 'Alice'
});

Drag options to blanks, or click blank then click option'

Areference

BreferenceDb

Cref

DdatabaseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reference' or 'referenceDb' which are not valid functions.

Using 'databaseRef' which is not imported or defined.

The correct function to create a reference is ref. Other names cause errors.

4fill in blank

hard

Fill both blanks to read data once from the Realtime Database.

React Native

import { ref, [1] } from 'firebase/database';

const db = getDatabase();

[2](ref(db, 'messages/message1')).then(snapshot => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  }
});

Drag options to blanks, or click blank then click option'

Aget

BonValue

Cfetch

Dread

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'onValue' which listens continuously, not just once.

Using 'fetch' or 'read' which are not Firebase Realtime Database functions.

The get function reads data once from the database. It returns a promise.

5fill in blank

hard

Fill all three blanks to listen for real-time updates on a database reference.

React Native

import { ref, [1] } from 'firebase/database';

const db = getDatabase();

const messageRef = [3](db, 'chat/latest');

[2](messageRef, snapshot => {
  console.log(snapshot.val());
});

Drag options to blanks, or click blank then click option'

AonValue

Bget

Cref

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' instead of 'onValue' for listening.

Using 'set' which writes data, not reads.

ref creates the reference, and onValue listens for real-time updates.