#File System Plugin

The File System plugin provides an in-app file explorer for React Native DevTools, so you can inspect app directories and preview text or image files directly from the DevTools UI.

#What is File System Plugin?

The File System plugin helps you browse the files your app can access at runtime. It provides:

• Directory Browsing: Inspect document, cache, temporary, library, and bundle directories
• Provider Support: Works with Expo FileSystem and RNFS-compatible libraries
• Text Preview: Open text files directly in DevTools
• Image Preview: Preview image files inline
• Binary Fallback Preview: Show a hex-style dump when a file cannot be decoded as text
• File Transfer: Import and export single files through explicit opt-in workflows
• Path Navigation: Jump between roots, navigate nested folders, and move back through history

#Installation

Make sure to go through the Getting Started guide before installing the plugin.

Install the File System plugin:

npm install -D @rozenite/file-system-plugin

yarn add -D @rozenite/file-system-plugin

pnpm add -D @rozenite/file-system-plugin

bun add -D @rozenite/file-system-plugin

deno add -D npm:@rozenite/file-system-plugin

Install one supported filesystem provider in your app:

npm install -D expo-file-system

yarn add -D expo-file-system

pnpm add -D expo-file-system

bun add -D expo-file-system

deno add -D npm:expo-file-system

npm install -D @dr.pogodin/react-native-fs

yarn add -D @dr.pogodin/react-native-fs

pnpm add -D @dr.pogodin/react-native-fs

bun add -D @dr.pogodin/react-native-fs

deno add -D npm:@dr.pogodin/react-native-fs

#Usage

#With Expo FileSystem

import * as FileSystem from 'expo-file-system';
import {
  createExpoFileSystemAdapter,
  useFileSystemDevTools,
} from '@rozenite/file-system-plugin';

function App() {
  useFileSystemDevTools({
    adapter: createExpoFileSystemAdapter(FileSystem),
  });

  return <YourApp />;
}

#With RNFS

import RNFS from '@dr.pogodin/react-native-fs';
import {
  createRNFSAdapter,
  useFileSystemDevTools,
} from '@rozenite/file-system-plugin';

function App() {
  useFileSystemDevTools({
    adapter: createRNFSAdapter(RNFS),
  });

  return <YourApp />;
}

Once configured, the plugin appears in React Native DevTools as "File System".

#File Transfer

File import and export are disabled by default. Enable them explicitly with the fileTransfer option when you want the DevTools panel to move raw files in or out of app-accessible directories.

useFileSystemDevTools({
  adapter: createRNFSAdapter(RNFS),
  fileTransfer: {
    import: true,
    export: true,
  },
});

When enabled, the File System panel lets you import a single file into the currently viewed directory and export a selected file. Imports keep the original filename and ask before overwriting an existing file.

Agent-triggered file transfer is controlled separately. Enable it only when agents should be allowed to import or export exact file contents through Rozenite for Agents.

useFileSystemDevTools({
  adapter: createRNFSAdapter(RNFS),
  fileTransfer: {
    import: true,
    export: true,
    agent: {
      import: true,
      export: true,
    },
  },
});

#Available Roots

#Expo FileSystem

When available, the plugin exposes these roots:

• documentDirectory
• cacheDirectory
• bundleDirectory

#RNFS

When available, the plugin exposes these roots:

• DocumentDirectoryPath
• CachesDirectoryPath
• TemporaryDirectoryPath
• LibraryDirectoryPath
• MainBundlePath

#Notes

• createExpoFileSystemAdapter supports both the modern expo-file-system API and expo-file-system/legacy.
• createRNFSAdapter wraps react-native-fs and @dr.pogodin/react-native-fs.
• Text previews fall back to a binary hex-style dump when UTF-8 decoding fails.
• Expo and RNFS expose slightly different root directories depending on platform and runtime environment.
• File transfer supports single files only and is restricted to visible filesystem roots.

#Agent Tools (LLM Integration)

When this plugin is active, it registers agent tools under the @rozenite/file-system-plugin domain.

Available tools:

• list-roots
• list-entries
• read-entry
• read-text-file
• read-image-file
• export-file when fileTransfer.agent.export is enabled
• import-file when fileTransfer.agent.import is enabled

This makes the plugin usable from Rozenite for Agents workflows in Codex, Cursor, and other coding agents that speak to the rozenite agent CLI.

#Contributing

The File System plugin is open source and welcomes contributions. Check out the Plugin Development Guide to learn how to contribute or create your own plugins.

#Support

If you encounter issues with the File System plugin:

1. Check Documentation: Review this guide for common solutions
2. Verify Setup: Ensure your chosen filesystem library is installed and passed into the hook
3. Search Issues: Look for similar issues in the repository
4. Create Issue: Report bugs or request features
5. Community: Reach out to the Rozenite community for help

Next: Learn about Plugin Development to create your own plugins, or explore other Official Plugins.