#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 install -D @rozenite/overlay-plugin react-native-svg

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

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

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

deno add -D npm:@rozenite/overlay-plugin npm:react-native-svg

Add the overlay component at the root of your app:

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.

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