# 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.
```bash
npm i -g rn-pixel-perfect-cli
rn-pixel-perfect
```
2. Install the React Native component
```bash
npm i rn-pixel-perfect
```
3. Add the Overlay component to your app's layout file, typically near the end of your component tree.
```tsx
// app/_layout.tsx
import {Overlay} from "rn-pixel-perfect";
function RootLayout() {
return (
// Your screen's here
{__DEV__ && } // <--- put at the end
);
}
```
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:
```bash
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:
```tsx
import {Overlay} from "rn-pixel-perfect";
// in root render
```
