Package Exports

rn-pixel-perfect-cli
rn-pixel-perfect-cli/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rn-pixel-perfect-cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Pixel Perfect

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

Usage

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

Install the React Native component

npm i rn-pixel-perfect

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>
    );
}

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}/>

rn-pixel-perfect-cli