Cloud Storage in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Cloud Storage in mobile app development?

Cloud Storage is a service that lets apps save and retrieve files like images, videos, or documents on the internet instead of the device. It helps keep data safe and accessible from anywhere.

beginner

Name a popular cloud storage service used in React Native apps.

Firebase Storage is a popular choice. It integrates easily with React Native and lets you upload and download files securely.

beginner

Why should you use cloud storage instead of device storage for user files?

Cloud storage keeps files safe if the device is lost or damaged, allows sharing across devices, and frees up device space.

intermediate

What is a common step before uploading a file to cloud storage in React Native?

You usually get the file's local path or URI, then use the cloud storage SDK to upload it with proper permissions.

intermediate

How do you ensure security when using cloud storage in mobile apps?

Use authentication to control who can upload or download files, and set rules in the cloud storage service to protect data.

What is the main advantage of using cloud storage in mobile apps?

A Files are deleted automatically after upload

B Files are only saved on the device

C Files cannot be shared between devices

D Files are saved on the internet and accessible anywhere

Cloud storage saves files online, so users can access them from any device connected to the internet.

Which service is commonly used for cloud storage in React Native apps?

A Firebase Storage

B Local device storage

C SQLite database

D React Native AsyncStorage

Firebase Storage is designed for storing files in the cloud and works well with React Native.

Before uploading a file to cloud storage, you need to:

A Convert the file to text

B Get the file's local URI or path

C Delete the file from the device

D Restart the app

You must know where the file is locally to upload it to the cloud.

How can you protect files stored in cloud storage?

A Share files publicly by default

B Store files without any restrictions

C Use authentication and storage rules

D Disable internet access

Authentication and rules help control who can access or modify files.

What happens if you store files only on the device?

A Files may be lost if the device is damaged

B Files are automatically backed up online

C Files can be accessed from any device

D Files are encrypted by default

Device-only storage risks losing files if the device breaks or is lost.

Explain how cloud storage benefits mobile apps compared to local device storage.

Think about what happens if your phone is lost or you want to use another device.

Describe the steps to upload a photo from a React Native app to cloud storage securely.

Consider what you need before uploading and how to keep files safe.

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