A Rozenite plugin that provides customizable grid and image overlays for React Native applications.

The Rozenite Overlay Plugin provides customizable grid overlays and image comparison tools within your React Native DevTools environment. Perfect for design implementation, layout debugging, and visual comparison during development.

This plugin was inspired by RocketSim - an enhanced iOS simulator.

Features

• Grid Overlay: Display customizable grid patterns over your app for precise layout alignment
• Image Overlay: Overlay reference images or designs for visual comparison
• Slider Comparison: Side-by-side image comparison with interactive slider control
• Real-time Configuration: Adjust grid size, color, opacity, and image settings in real-time
• Multiple Resize Modes: Support for contain, cover, stretch, and center image positioning
• Clipboard Integration: Paste images directly from clipboard for quick reference
• Production Safety: Automatically disabled in production builds

Installation

Install the Overlay plugin and its peer dependency react-native-svg:

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

Quick Start

1. Install the Plugin

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

2. Integrate with Your App

Add the RozeniteOverlay component to your React Native app:

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

function App() {
  return (
    <>
      <YourApp />
      <RozeniteOverlay />
    </>
  );
}

3. Access DevTools

Start your development server and open React Native DevTools. You'll find the "Overlay" panel in the DevTools interface.

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! 🔥