rozenite-assets-viewer

A Rozenite plugin that lets you browse image, animation, and video files from your project directly in React Native DevTools.

Features

• Scan one or more asset folders from your workspace
• Preview common image, video, Lottie (.json, .lottie), and Rive (.riv) files
• Refresh assets on demand from your app runtime
• Keep access scoped to files scanned by the plugin

Installation

npm install rozenite-assets-viewer

Quick Start

1. Add the Metro enhancer

Use the package Metro helper so the DevTools panel can scan and serve your assets.

// metro.config.js
const { withRozeniteAssetsViewer } = require('rozenite-assets-viewer/metro');

module.exports = withRozeniteAssetsViewer({
  // your Metro config
});

If you already compose multiple Metro enhancers, include withRozeniteAssetsViewer in that chain.

Example with multiple enhancers:

// metro.config.js
const { composeMetroConfigTransformers } = require('@rozenite/tools');
const { withRozeniteAssetsViewer } = require('rozenite-assets-viewer/metro');
const { withSomeOtherEnhancer } = require('some-other-package/metro');

module.exports = composeMetroConfigTransformers(
  withRozeniteAssetsViewer,
  withSomeOtherEnhancer,
)(/* your metro config */);

2. Register folders in your app

Call useAssetsViewer in development with the folders you want to inspect.

import { useAssetsViewer } from 'rozenite-assets-viewer';

function App() {
  useAssetsViewer({
    folderPaths: ['src/assets'],
  });

  return null;
}

If your asset folders live in different roots, pass absolute paths in folderPaths.

import { useAssetsViewer } from 'rozenite-assets-viewer';

function App() {
  useAssetsViewer({
    folderPaths: [
      '/Users/you/monorepo/apps/mobile/src/assets',
      '/Users/you/monorepo/packages/shared-assets/icons',
    ],
  });

  return null;
}

Team setup with env-based workspace root:

import { useAssetsViewer } from 'rozenite-assets-viewer';

const workspaceRoot = process.env.WORKSPACE_ROOT;

function App() {
  if (!workspaceRoot) {
    return null;
  }

  useAssetsViewer({
    folderPaths: [
      `${workspaceRoot}/apps/mobile/src/assets`,
      `${workspaceRoot}/packages/shared-assets/icons`,
    ],
  });

  return null;
}

Example .env:

WORKSPACE_ROOT=/Users/you/monorepo

3. Open the Assets panel

Start Metro, open React Native DevTools, and go to the Assets panel.

API

useAssetsViewer(options)

type UseAssetsViewerOptions = {
  folderPaths: string[];
};

• folderPaths: list of folders to scan (required)

Support

If this package helps your workflow, please star the repo: https://github.com/CodeByRahulSaini/rozenite-assets-viewer.git

License

MIT