Here is the improved article with proper HTML formatting and code snippets:
Mastering File System Management in React Native
Getting Started
To begin, initialize a new React Native project using react-native-cli. Then, install the react-native-fs module:
npm install react-native-fs
Basic Usage
The react-native-fs library provides a set of constants that inform you about the list of file paths configured on the user’s device. These include:
- MainBundleDirectory: The app’s data folder
- DownloadDirectoryPath: The user’s Downloads directory
- ExternalStorageDirectory: The device’s external storage
Here’s an example of how to use these constants:
import { MainBundleDirectory, DownloadDirectoryPath, ExternalStorageDirectory } from 'react-native-fs';
const downloadsFolder = DownloadDirectoryPath;
const documentsFolder = MainBundleDirectory;
const externalFolder = ExternalStorageDirectory;
console.log(downloadsFolder, documentsFolder, externalFolder);
Reading Directories
To get files and folder content, use the readDir method:
import { readDir } from 'react-native-fs';
const getFileContent = async (path) => {
const response = await readDir(path);
console.log(response);
};
getFileContent(MainBundleDirectory);
Advanced Usage
Creating Folders
To create a new folder, use the mkdir method:
import { mkdir } from 'react-native-fs';
const makeDirectory = async (folderPath) => {
await mkdir(folderPath);
};
makeDirectory(`${MainBundleDirectory}/newFolder`);
Creating Files
To write content to a file, use the writeFile method:
import { writeFile } from 'react-native-fs';
const makeFile = async (filePath, content) => {
await writeFile(filePath, content);
};
makeFile(`${MainBundleDirectory}/newFile.txt`, 'Hello, World!');
Reading Files
To read data from a file, use the readFile method:
import { readFile } from 'react-native-fs';
const readFileContent = async (filePath) => {
const response = await readFile(filePath);
console.log(response);
};
readFileContent(`${MainBundleDirectory}/newFile.txt`);
File Deletion
To remove a file or folder, use the unlink method:
import { unlink } from 'react-native-fs';
const deleteFile = async (filePath) => {
await unlink(filePath);
};
deleteFile(`${MainBundleDirectory}/newFile.txt`);