Realtime Database in React Native

Introduction

A Realtime Database lets your app save and get data instantly. It keeps all users' data updated live without needing to refresh.

You want to show chat messages as soon as someone sends them.

You need to update a game scoreboard for all players at the same time.

You want to sync user settings across devices instantly.

You want to show live updates like stock prices or sports scores.

You want to build a collaborative app where many users edit data together.

Syntax

React Native

import database from '@react-native-firebase/database';

// To write data
database().ref('/path').set({ key: 'value' });

// To read data once
const snapshot = await database().ref('/path').once('value');
const data = snapshot.val();

// To listen for realtime updates
const ref = database().ref('/path');
const onValueChange = ref.on('value', snapshot => {
  const data = snapshot.val();
  // use data
});

// To stop listening
ref.off('value', onValueChange);

Use ref('/path') to point to the data location.

Use on('value', callback) to listen for live changes.

Examples

This saves user data at the path '/users/user1'.

React Native

database().ref('/users/user1').set({ name: 'Anna', age: 25 });

This listens to all messages and logs them whenever they change.

React Native

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

This reads the settings data once without listening for changes.

React Native

const snapshot = await database().ref('/settings').once('value');
const settings = snapshot.val();

Sample App

This app shows a number from the Realtime Database and updates it live. Pressing the button adds 1 to the number for all users instantly.

React Native

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import database from '@react-native-firebase/database';

export default function RealtimeExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const ref = database().ref('/counter');
    const onValueChange = ref.on('value', snapshot => {
      setCount(snapshot.val() || 0);
    });
    return () => ref.off('value', onValueChange);
  }, []);

  const increment = () => {
    database().ref('/counter').set(count + 1);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24, marginBottom: 20 }}>Counter: {count}</Text>
      <Button title="Increment" onPress={increment} />
    </View>
  );
}

Important Notes

Always remove listeners with off to avoid memory leaks.

Realtime Database works well for simple, live data syncing but may not fit complex queries.

Security rules control who can read or write data; set them carefully.

Summary

Realtime Database keeps app data synced live for all users.

Use ref to point to data and on('value') to listen for changes.

Remember to stop listeners when not needed to save resources.

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