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.

Practice

1.

What is the main purpose of Cloud Storage in a React Native app?

easy

A. To save and retrieve files online easily

B. To create user interfaces

C. To manage app navigation

D. To handle app state locally

Solution

1. Step 1: Understand Cloud Storage role

   Cloud Storage is used to save and get files online, not for UI or navigation.

2. Step 2: Match purpose with options

   Only To save and retrieve files online easily describes saving and retrieving files online.

3. Final Answer:

   To save and retrieve files online easily -> Option A

4. Quick Check:

   Cloud Storage = Save/Get files online [OK]

Hint: Cloud Storage is for files, not UI or navigation [OK]

Common Mistakes:

• Confusing Cloud Storage with UI components
• Thinking Cloud Storage manages app navigation
• Assuming Cloud Storage handles local state

2.

Which of the following is the correct way to create a reference to a file named image.jpg in Cloud Storage?

const storage = getStorage();
const ref = ?

easy

A. getRef('image.jpg')

B. storage.ref('image.jpg')

C. ref(storage, 'image.jpg')

D. storage.getReference('image.jpg')

Solution

1. Step 1: Recall correct syntax for reference

   In React Native Firebase, use ref(storage, 'filename') to create a reference.

2. Step 2: Check options for correct function

   Only ref(storage, 'image.jpg') uses ref(storage, 'image.jpg') correctly.

3. Final Answer:

   ref(storage, 'image.jpg') -> Option C

4. Quick Check:

   Reference creation = ref(storage, 'filename') [OK]

Hint: Use ref(storage, 'filename') to create file reference [OK]

Common Mistakes:

• Using storage.ref() which is not valid in React Native
• Calling getRef() which does not exist
• Using storage.getReference() which is incorrect

3.

What will the following code do?

const storage = getStorage();
const fileRef = ref(storage, 'docs/report.pdf');
await uploadBytes(fileRef, fileData);
const url = await getDownloadURL(fileRef);
console.log(url);

medium

A. Upload the file and print its download URL

B. Only upload the file without printing URL

C. Print the URL without uploading the file

D. Cause a syntax error due to missing await

Solution

1. Step 1: Analyze uploadBytes usage

   The code uploads fileData to 'docs/report.pdf' using uploadBytes with await.

2. Step 2: Analyze getDownloadURL usage

   After upload, it gets the file's URL and prints it with console.log.

3. Final Answer:

   Upload the file and print its download URL -> Option A

4. Quick Check:

   Upload + get URL = print URL [OK]

Hint: uploadBytes then getDownloadURL prints URL [OK]

Common Mistakes:

• Thinking getDownloadURL works before upload
• Missing await causing runtime errors
• Assuming uploadBytes does not upload file

4.

Identify the error in this code snippet for uploading a file:

const storage = getStorage();
const fileRef = ref(storage, 'photos/pic.png');
uploadFile(fileRef, fileData);
const url = await getDownloadURL(fileRef);
console.log(url);

medium

A. ref function is used incorrectly

B. Missing await before uploadFile

C. getDownloadURL cannot be awaited

D. uploadFile is not a valid function

Solution

1. Step 1: Check function names for uploading

   The correct function to upload is uploadBytes, not uploadFile.

2. Step 2: Verify other code parts

   getDownloadURL can be awaited and ref usage is correct.

3. Final Answer:

   uploadFile is not a valid function -> Option D

4. Quick Check:

   uploadBytes is correct upload function [OK]

Hint: Use uploadBytes, not uploadFile [OK]

Common Mistakes:

• Using uploadFile instead of uploadBytes
• Forgetting to await uploadBytes
• Misusing getDownloadURL without await

5.

You want to upload a profile picture and then immediately show it in your app. Which sequence of steps is correct?

1. Get a reference to the file location
2. Upload the file using uploadBytes
3. Get the download URL using getDownloadURL
4. Display the image using the URL

hard

A. 1 -> 3 -> 2 -> 4

B. 1 -> 2 -> 3 -> 4

C. 2 -> 1 -> 3 -> 4

D. 3 -> 1 -> 2 -> 4

Solution

1. Step 1: Create file reference first

   You must first get a reference to where the file will be stored.

2. Step 2: Upload file using uploadBytes

   Upload the file to that reference location.

3. Step 3: Get download URL after upload

   Only after upload can you get the file's URL.

4. Step 4: Display image using URL

   Use the URL to show the image in your app.

5. Final Answer:

   1 -> 2 -> 3 -> 4 -> Option B

6. Quick Check:

   Reference -> Upload -> URL -> Display [OK]

Hint: Reference, upload, get URL, then display [OK]

Common Mistakes:

• Trying to get URL before uploading
• Uploading before creating reference
• Displaying image without URL