@alaneu/react-native-vto

React Native old architecture (Paper) wrapper for the glasses virtual try-on library. Same native rendering code as @alaneu/react-native-nitro-vto, no react-native-nitro-modules dependency — install this if your app runs with newArchEnabled=false.

The two packages are mutually exclusive. Pick the one that matches your RN architecture; they can't coexist in the same app.

Install

npm install @alaneu/react-native-vto
cd ios && pod install

Usage

import { VtoView, type VtoRef } from "@alaneu/react-native-vto";
import { useRef } from "react";

function App() {
  const vtoRef = useRef<VtoRef>(null);

  return (
    <VtoView
      ref={vtoRef}
      style={{ flex: 1 }}
      modelUrl="https://example.com/glasses.glb"
      isActive={true}
      faceMeshOcclusion={true}
      backPlaneOcclusion={true}
      forwardOffset={0.005}
      onModelLoaded={(url) => console.log("loaded", url)}
      onFaceTracked={() => console.log("face tracked")}
      onGlassesDisplayed={(url) => console.log("displayed", url)}
    />
  );
}

To switch glasses, update the modelUrl prop — setting it to a new URL swaps the model.

Methods via ref:

vtoRef.current?.hideGlasses();
vtoRef.current?.showGlasses();

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | modelUrl | string | — | URL to the GLB model (meters, real-world size) | | isActive | boolean | — | Whether the AR session is running | | faceMeshOcclusion | boolean | true | Glasses appear behind face edges | | backPlaneOcclusion | boolean | true | Clips glasses temples extending behind head | | forwardOffset | number | 0.005 | Forward offset (meters) for fine-tuning glasses position | | debug | boolean | false | Debug visualization (red=face mesh, green/blue=planes) | | onModelLoaded | (url: string) => void | — | Fires once per model load | | onFaceTracked | () => void | — | Fires on first face-tracked frame per session | | onGlassesDisplayed | (url: string) => void | — | Fires once glasses are rendered on the tracked face |

Methods

| Method | Description | | --- | --- | | hideGlasses() | Hide the glasses + face occlusion meshes. Sticky across frames. AR session and face tracking state are untouched. | | showGlasses() | Show them again after hideGlasses(). No-op if they weren't hidden. |

Differences from @alaneu/react-native-nitro-vto

• No react-native-nitro-modules dep — callbacks are plain JS functions (no callback() wrapper).
• Methods are exposed via ref / useImperativeHandle, not Nitro's hybridRef.
• Rendering / face tracking / materials are identical — both packages consume the same private @alaneu/vto-core-native core, bundled at install time.