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.

Practice

1. What is the main purpose of using on('value') in React Native with Realtime Database?

easy

A. To write new data to the database

B. To delete data from the database

C. To listen for live updates to data changes

D. To stop listening to data changes

Solution

1. Step 1: Understand the on('value') method

   This method sets up a listener that triggers every time the data at the reference changes.

2. Step 2: Identify the purpose in app behavior

   It keeps the app data synced live by updating the UI or state whenever data changes.

3. Final Answer:

   To listen for live updates to data changes -> Option C

4. Quick Check:

   on('value') listens for updates [OK]

Hint: Remember: 'on' means listen for live data changes [OK]

Common Mistakes:

• Confusing 'on' with writing data
• Thinking it deletes data
• Assuming it stops listeners

2. Which of the following is the correct way to create a reference to the 'users' node in Firebase Realtime Database in React Native?

easy

A. const usersRef = database().ref('users');

B. const usersRef = database.ref('users');

C. const usersRef = database().reference('users');

D. const usersRef = database().child('users');

Solution

1. Step 1: Recall the correct method to get a reference

   In React Native Firebase, database() returns the database instance, and ref('path') creates a reference.

2. Step 2: Check each option's syntax

   const usersRef = database().ref('users'); uses database().ref('users') which is correct. const usersRef = database.ref('users'); misses parentheses after database. const usersRef = database().reference('users'); uses a wrong method name. const usersRef = database().child('users'); uses child which is valid but requires a reference first.

3. Final Answer:

   const usersRef = database().ref('users'); -> Option A

4. Quick Check:

   Use database().ref('path') for references [OK]

Hint: Use parentheses after database and then call ref() [OK]

Common Mistakes:

• Omitting parentheses after database
• Using wrong method names like reference()
• Confusing ref() with child() without base ref

3. Given the code below, what will be logged when the data at 'messages' changes?

const messagesRef = database().ref('messages');
messagesRef.on('value', snapshot => {
  console.log(snapshot.val());
});

medium

A. An error message because 'val()' is invalid

B. The current value of 'messages' node as a JavaScript object

C. A function reference to the listener

D. Nothing, because 'on' does not trigger automatically

Solution

1. Step 1: Understand what snapshot.val() returns

   It returns the current data stored at the reference as a JavaScript object or value.

2. Step 2: Analyze the listener behavior

   The on('value') listener triggers immediately with current data and on every change, so it logs the current 'messages' data.

3. Final Answer:

   The current value of 'messages' node as a JavaScript object -> Option B

4. Quick Check:

   snapshot.val() returns data [OK]

Hint: Remember: snapshot.val() gives current data object [OK]

Common Mistakes:

• Thinking on() returns a function
• Believing val() is invalid
• Assuming on() does not trigger immediately

4. What is wrong with the following React Native code snippet using Realtime Database?

const ref = database().ref('items');
ref.on('value', snapshot => {
  setItems(snapshot.val());
});

// Later in component unmount
ref.off('value');

medium

A. ref.off('value') should be called before on('value')

B. The ref is incorrectly created without parentheses

C. setItems cannot be called inside on('value')

D. The listener is not properly removed because off() needs the callback function

Solution

1. Step 1: Understand how to remove listeners

   To remove a specific listener, off('value', callback) must be called with the same callback function used in on.

2. Step 2: Identify the problem in the code

   The code calls off('value') without the callback, so the listener remains active, causing potential memory leaks.

3. Final Answer:

   The listener is not properly removed because off() needs the callback function -> Option D

4. Quick Check:

   off() requires callback to remove listener [OK]

Hint: Always pass the same callback to off() to stop listeners [OK]

Common Mistakes:

• Calling off() without callback removes nothing
• Confusing ref creation syntax
• Thinking setItems can't be called inside listener

5. You want to display a live list of chat messages in your React Native app using Realtime Database. Which approach correctly ensures the listener is cleaned up to avoid memory leaks?

hard

A. Use useEffect hook to attach on('value') listener and return a cleanup function that calls off('value', callback)

B. Attach on('value') listener outside the component and never remove it

C. Call off('value') immediately after on('value') inside the same function

D. Use once('value') instead of on('value') to get live updates

Solution

1. Step 1: Understand React Native lifecycle with listeners

   Listeners should be attached when component mounts and removed when it unmounts to avoid leaks.

2. Step 2: Use useEffect for setup and cleanup

   Inside useEffect, attach the listener and return a cleanup function that calls off with the same callback.

3. Step 3: Evaluate other options

   Attach on('value') listener outside the component and never remove it leaks memory. Call off('value') immediately after on('value') inside the same function removes listener immediately, so no updates. Use once('value') instead of on('value') to get live updates only fetches once, not live updates.

4. Final Answer:

   Use useEffect hook to attach on('value') listener and return a cleanup function that calls off('value', callback) -> Option A

5. Quick Check:

   Attach listeners in useEffect and clean up with off() [OK]

Hint: Attach listeners in useEffect and clean up on unmount [OK]

Common Mistakes:

• Not removing listeners causing memory leaks
• Removing listener immediately after adding
• Using once() instead of on() for live data