Overlay Plugin

The Overlay plugin draws grids and reference images over your running app, so you can check spacing, alignment, and how closely your UI matches a design. It was inspired by RocketSim.

Installation

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

npm

npm install -D @rozenite/overlay-plugin react-native-svg

yarn

yarn add -D @rozenite/overlay-plugin react-native-svg

pnpm

pnpm add -D @rozenite/overlay-plugin react-native-svg

bun

bun add -D @rozenite/overlay-plugin react-native-svg

Add the overlay component at the root of your app:

App.tsx

import { RozeniteOverlay } from '@rozenite/overlay-plugin';

function App() {
  return (
    <>
      <YourApp />
      {/* Add the overlay component at the root level */}
      <RozeniteOverlay />
    </>
  );
}

Web (React Native for Web)

With Rozenite for Web, this plugin is also available when debugging your React Native web app.

Usage

Once configured, “Overlay” appears in your React Native DevTools sidebar with two controls:

Grid

Toggle a grid over your app to check spacing and alignment. Adjust cell size (4–100px), line color, and opacity. Off by default; when enabled, starts at an 8px red grid at 70% opacity.

Image overlay

Overlay a reference image over your app to compare it against a design — either as a plain overlay or as a slider you drag to reveal each side. Adjust the image URL, resize mode (cover, contain, stretch, center), and opacity.

Settings persist for your development session but aren’t saved between app restarts.

Positioning

Place RozeniteOverlay at the root of your app, after everything else, so overlays render on top.

Development only

The overlay never renders in production builds.

Next: Explore other Official Plugins, or learn to build your own in the Plugin Development guide.