Paquete npm Open source
@tryonit/react-native — Prueba virtual para React Native y Expo
Prueba virtual para React Native y Expo que funciona en Expo Go, builds de desarrollo y apps bare, con los mismos manifiestos de producto que los paquetes web.
Resumen
@tryonit/react-native lleva TryOnIt a las apps móviles: pintalabios, filtros de belleza, stickers, gafas, sombreros, pendientes, relojes, anillos y color de pelo en la cámara del teléfono. Funciona en Expo Go sin build nativa personalizada, además de en builds de desarrollo de Expo y apps React Native bare, y lee exactamente los mismos manifiestos de producto que los paquetes web.
Para publicarlo sin renunciar a la paridad de comportamiento, ejecuto el motor web dentro de react-native-webview. Un script de build integra el núcleo, el motor y un puente de mensajes en el paquete. La página se sirve desde un origen local seguro para que la cámara esté permitida, y MediaPipe y three.js se cargan bajo demanda desde un CDN mediante un import map. La app controla la vista de cámara con un puente tipado de props, una API por ref y eventos, y los productos se validan con @tryonit/core en el lado de React Native antes de llegar a la WebView.
Incluye TryOnButton, TryOnView, TryOnModal y un hook useTryOn para interfaces a medida, devuelve las fotos capturadas como data URL listas para <Image> o para compartir, pausa el seguimiento cuando la app pasa a segundo plano e incluye un config plugin de Expo para los permisos de cámara. Hay previsto un motor totalmente nativo basado en VisionCamera, MediaPipe nativo, Skia y Filament detrás de la misma API, para que las apps puedan actualizarse sin cambiar código.
Funciones clave
- Funciona en Expo Go, builds de desarrollo de Expo y React Native bare
- Los mismos manifiestos JSON de producto que los paquetes web y React
- TryOnButton, TryOnView, TryOnModal y un hook headless useTryOn
- Puente de mensajes tipado entre la app y la WebView de la cámara
- Config plugin de Expo que añade los permisos de cámara
- MediaPipe, modelos y three.js autoalojables, sin peticiones a terceros
Artículos sobre este proyecto
-
7 min de lectura
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 de lectura
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 de lectura
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 de lectura
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.