Cloud Storage in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Firebase storage module in React Native.

React Native

import storage from '@react-native-firebase/[1]';

Drag options to blanks, or click blank then click option'

Afirestore

Bauth

Cstorage

Ddatabase

Attempts:

3 left

💡 Hint

Common Mistakes

Using firestore or auth instead of storage.

Forgetting the '@react-native-firebase/' prefix.

The Firebase storage module is imported using '@react-native-firebase/storage'.

2fill in blank

medium

Complete the code to get a reference to a file named 'image.jpg' in Firebase Storage.

React Native

const reference = storage().ref('[1]');

Drag options to blanks, or click blank then click option'

Aimages\image.jpg

Bimages/image.jpg

C/image.jpg

Dimage.jpg

Attempts:

3 left

💡 Hint

Common Mistakes

Using backslashes instead of forward slashes.

Adding a leading slash which is not needed.

The ref() method takes the file path as a string. 'image.jpg' is the correct relative path.

3fill in blank

hard

Fix the error in the code to upload a file to Firebase Storage using React Native.

React Native

await reference.[1](filePath);

Drag options to blanks, or click blank then click option'

AputFile

BuploadFile

Cupload

Dput

Attempts:

3 left

💡 Hint

Common Mistakes

Using upload or uploadFile which do not exist.

Using put which is for web SDK, not React Native.

The correct method to upload a local file in React Native Firebase Storage is putFile().

4fill in blank

hard

Fill both blanks to download the URL of a stored file and log it.

React Native

const url = await reference.[1]();
console.[2](url);

Drag options to blanks, or click blank then click option'

AgetDownloadURL

Blog

Cwarn

DgetUrl

Attempts:

3 left

💡 Hint

Common Mistakes

Using getUrl which is not a valid method.

Using console.warn instead of console.log.

getDownloadURL() fetches the file URL, and console.log() prints it to the console.

5fill in blank

hard

Fill all three blanks to delete a file from Firebase Storage and handle errors.

React Native

try {
  await reference.[1]();
  console.[2]('File deleted');
} catch (error) {
  console.[3]('Delete failed', error);
}

Drag options to blanks, or click blank then click option'

Adelete

Blog

Cerror

Dwarn

Attempts:

3 left

💡 Hint

Common Mistakes

Using remove() instead of delete().

Using console.warn for errors instead of console.error.

The delete() method removes the file. console.log() shows success, and console.error() shows errors.