Cloud Storage in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

How does React Native handle file upload progress with cloud storage?

You want to show a progress bar while uploading a file to cloud storage in React Native. Which code snippet correctly updates the progress state during upload?

React Native

import {useState} from 'react';
import {uploadBytesResumable, ref} from 'firebase/storage';

const uploadFile = (file, storage) => {
  const [progress, setProgress] = useState(0);
  const storageRef = ref(storage, 'files/' + file.name);
  const uploadTask = uploadBytesResumable(storageRef, file);

  uploadTask.on('state_changed', snapshot => {
    const percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    setProgress(percent);
  });

  return progress;
};

A uploadTask.on('state_changed', snapshot => { const percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; setProgress(percent); });

B uploadTask.on('progress', snapshot => { const percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; setProgress(percent); });

C uploadTask.on('state_changed', () => { setProgress(100); });

D uploadTask.on('change', snapshot => { const percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; setProgress(percent); });

💡 Hint

The event name for upload progress updates is 'state_changed'.

The 'state_changed' event provides snapshot data including bytesTransferred and totalBytes, which you use to calculate upload progress percentage.

🧠 Conceptual

intermediate

What is the purpose of Firebase Storage security rules?

Why do we use security rules in Firebase Cloud Storage for a React Native app?

A To speed up file uploads by caching files locally.

B To control who can read or write files in the storage bucket.

C To automatically compress files before upload.

D To convert files to a different format after upload.

💡 Hint

Think about protecting user data and access permissions.

Security rules define who can upload, download, or delete files, protecting your storage from unauthorized access.

❓ lifecycle

advanced

What happens if you try to download a non-existent file from Firebase Storage?

In React Native, if you call getDownloadURL() on a reference to a file that does not exist in Firebase Storage, what will happen?

A It returns a URL that leads to a 404 page.

B It returns an empty string as the URL.

C The promise rejects with a 'storage/object-not-found' error.

D The app crashes with an unhandled exception.

💡 Hint

Check how Firebase Storage handles missing files.

Firebase Storage rejects the promise with a specific error code when the file is not found.

📝 Syntax

advanced

Which code correctly deletes a file from Firebase Storage in React Native?

You want to delete a file named 'image.png' from Firebase Storage. Which code snippet correctly performs this action?

React Native

import {ref, deleteObject} from 'firebase/storage';

const deleteFile = async (storage) => {
  const fileRef = ref(storage, 'images/image.png');
  await deleteObject(fileRef);
};

A const fileRef = ref(storage, 'images/image.png'); await deleteObject();

B const fileRef = ref('images/image.png'); await deleteObject(fileRef);

C const fileRef = ref(storage, 'images/image.png'); deleteObject(fileRef);

D const fileRef = ref(storage, 'images/image.png'); await deleteObject(fileRef);

💡 Hint

Remember to pass the storage instance to ref and await the async deleteObject call.

You must create a reference with storage and path, then await deleteObject with that reference.

🔧 Debug

expert

Why does this React Native Firebase Storage upload code never update progress?

Consider this code snippet for uploading a file. The progress state never updates. What is the cause?

React Native

const uploadFile = (file, storage) => {
  const [progress, setProgress] = useState(0);
  const storageRef = ref(storage, 'files/' + file.name);
  const uploadTask = uploadBytesResumable(storageRef, file);

  uploadTask.on('state_changed', snapshot => {
    const percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    setProgress(percent);
  });

  return progress;
};

A The useState hook is inside the function, so progress resets on every call and never updates UI.

B The setProgress call is missing parentheses.

C The event name 'state_changed' is incorrect; it should be 'progress'.

D The uploadBytesResumable function does not support progress updates.

💡 Hint

Think about React hooks and component state lifecycle.

useState inside a function that is called repeatedly resets state each time, so progress never updates visually.