React Native Pixel Perfect

A simple tool for pixel-perfect layouts, allowing you to compare design screens with your app's implementation.

Usage

1. Install and start the CLI tool, this tool helps in distributing and controlling design screens.

npm i -g rn-pixel-perfect-cli
rn-pixel-perfect

2. Install the React Native component

npm i rn-pixel-perfect

3. Add the Overlay component to your app's layout file, typically near the end of your component tree.

// app/_layout.tsx
import {Overlay} from "rn-pixel-perfect";

function RootLayout() {
    return (
        <ThemeProvider value={DefaultTheme}>
            <Stack>
                // Your screen's here
            </Stack>
            {__DEV__ && <Overlay/>} // <--- put at the end
        </ThemeProvider>
    );
}

4. Now you can control and adjust your design screens from the terminal.

CLI Usage (rn-pixel-perfect-cli)

The CLI tool serves images from a folder, allowing you to navigate between screens and adjust their position and opacity.

Cli parameters

Name	Description	Default
folder	Folder to serve images from	ui
port	Port to listen on	3210

Example Command:

rn-pixel-perfect --folder images --port 1234

Keyboard shortcuts

Shortcut	Description
↑	Scroll up
↓	Scroll down
←	Prev screen
→	Next screen
↑+Shift	Fast scroll up
↓+Shift	Fast scroll down
←+Shift	Decrease opacity
→+Shift	Increase opacity
h	Hide Ui

Overlay React Native Component

The Overlay component displays design overlays on your app's screens and connects with the CLI for live control. No parameters are needed by default. Uses expo-constants.

Props

Name	Description	Default
host	Host to rn-pixel-perfect-cli	Expo Host URI
port	Port to rn-pixel-perfect-cli	3210

Example:

import {Overlay} from "rn-pixel-perfect";

// in root render
<Overlay host='PC-IP-IN-LOCAL-NETWORK' port={1234}/>