For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /docs/official-plugins/file-system.md.

    File System Plugin

    The File System plugin adds a file explorer to React Native DevTools, so you can browse your app's directories and preview files without leaving the DevTools window.

    Installation

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

    npm
    yarn
    pnpm
    bun
    deno
    npm install -D @rozenite/file-system-plugin

    Install whichever filesystem library your app already uses:

    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 {
  createExpoFileSystemAdapter,
  useFileSystemDevTools,
} from '@rozenite/file-system-plugin';

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

  return <YourApp />;
}

    With RNFS

    App.tsx
    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 DevTools as "File System". You can jump between roots (document, cache, bundle, and others depending on your library), navigate folders, and preview text and image files inline. Files that can't be decoded as text fall back to a hex-style preview.

    File transfer

    Importing and exporting files is off by default. Turn it on with fileTransfer when you want the panel to move files in or out of your app:

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

    Imports keep the original filename and ask before overwriting an existing file.

    If you also want coding agents to import or export files through Rozenite for Agents, opt in separately:

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

    Notes

    Provider required

    The plugin doesn't auto-detect a filesystem library — you always need to pass an adapter.

    Preview limits

    Previews are size-limited to keep DevTools responsive. Very large files may not preview, and very large directories are truncated in the listing.

    • createExpoFileSystemAdapter works with both the modern expo-file-system API and expo-file-system/legacy.
    • createRNFSAdapter supports both react-native-fs and @dr.pogodin/react-native-fs.
    • File transfer handles one file at a time, within visible filesystem roots.

    Agent Tools (LLM Integration)

    When active, this plugin registers agent tools under the @rozenite/file-system-plugin domain: list-roots, list-entries, read-entry, read-text-file, read-image-file, plus export-file / import-file when the matching fileTransfer.agent option is enabled.

    Next: Learn about Plugin Development, or explore other Official Plugins.

    Need React or React Native expertise you can count on?

    Let's talk