A Rozenite plugin for browsing app files and previewing file contents in React Native DevTools.

The Rozenite File System Plugin provides an in-app file explorer for React Native DevTools. It lets you inspect common app directories, browse nested folders, and preview text and image files using either Expo FileSystem or an RNFS-compatible filesystem module.

Features

• Directory Browsing: Inspect app document, cache, temporary, library, and bundle directories from DevTools
• Provider Support: Works with both Expo FileSystem and RNFS-compatible libraries
• Text Preview: Open text files directly in DevTools for quick inspection
• Image Preview: Preview image files inline without leaving the DevTools panel
• Binary Fallback Preview: Non-text files fall back to a hex-style preview for debugging
• Large Directory Handling: Expo directory reads are capped to keep very large folders responsive

Installation

Install the file system plugin as a dependency:

npm install @rozenite/file-system-plugin

Install one supported filesystem provider in your app:

# Expo
npm install expo-file-system

# React Native
npm install @dr.pogodin/react-native-fs

Quick Start

1. Install the Plugin

npm install @rozenite/file-system-plugin

2. Integrate with Your App

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 />;
}

3. Access DevTools

Start your development server and open React Native DevTools. You’ll find the "File System" panel in the DevTools interface.

Notes

• Pass exactly one filesystem adapter to useFileSystemDevTools.
• 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.
• Expo roots are discovered from documentDirectory, cacheDirectory, and bundleDirectory when available.
• RNFS roots include document, caches, temporary, library, and bundle paths when available.
• File previews are limited to avoid loading very large files into DevTools.
• Binary files are shown as a hex-style dump when text decoding is not possible.

Agent Tools (LLM Integration)

When this plugin is active, it registers agent tools under the @rozenite/file-system-plugin domain. This lets coding agents inspect the app-accessible filesystem through Rozenite for Agents.

Available tools:

• list-roots: returns the active provider and the available root directories.
• list-entries: lists directory entries with pagination, without returning file contents.
• read-entry: returns metadata for a file or directory path.
• read-text-file: returns a text preview for a file, with binary fallback when decoding fails.
• read-image-file: returns an image preview as a data URI.

Made with ❤️ at Callstack

rozenite is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.

Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥