File system access in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the file system module in React Native.

React Native

import [1] from 'react-native-fs';

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

AFileSys

BRNFS

Cfs

DFileSystem

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fs' which is a Node.js module, not React Native.

Using 'FileSystem' which is from Expo, not react-native-fs.

The common alias for the react-native-fs module is RNFS, which provides file system access.

2fill in blank

medium

Complete the code to read a file's content as a string.

React Native

RNFS.readFile([1], 'utf8').then(contents => {
  console.log(contents);
});

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

AfilePath

BfileUri

CfileName

DfileData

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the file name without path, which causes file not found error.

Using 'fileUri' which is not the expected parameter here.

The readFile function requires the file path as the first argument to read its contents.

3fill in blank

hard

Fix the error in the code to write text to a file.

React Native

RNFS.[1](filePath, 'Hello World').then(() => {
  console.log('File written');
});

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

Awrite

BwriteText

CwriteFile

DsaveFile

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'write' which does not exist in react-native-fs.

Using 'writeText' or 'saveFile' which are invalid method names.

The correct method to write text to a file in react-native-fs is writeFile.

4fill in blank

hard

Fill both blanks to check if a file exists and then delete it.

React Native

RNFS.[1](filePath).then(exists => {
  if (exists) {
    RNFS.[2](filePath).then(() => console.log('Deleted'));
  }
});

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

Aexists

BfileExists

Cunlink

DdeleteFile

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fileExists' which is not a method in react-native-fs.

Using 'deleteFile' which is not the correct method name.

The method to check if a file exists is 'exists', and to delete a file is 'unlink' in react-native-fs.

5fill in blank

hard

Fill all three blanks to create a directory, write a file inside it, and then read the file.

React Native

RNFS.[1](dirPath).then(() => {
  return RNFS.[2](filePath, 'Sample Text');
}).then(() => {
  return RNFS.[3](filePath, 'utf8');
}).then(contents => {
  console.log(contents);
});

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

Amkdir

BwriteFile

CreadFile

DcreateDir

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'createDir' which is not a method in react-native-fs.

Mixing up 'writeFile' and 'readFile' methods.

To create a directory use 'mkdir', to write a file use 'writeFile', and to read a file use 'readFile' in react-native-fs.