react-native-quick-preview

Long-press an item to peek at its content, tap outside or swipe to dismiss. A headless quick-preview library for React Native: mount one PreviewProvider, then present() any content from a hook or a static handle.

Why it exists: the long-press peek is well-served on iOS (Expo Router's Link.Preview, native context-menu libraries) but those are all iOS-only, and most preview a route or a menu rather than arbitrary content. This library covers the intersection none of them do — a long-press peek that renders any React node identically on iOS and Android, with no native module, presentable from anywhere, no router required. See Why use this for the honest comparison, including when to reach for a native library instead.

This is the development monorepo. If you just want to use the library, read the package README for installation, quick start and the full API. It's the same document you see on npm.

 

▶ Try it live in your browser (Expo Snack) — long-press a product for a quick look, tap to open it. Best on the iOS/Android tabs.

Repository layout

├── packages/
│   └── react-native-quick-preview/    # The published library
│       ├── src/
│       │   ├── index.ts               # Public exports
│       │   ├── context.tsx            # PreviewProvider + controller context
│       │   ├── QuickPreviewAPI.ts     # Static QuickPreview handle
│       │   ├── useQuickPreview.ts     # Hook
│       │   ├── types.ts               # Public types
│       │   ├── headless/              # Low-level headless component
│       │   ├── internal/              # Containers, backdrop, scroll view
│       │   └── addons/                # QuickPreviewPressable
│       └── tsup.config.ts             # CJS + ESM + d.ts build
├── apps/
│   └── expo-quick-preview-example/    # Expo example app (Expo Router)
├── .github/workflows/                 # CI + release automation
└── CHANGELOG.md                       # Release history

Development

Requires Node 20+ and npm 10 (npm workspaces).

git clone https://github.com/Hashtagsmile/react-native-quick-preview.git
cd react-native-quick-preview
npm install

npm run build        # build the library (tsup: CJS + ESM + types)
npm run type-check   # TypeScript, no emit
npm run lint         # ESLint over the library source
npm run example      # start the Expo example app

The example app consumes the library through a file: reference, so rebuild with npm run build to see library changes in the example.

The example app in apps/expo-quick-preview-example shows the patterns the library is meant for: product previews in a grid, article teasers, travel cards. Long-press to open, swipe down to close, tap to navigate. Run it with Expo Go or a simulator (npm run example:ios / npm run example:android).

CI and releases

CI (ci.yml) runs on every push and PR to main: install, type check, lint, unit tests, build, and a npm pack --dry-run to verify what would be published.

Releases are automatic. When the package version changes on main, the release workflow re-runs all checks, publishes to npm with provenance, then tags v<version> and creates a GitHub Release. If the version is already on npm it does nothing, so ordinary pushes are safe. It needs an NPM_TOKEN repository secret (npm automation token). It can also be run manually from the Actions tab, including as a dry run.

To cut a release:

1. Bump version in packages/react-native-quick-preview/package.json
2. Add a section to CHANGELOG.md
3. Push (or merge) to main — the rest happens on its own

Contributing

See CONTRIBUTING.md. Short version: fork, branch from main, make sure npm run type-check, npm run lint and npm run build pass, and open a PR.

License

MIT © Oliver Lindblad