Saltar al contenido

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

¿Tienes una app en mente?

Cuéntame qué estás construyendo. Respondo a cada consulta seria en un plazo de dos días laborables.