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
    • 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
    yarn
    pnpm
    bun
    deno
    npm install -D @rozenite/file-system-plugin

    Install one supported filesystem provider in your app:

    npm
    yarn
    pnpm
    bun
    deno
    npm install -D expo-file-system
    npm
    yarn
    pnpm
    bun
    deno
    npm install -D @dr.pogodin/react-native-fs

    Usage

    With Expo FileSystem

    App.tsx
    import * as FileSystem from 'expo-file-system';
import { useFileSystemDevTools } from '@rozenite/file-system-plugin';

function App() {
  useFileSystemDevTools({
    expoFileSystem: FileSystem,
  });

  return <YourApp />;
}

    With RNFS

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

function App() {
  useFileSystemDevTools({
    rnfs: RNFS,
  });

  return <YourApp />;
}

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

    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

    Provider Required

    The plugin does not auto-detect a filesystem library. You must pass either { expoFileSystem: FileSystem } or { rnfs: RNFS } to useFileSystemDevTools().

    Preview Limits

    File previews are size-limited to keep DevTools responsive. Very large files may fail to preview, and very large Expo directories are truncated in the listing UI.

    • 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.

    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

    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.

    Need React or React Native expertise you can count on?

    Let's talk