npm package Open source
@tryonit/react-native: Virtual Try-On for React Native & Expo
Virtual try-on for React Native and Expo that works in Expo Go, development builds and bare apps, using the same product manifests as the web packages.
Overview
@tryonit/react-native brings TryOnIt to mobile apps: lipstick, beauty filters, face stickers, glasses, hats, earrings, watches, rings and hair colour on the phone camera. It works in Expo Go without a custom native build, as well as in Expo development builds and bare React Native apps, and it reads exactly the same product manifests as the web packages.
To ship it without giving up behaviour parity, I run the web engine inside react-native-webview. A build script embeds the core, the engine and a message bridge in the package. The page runs on a secure local origin so the camera is allowed, and MediaPipe and three.js load lazily from a CDN through an import map. The app controls the camera view through a typed bridge of props, a ref API and events, and products are validated with @tryonit/core on the React Native side before they reach the WebView.
It ships TryOnButton, TryOnView, TryOnModal and a useTryOn hook for custom interfaces, returns captured photos as data URLs ready for <Image> or sharing, pauses tracking while the app is in the background, and includes an Expo config plugin for camera permissions. A fully native engine built on VisionCamera, native MediaPipe, Skia and Filament is planned behind the same API, so apps will be able to upgrade without code changes.
Key features
- Works in Expo Go, Expo development builds and bare React Native
- Same JSON product manifests as the web and React packages
- TryOnButton, TryOnView, TryOnModal and a headless useTryOn hook
- Typed message bridge between the app and the camera WebView
- Expo config plugin that adds the camera permissions
- Self-hostable MediaPipe, models and three.js for zero third-party requests
Articles about this project
-
7 min read
How to Create Virtual Try-On Products with JSON Manifests
A practical guide to TryOnIt asset manifests: lipstick shades, makeup looks, face stickers, variants, CORS hosting, CMS or Shopify loading and CI validation.
-
8 min read
Inside TryOnIt: The Architecture of a Client-Side Virtual Try-On SDK
How I structured an open-source virtual try-on SDK as layered TypeScript packages: a DOM-free core, a per-frame fast path, a state machine and renderers.
-
4 min read
Privacy by Design for Camera Features: On-Device Virtual Try-On
How TryOnIt keeps camera frames on the device, which network requests it makes, how to self-host for zero third-party requests, and the CSP it needs.
-
5 min read
Shipping AR Try-On to React Native and Expo Go with a WebView Engine
Why @tryonit/react-native runs the web engine in react-native-webview, how the bridge works, and the native VisionCamera, Skia and Filament engine planned next.