expo-dev-screenshot

A floating screenshot button for Expo / React Native dev builds. Captures the screen and copies the image straight to your clipboard.

Installation

npm install expo-dev-screenshot
# peer dependencies
npm install react-native-view-shot expo-constants

Quick Start

1. Add the button (only in dev)

import { ScreenshotButton } from 'expo-dev-screenshot';

export default function RootLayout() {
  return (
    <>
      <Slot />
      {__DEV__ && <ScreenshotButton />}
    </>
  );
}

2. Start the server

npx expo-dev-screenshot
# or with options
npx expo-dev-screenshot --port 4000 --output-dir ./my-screenshots

3. Capture

Tap the floating 📷 button → the screenshot is saved and copied to your clipboard.

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | serverPort | number | 3456 | Port the screenshot server listens on | | color | string | #047857 | Primary button color | | successColor | string | #22C55E | Color shown on success | | errorColor | string | #EF4444 | Color shown on error | | badgeColor | string | #F59E0B | Badge background color | | size | number | 56 | Button diameter (px) | | showBadge | boolean | true | Show the label badge | | badgeLabel | string | DEV | Badge text |

CLI Options

npx expo-dev-screenshot [options]

  --port, -p        Port to listen on (default: 3456)
  --output-dir, -o  Directory to save screenshots (default: ./screenshots)
  --help, -h        Show help

Platform Support

Clipboard copy works on Windows, macOS, and Linux (requires xclip or xsel).

License

MIT