@reactvision/react-viro 2.42.0 → 2.43.1

package/dist/fabric-interop/components/ViroButton.js

@@ -0,0 +1,92 @@
+"use strict";
+/**
+ * ViroButton
+ *
+ * A component for creating interactive buttons in 3D space.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroButton = void 0;
+const react_1 = __importDefault(require("react"));
+const ViroUtils_1 = require("./ViroUtils");
+const ViroGlobal_1 = require("./ViroGlobal");
+/**
+ * ViroButton is a component for creating interactive buttons in 3D space.
+ * It provides visual feedback for different interaction states.
+ */
+const ViroButton = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        source: props.source,
+        hoverSource: props.hoverSource,
+        clickSource: props.clickSource,
+        gazeSource: props.gazeSource,
+        width: props.width,
+        height: props.height,
+        materials: props.materials,
+        lightReceivingBitMask: props.lightReceivingBitMask,
+        shadowCastingBitMask: props.shadowCastingBitMask,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("button", nativeProps);
+    // Register event handlers
+    react_1.default.useEffect(() => {
+        const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+        if (!nativeViro)
+            return;
+        const eventHandlers = [
+            { name: "onHover", handler: props.onHover },
+            { name: "onClick", handler: props.onClick },
+            { name: "onClickState", handler: props.onClickState },
+            { name: "onTouch", handler: props.onTouch },
+            { name: "onDrag", handler: props.onDrag },
+            { name: "onPinch", handler: props.onPinch },
+            { name: "onRotate", handler: props.onRotate },
+            {
+                name: "onFuse",
+                handler: typeof props.onFuse === "function"
+                    ? props.onFuse
+                    : props.onFuse?.callback,
+            },
+        ];
+        // Register all event handlers and store callback IDs for cleanup
+        const registeredCallbacks = eventHandlers
+            .filter(({ handler }) => !!handler)
+            .map(({ name, handler }) => {
+            const callbackId = `${nodeId}_${name}`;
+            // Register the callback in the global registry
+            if (typeof global !== "undefined" && global.registerViroEventCallback) {
+                global.registerViroEventCallback(callbackId, handler);
+            }
+            // Register with native code
+            nativeViro.registerEventCallback(nodeId, name, callbackId);
+            return { name, callbackId };
+        });
+        // Cleanup when unmounting
+        return () => {
+            const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+            if (!nativeViro)
+                return;
+            // Unregister all event handlers
+            registeredCallbacks.forEach(({ name, callbackId }) => {
+                nativeViro.unregisterEventCallback(nodeId, name, callbackId);
+            });
+        };
+    }, [
+        nodeId,
+        props.onHover,
+        props.onClick,
+        props.onClickState,
+        props.onTouch,
+        props.onDrag,
+        props.onPinch,
+        props.onRotate,
+        props.onFuse,
+    ]);
+    // Render children with this button as their parent
+    return (<ViroUtils_1.ViroContextProvider value={nodeId}>{props.children}</ViroUtils_1.ViroContextProvider>);
+};
+exports.ViroButton = ViroButton;

package/dist/fabric-interop/components/ViroCamera.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ViroCamera
+ *
+ * A component for controlling the scene camera.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroCameraProps extends ViroCommonProps {
+    fieldOfView?: number;
+    focalPoint?: [number, number, number];
+    children?: React.ReactNode;
+}
+/**
+ * ViroCamera is a component for controlling the scene camera.
+ * It allows customization of camera properties and behavior.
+ */
+export declare const ViroCamera: React.FC<ViroCameraProps>;

package/dist/fabric-interop/components/ViroCamera.js

@@ -0,0 +1,30 @@
+"use strict";
+/**
+ * ViroCamera
+ *
+ * A component for controlling the scene camera.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroCamera = void 0;
+const react_1 = __importDefault(require("react"));
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * ViroCamera is a component for controlling the scene camera.
+ * It allows customization of camera properties and behavior.
+ */
+const ViroCamera = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        fieldOfView: props.fieldOfView,
+        focalPoint: props.focalPoint,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("camera", nativeProps);
+    // Render children with this camera as their parent
+    return (<ViroUtils_1.ViroContextProvider value={nodeId}>{props.children}</ViroUtils_1.ViroContextProvider>);
+};
+exports.ViroCamera = ViroCamera;

package/dist/fabric-interop/components/ViroController.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ViroController
+ *
+ * A component for VR controller interaction.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroControllerProps extends ViroCommonProps {
+    controllerVisibility?: boolean;
+    reticleVisibility?: boolean;
+    onControllerUpdate?: (event: any) => void;
+    onMove?: (event: any) => void;
+    children?: React.ReactNode;
+}
+/**
+ * ViroController is a component for VR controller interaction.
+ * It provides controller tracking and interaction capabilities.
+ */
+export declare const ViroController: React.FC<ViroControllerProps>;

package/dist/fabric-interop/components/ViroController.js

@@ -0,0 +1,64 @@
+"use strict";
+/**
+ * ViroController
+ *
+ * A component for VR controller interaction.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroController = void 0;
+const react_1 = __importDefault(require("react"));
+const ViroUtils_1 = require("./ViroUtils");
+const ViroGlobal_1 = require("./ViroGlobal");
+/**
+ * ViroController is a component for VR controller interaction.
+ * It provides controller tracking and interaction capabilities.
+ */
+const ViroController = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        controllerVisibility: props.controllerVisibility,
+        reticleVisibility: props.reticleVisibility,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("controller", nativeProps);
+    // Register event handlers
+    react_1.default.useEffect(() => {
+        const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+        if (!nativeViro)
+            return;
+        const eventHandlers = [
+            { name: "onControllerUpdate", handler: props.onControllerUpdate },
+            { name: "onMove", handler: props.onMove },
+        ];
+        // Register all event handlers and store callback IDs for cleanup
+        const registeredCallbacks = eventHandlers
+            .filter(({ handler }) => !!handler)
+            .map(({ name, handler }) => {
+            const callbackId = `${nodeId}_${name}`;
+            // Register the callback in the global registry
+            if (typeof global !== "undefined" && global.registerViroEventCallback) {
+                global.registerViroEventCallback(callbackId, handler);
+            }
+            // Register with native code
+            nativeViro.registerEventCallback(nodeId, name, callbackId);
+            return { name, callbackId };
+        });
+        // Cleanup when unmounting
+        return () => {
+            const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+            if (!nativeViro)
+                return;
+            // Unregister all event handlers
+            registeredCallbacks.forEach(({ name, callbackId }) => {
+                nativeViro.unregisterEventCallback(nodeId, name, callbackId);
+            });
+        };
+    }, [nodeId, props.onControllerUpdate, props.onMove]);
+    // Render children with this controller as their parent
+    return (<ViroUtils_1.ViroContextProvider value={nodeId}>{props.children}</ViroUtils_1.ViroContextProvider>);
+};
+exports.ViroController = ViroController;

package/dist/fabric-interop/components/ViroDirectionalLight.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ViroDirectionalLight
+ *
+ * A component for adding directional lighting to a scene.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroDirectionalLightProps extends ViroCommonProps {
+    color?: string;
+    intensity?: number;
+    temperature?: number;
+    direction?: [number, number, number];
+    influenceBitMask?: number;
+    castsShadow?: boolean;
+    shadowOpacity?: number;
+    shadowOrthographicSize?: number;
+    shadowOrthographicPosition?: [number, number, number];
+    shadowMapSize?: number;
+    shadowBias?: number;
+    shadowNearZ?: number;
+    shadowFarZ?: number;
+}
+/**
+ * ViroDirectionalLight is a component for adding directional lighting to a scene.
+ * Directional light is a type of light that illuminates all objects in the scene
+ * from a specific direction, similar to sunlight.
+ */
+export declare const ViroDirectionalLight: React.FC<ViroDirectionalLightProps>;

package/dist/fabric-interop/components/ViroDirectionalLight.js

@@ -0,0 +1,55 @@
+"use strict";
+/**
+ * ViroDirectionalLight
+ *
+ * A component for adding directional lighting to a scene.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroDirectionalLight = void 0;
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * ViroDirectionalLight is a component for adding directional lighting to a scene.
+ * Directional light is a type of light that illuminates all objects in the scene
+ * from a specific direction, similar to sunlight.
+ */
+const ViroDirectionalLight = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        color: props.color,
+        intensity: props.intensity,
+        temperature: props.temperature,
+        direction: props.direction,
+        influenceBitMask: props.influenceBitMask,
+        castsShadow: props.castsShadow,
+        shadowOpacity: props.shadowOpacity,
+        shadowOrthographicSize: props.shadowOrthographicSize,
+        shadowOrthographicPosition: props.shadowOrthographicPosition,
+        shadowMapSize: props.shadowMapSize,
+        shadowBias: props.shadowBias,
+        shadowNearZ: props.shadowNearZ,
+        shadowFarZ: props.shadowFarZ,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("directionalLight", nativeProps);
+    // Register event handlers using our new event system
+    (0, ViroUtils_1.useViroEventListeners)(nodeId, {
+        onHover: props.onHover,
+        onClick: props.onClick,
+        onClickState: props.onClickState,
+        onTouch: props.onTouch,
+        onScroll: props.onScroll,
+        onSwipe: props.onSwipe,
+        onDrag: props.onDrag,
+        onPinch: props.onPinch,
+        onRotate: props.onRotate,
+        onFuse: typeof props.onFuse === "function"
+            ? props.onFuse
+            : props.onFuse?.callback,
+        onCollision: props.onCollision,
+        onTransformUpdate: props.onTransformUpdate,
+    });
+    // Component doesn't have children, so just return null
+    return null;
+};
+exports.ViroDirectionalLight = ViroDirectionalLight;

package/dist/fabric-interop/components/ViroFlexView.d.ts

@@ -0,0 +1,36 @@
+/**
+ * ViroFlexView
+ *
+ * A component for creating flexible layouts in 3D space.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroFlexViewProps extends ViroCommonProps {
+    width?: number;
+    height?: number;
+    flex?: number;
+    flexDirection?: "row" | "column";
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around";
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch";
+    padding?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    margin?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    backgroundColor?: string;
+    borderRadius?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    materials?: string | string[];
+    children?: React.ReactNode;
+}
+/**
+ * ViroFlexView is a component for creating flexible layouts in 3D space.
+ * It allows you to arrange child components using flexbox-like layout rules.
+ */
+export declare const ViroFlexView: React.FC<ViroFlexViewProps>;

package/dist/fabric-interop/components/ViroFlexView.js

@@ -0,0 +1,97 @@
+"use strict";
+/**
+ * ViroFlexView
+ *
+ * A component for creating flexible layouts in 3D space.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroFlexView = void 0;
+const react_1 = __importDefault(require("react"));
+const ViroUtils_1 = require("./ViroUtils");
+const ViroGlobal_1 = require("./ViroGlobal");
+/**
+ * ViroFlexView is a component for creating flexible layouts in 3D space.
+ * It allows you to arrange child components using flexbox-like layout rules.
+ */
+const ViroFlexView = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        width: props.width,
+        height: props.height,
+        flex: props.flex,
+        flexDirection: props.flexDirection,
+        justifyContent: props.justifyContent,
+        alignItems: props.alignItems,
+        padding: props.padding,
+        paddingTop: props.paddingTop,
+        paddingBottom: props.paddingBottom,
+        paddingLeft: props.paddingLeft,
+        paddingRight: props.paddingRight,
+        margin: props.margin,
+        marginTop: props.marginTop,
+        marginBottom: props.marginBottom,
+        marginLeft: props.marginLeft,
+        marginRight: props.marginRight,
+        backgroundColor: props.backgroundColor,
+        borderRadius: props.borderRadius,
+        borderWidth: props.borderWidth,
+        borderColor: props.borderColor,
+        materials: props.materials,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("flexView", nativeProps);
+    // Register event handlers
+    react_1.default.useEffect(() => {
+        const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+        if (!nativeViro)
+            return;
+        const eventHandlers = [
+            { name: "onHover", handler: props.onHover },
+            { name: "onClick", handler: props.onClick },
+            { name: "onClickState", handler: props.onClickState },
+            { name: "onTouch", handler: props.onTouch },
+            { name: "onDrag", handler: props.onDrag },
+            { name: "onPinch", handler: props.onPinch },
+            { name: "onRotate", handler: props.onRotate },
+        ];
+        // Register all event handlers and store callback IDs for cleanup
+        const registeredCallbacks = eventHandlers
+            .filter(({ handler }) => !!handler)
+            .map(({ name, handler }) => {
+            const callbackId = `${nodeId}_${name}`;
+            // Register the callback in the global registry
+            if (typeof global !== "undefined" && global.registerViroEventCallback) {
+                global.registerViroEventCallback(callbackId, handler);
+            }
+            // Register with native code
+            nativeViro.registerEventCallback(nodeId, name, callbackId);
+            return { name, callbackId };
+        });
+        // Cleanup when unmounting
+        return () => {
+            const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+            if (!nativeViro)
+                return;
+            // Unregister all event handlers
+            registeredCallbacks.forEach(({ name, callbackId }) => {
+                nativeViro.unregisterEventCallback(nodeId, name, callbackId);
+            });
+        };
+    }, [
+        nodeId,
+        props.onHover,
+        props.onClick,
+        props.onClickState,
+        props.onTouch,
+        props.onDrag,
+        props.onPinch,
+        props.onRotate,
+    ]);
+    // Render children with this flex view as their parent
+    return (<ViroUtils_1.ViroContextProvider value={nodeId}>{props.children}</ViroUtils_1.ViroContextProvider>);
+};
+exports.ViroFlexView = ViroFlexView;

package/dist/fabric-interop/components/ViroGeometry.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ViroGeometry
+ *
+ * A component for rendering custom 3D geometry.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroGeometryProps extends ViroCommonProps {
+    vertices: [number, number, number][];
+    normals?: [number, number, number][];
+    texcoords?: [number, number][];
+    triangleIndices: number[][];
+    materials?: string | string[];
+    lightReceivingBitMask?: number;
+    shadowCastingBitMask?: number;
+    type?: "Dynamic" | "Kinematic" | "Static";
+}
+/**
+ * ViroGeometry is a component for rendering custom 3D geometry.
+ * It allows you to create custom 3D shapes by specifying vertices, normals,
+ * texture coordinates, and triangle indices.
+ */
+export declare const ViroGeometry: React.FC<ViroGeometryProps>;

package/dist/fabric-interop/components/ViroGeometry.js

@@ -0,0 +1,50 @@
+"use strict";
+/**
+ * ViroGeometry
+ *
+ * A component for rendering custom 3D geometry.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroGeometry = void 0;
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * ViroGeometry is a component for rendering custom 3D geometry.
+ * It allows you to create custom 3D shapes by specifying vertices, normals,
+ * texture coordinates, and triangle indices.
+ */
+const ViroGeometry = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        vertices: props.vertices,
+        normals: props.normals,
+        texcoords: props.texcoords,
+        triangleIndices: props.triangleIndices,
+        materials: props.materials,
+        lightReceivingBitMask: props.lightReceivingBitMask,
+        shadowCastingBitMask: props.shadowCastingBitMask,
+        type: props.type,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("geometry", nativeProps);
+    // Register event handlers using our new event system
+    (0, ViroUtils_1.useViroEventListeners)(nodeId, {
+        onHover: props.onHover,
+        onClick: props.onClick,
+        onClickState: props.onClickState,
+        onTouch: props.onTouch,
+        onScroll: props.onScroll,
+        onSwipe: props.onSwipe,
+        onDrag: props.onDrag,
+        onPinch: props.onPinch,
+        onRotate: props.onRotate,
+        onFuse: typeof props.onFuse === "function"
+            ? props.onFuse
+            : props.onFuse?.callback,
+        onCollision: props.onCollision,
+        onTransformUpdate: props.onTransformUpdate,
+    });
+    // Component doesn't have children, so just return null
+    return null;
+};
+exports.ViroGeometry = ViroGeometry;

package/dist/fabric-interop/components/ViroGlobal.d.ts

@@ -0,0 +1,45 @@
+/**
+ * ViroGlobal
+ *
+ * A utility to provide type-safe access to the global NativeViro object.
+ */
+declare global {
+    var NativeViro: any;
+}
+export interface NativeViroType {
+    createViroNode: (nodeId: string, nodeType: string, props: Record<string, any>) => void;
+    updateViroNode: (nodeId: string, props: Record<string, any>) => void;
+    deleteViroNode: (nodeId: string) => void;
+    addViroNodeChild: (parentId: string, childId: string) => void;
+    removeViroNodeChild: (parentId: string, childId: string) => void;
+    registerEventCallback: (nodeId: string, eventName: string, callbackId: string) => void;
+    unregisterEventCallback: (nodeId: string, eventName: string, callbackId: string) => void;
+    createViroMaterial: (materialName: string, properties: Record<string, any>) => void;
+    updateViroMaterial: (materialName: string, properties: Record<string, any>) => void;
+    createViroAnimation: (animationName: string, properties: Record<string, any>) => void;
+    executeViroAnimation: (nodeId: string, animationName: string, options: Record<string, any>) => void;
+    createViroScene: (sceneId: string, sceneType: string, props: Record<string, any>) => void;
+    activateViroScene: (sceneId: string) => void;
+    deactivateViroScene: (sceneId: string) => void;
+    destroyViroScene: (sceneId: string) => void;
+    getViroSceneState: (sceneId: string) => string | null;
+    getViroMemoryStats: () => Record<string, any> | null;
+    performViroMemoryCleanup: () => void;
+    setViroARPlaneDetection: (config: {
+        enabled?: boolean;
+        alignment?: string;
+        horizontal?: boolean;
+        vertical?: boolean;
+    }) => void;
+    setViroARImageTargets: (targets: Record<string, any>) => void;
+    recenterTracking: (nodeId: string) => void;
+    project: (nodeId: string, point: [number, number, number]) => Promise<[number, number, number]>;
+    unproject: (nodeId: string, point: [number, number, number]) => Promise<[number, number, number]>;
+    initialize: (config?: {
+        debug?: boolean;
+        arEnabled?: boolean;
+        worldAlignment?: string;
+    }) => Promise<boolean>;
+}
+export declare function getNativeViro(): NativeViroType | null;
+export declare function isNativeViroAvailable(): boolean;

package/dist/fabric-interop/components/ViroGlobal.js

@@ -0,0 +1,20 @@
+"use strict";
+/**
+ * ViroGlobal
+ *
+ * A utility to provide type-safe access to the global NativeViro object.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNativeViro = getNativeViro;
+exports.isNativeViroAvailable = isNativeViroAvailable;
+// Get the NativeViro object with type safety
+function getNativeViro() {
+    if (typeof global !== "undefined" && global.NativeViro) {
+        return global.NativeViro;
+    }
+    return null;
+}
+// Check if NativeViro is available
+function isNativeViroAvailable() {
+    return getNativeViro() !== null;
+}

package/dist/fabric-interop/components/ViroImage.d.ts

@@ -0,0 +1,29 @@
+/**
+ * ViroImage
+ *
+ * A component for displaying 2D images in 3D space.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroImageProps extends ViroCommonProps {
+    source: {
+        uri: string;
+    } | number;
+    width?: number;
+    height?: number;
+    resizeMode?: "ScaleToFill" | "ScaleToFit" | "StretchToFill";
+    imageClipMode?: "None" | "ClipToBounds";
+    stereoMode?: "LeftRight" | "RightLeft" | "TopBottom" | "BottomTop" | "None";
+    format?: "RGBA8" | "RGB565";
+    mipmap?: boolean;
+    placeholderSource?: {
+        uri: string;
+    } | number;
+    materials?: string | string[];
+    lightReceivingBitMask?: number;
+    shadowCastingBitMask?: number;
+}
+/**
+ * ViroImage is a component for displaying 2D images in 3D space.
+ */
+export declare const ViroImage: React.FC<ViroImageProps>;

package/dist/fabric-interop/components/ViroImage.js

@@ -0,0 +1,52 @@
+"use strict";
+/**
+ * ViroImage
+ *
+ * A component for displaying 2D images in 3D space.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroImage = void 0;
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * ViroImage is a component for displaying 2D images in 3D space.
+ */
+const ViroImage = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        source: props.source,
+        width: props.width,
+        height: props.height,
+        resizeMode: props.resizeMode,
+        imageClipMode: props.imageClipMode,
+        stereoMode: props.stereoMode,
+        format: props.format,
+        mipmap: props.mipmap,
+        placeholderSource: props.placeholderSource,
+        materials: props.materials,
+        lightReceivingBitMask: props.lightReceivingBitMask,
+        shadowCastingBitMask: props.shadowCastingBitMask,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("image", nativeProps);
+    // Register event handlers using our new event system
+    (0, ViroUtils_1.useViroEventListeners)(nodeId, {
+        onHover: props.onHover,
+        onClick: props.onClick,
+        onClickState: props.onClickState,
+        onTouch: props.onTouch,
+        onScroll: props.onScroll,
+        onSwipe: props.onSwipe,
+        onDrag: props.onDrag,
+        onPinch: props.onPinch,
+        onRotate: props.onRotate,
+        onFuse: typeof props.onFuse === "function"
+            ? props.onFuse
+            : props.onFuse?.callback,
+        onCollision: props.onCollision,
+        onTransformUpdate: props.onTransformUpdate,
+    });
+    // Image doesn't have children, so just return null
+    return null;
+};
+exports.ViroImage = ViroImage;