@react-three/fiber 9.0.0-alpha.2 → 9.0.0-alpha.3

package/dist/declarations/src/core/stages.d.ts

@@ -1,59 +1,64 @@
-/// <reference types="webxr" />
-import { MutableRefObject } from 'react';
-import { StoreApi, UseBoundStore } from 'zustand';
-import { RootState } from './store';
-export interface UpdateCallback {
-    (state: RootState, delta: number, frame?: XRFrame): void;
-}
-export declare type UpdateCallbackRef = MutableRefObject<UpdateCallback>;
-declare type Store = UseBoundStore<RootState, StoreApi<RootState>>;
-export declare type UpdateSubscription = {
-    ref: UpdateCallbackRef;
-    store: Store;
-};
-export declare type FixedStageOptions = {
-    fixedStep?: number;
-    maxSubsteps?: number;
-};
-export declare type FixedStageProps = {
-    fixedStep: number;
-    maxSubsteps: number;
-    accumulator: number;
-    alpha: number;
-};
-export declare class Stage {
-    private subscribers;
-    private _frameTime;
-    constructor();
-    frame(delta: number, frame?: XRFrame): void;
-    add(ref: UpdateCallbackRef, store: Store): () => void;
-    get frameTime(): number;
-}
-export declare class FixedStage extends Stage {
-    private _fixedStep;
-    private _maxSubsteps;
-    private _accumulator;
-    private _alpha;
-    private _fixedFrameTime;
-    private _substepTimes;
-    constructor(fixedStep?: number, maxSubSteps?: number);
-    frame(delta: number, frame?: XRFrame): void;
-    get frameTime(): number;
-    get substepTimes(): number[];
-    get fixedStep(): number;
-    set fixedStep(fixedStep: number);
-    get maxSubsteps(): number;
-    set maxSubsteps(maxSubsteps: number);
-    get accumulator(): number;
-    get alpha(): number;
-}
-export declare const Stages: {
-    Early: Stage;
-    Fixed: FixedStage;
-    Update: Stage;
-    Late: Stage;
-    Render: Stage;
-    After: Stage;
-};
-export declare const Lifecycle: Stage[];
-export {};
+/// <reference types="webxr" />
+import type { Subscription, RootStore } from "./store.js";
+export type UpdateSubscription = Omit<Subscription, 'priority'>;
+/**
+ * Class representing a stage that updates every frame.
+ * Stages are used to build a lifecycle of effects for an app's frameloop.
+ */
+export declare class Stage {
+    private subscribers;
+    private _frameTime;
+    constructor();
+    /**
+     * Executes all callback subscriptions on the stage.
+     * @param delta - Delta time between frame calls.
+     * @param [frame] - The XR frame if it exists.
+     */
+    frame(delta: number, frame?: XRFrame): void;
+    /**
+     * Adds a callback subscriber to the stage.
+     * @param ref - The mutable callback reference.
+     * @param store - The store to be used with the callback execution.
+     * @returns A function to remove the subscription.
+     */
+    add(ref: UpdateSubscription['ref'], store: RootStore): () => void;
+    get frameTime(): number;
+}
+/**
+ * Class representing a stage that updates every frame at a fixed rate.
+ * @param name - Name of the stage.
+ * @param [fixedStep] - Fixed step rate.
+ * @param [maxSubsteps] - Maximum number of substeps.
+ */
+export declare class FixedStage extends Stage {
+    private _fixedStep;
+    private _maxSubsteps;
+    private _accumulator;
+    private _alpha;
+    private _fixedFrameTime;
+    private _substepTimes;
+    constructor(fixedStep?: number, maxSubSteps?: number);
+    /**
+     * Executes all callback subscriptions on the stage.
+     * @param delta - Delta time between frame calls.
+     * @param [frame] - The XR frame if it exists.
+     */
+    frame(delta: number, frame?: XRFrame): void;
+    get frameTime(): number;
+    get substepTimes(): number[];
+    get fixedStep(): number;
+    set fixedStep(fixedStep: number);
+    get maxSubsteps(): number;
+    set maxSubsteps(maxSubsteps: number);
+    get accumulator(): number;
+    get alpha(): number;
+}
+export declare const Stages: {
+    Early: Stage;
+    Fixed: FixedStage;
+    Update: Stage;
+    Late: Stage;
+    Render: Stage;
+    After: Stage;
+};
+export declare const Lifecycle: Stage[];

package/dist/declarations/src/core/store.d.ts

@@ -1,109 +1,147 @@
-/// <reference types="webxr" />
-import * as THREE from 'three';
-import * as React from 'react';
-import { GetState, SetState, StoreApi, UseBoundStore } from 'zustand';
-import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events';
-import { Camera } from './utils';
-import { FixedStage, Stage } from './stages';
-export declare const privateKeys: readonly ["set", "get", "setSize", "setFrameloop", "setDpr", "events", "invalidate", "advance", "size", "viewport"];
-export declare type PrivateKeys = typeof privateKeys[number];
-export interface Intersection extends THREE.Intersection {
-    eventObject: THREE.Object3D;
-}
-export declare type Subscription = {
-    ref: React.MutableRefObject<RenderCallback>;
-    priority: number;
-    store: UseBoundStore<RootState, StoreApi<RootState>>;
-};
-export declare type Dpr = number | [min: number, max: number];
-export declare type Size = {
-    width: number;
-    height: number;
-    top: number;
-    left: number;
-};
-export declare type Viewport = Size & {
-    initialDpr: number;
-    dpr: number;
-    factor: number;
-    distance: number;
-    aspect: number;
-};
-export declare type RenderCallback = (state: RootState, delta: number, frame?: XRFrame) => void;
-declare type LegacyAlways = 'always';
-export declare type FrameloopMode = LegacyAlways | 'auto' | 'demand' | 'never';
-declare type FrameloopRender = 'auto' | 'manual';
-export declare type FrameloopLegacy = 'always' | 'demand' | 'never';
-export declare type Frameloop = FrameloopLegacy | {
-    mode?: FrameloopMode;
-    render?: FrameloopRender;
-    maxDelta?: number;
-};
-export declare type Performance = {
-    current: number;
-    min: number;
-    max: number;
-    debounce: number;
-    regress: () => void;
-};
-export declare type Renderer = {
-    render: (scene: THREE.Scene, camera: THREE.Camera) => any;
-};
-export declare const isRenderer: (def: any) => boolean;
-export declare type StageTypes = Stage | FixedStage;
-export declare type InternalState = {
-    interaction: THREE.Object3D[];
-    hovered: Map<string, ThreeEvent<DomEvent>>;
-    subscribers: Subscription[];
-    capturedMap: Map<number, Map<THREE.Object3D, PointerCaptureTarget>>;
-    initialClick: [x: number, y: number];
-    initialHits: THREE.Object3D[];
-    lastEvent: React.MutableRefObject<DomEvent | null>;
-    active: boolean;
-    priority: number;
-    frames: number;
-    stages: StageTypes[];
-    render: 'auto' | 'manual';
-    maxDelta: number;
-    subscribe: (callback: React.MutableRefObject<RenderCallback>, priority: number, store: UseBoundStore<RootState, StoreApi<RootState>>) => () => void;
-};
-export declare type RootState = {
-    set: SetState<RootState>;
-    get: GetState<RootState>;
-    gl: THREE.WebGLRenderer;
-    camera: Camera & {
-        manual?: boolean;
-    };
-    scene: THREE.Scene;
-    raycaster: THREE.Raycaster;
-    clock: THREE.Clock;
-    events: EventManager<any>;
-    xr: {
-        connect: () => void;
-        disconnect: () => void;
-    };
-    controls: THREE.EventDispatcher | null;
-    pointer: THREE.Vector2;
-    mouse: THREE.Vector2;
-    legacy: boolean;
-    linear: boolean;
-    flat: boolean;
-    frameloop: FrameloopLegacy;
-    performance: Performance;
-    size: Size;
-    viewport: Viewport & {
-        getCurrentViewport: (camera?: Camera, target?: THREE.Vector3 | Parameters<THREE.Vector3['set']>, size?: Size) => Omit<Viewport, 'dpr' | 'initialDpr'>;
-    };
-    invalidate: (frames?: number) => void;
-    advance: (timestamp: number, runGlobalEffects?: boolean) => void;
-    setEvents: (events: Partial<EventManager<any>>) => void;
-    setSize: (width: number, height: number, top?: number, left?: number) => void;
-    setDpr: (dpr: Dpr) => void;
-    setFrameloop: (frameloop: Frameloop) => void;
-    onPointerMissed?: (event: MouseEvent) => void;
-    previousRoot?: UseBoundStore<RootState, StoreApi<RootState>>;
-    internal: InternalState;
-};
-declare const context: React.Context<UseBoundStore<RootState, StoreApi<RootState>>>;
-declare const createStore: (invalidate: (state?: RootState | undefined, frames?: number | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean | undefined, state?: RootState | undefined, frame?: XRFrame | undefined) => void) => UseBoundStore<RootState>;
-export { createStore, context };
+/// <reference types="webxr" />
+import * as THREE from 'three';
+import * as React from 'react';
+import { type StoreApi, type UseBoundStore } from 'zustand';
+import type { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from "./events.js";
+import { type Camera } from "./utils.js";
+import type { FixedStage, Stage } from "./stages.js";
+export interface Intersection extends THREE.Intersection {
+    eventObject: THREE.Object3D;
+}
+export type Subscription = {
+    ref: React.MutableRefObject<RenderCallback>;
+    priority: number;
+    store: RootStore;
+};
+export type Dpr = number | [min: number, max: number];
+export interface Size {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+}
+export interface Viewport extends Size {
+    /** The initial pixel ratio */
+    initialDpr: number;
+    /** Current pixel ratio */
+    dpr: number;
+    /** size.width / viewport.width */
+    factor: number;
+    /** Camera distance */
+    distance: number;
+    /** Camera aspect ratio: width / height */
+    aspect: number;
+}
+export type RenderCallback = (state: RootState, delta: number, frame?: XRFrame) => void;
+export type UpdateCallback = RenderCallback;
+export type LegacyAlways = 'always';
+export type FrameloopMode = LegacyAlways | 'auto' | 'demand' | 'never';
+export type FrameloopRender = 'auto' | 'manual';
+export type FrameloopLegacy = 'always' | 'demand' | 'never';
+export type Frameloop = FrameloopLegacy | {
+    mode?: FrameloopMode;
+    render?: FrameloopRender;
+    maxDelta?: number;
+};
+export interface Performance {
+    /** Current performance normal, between min and max */
+    current: number;
+    /** How low the performance can go, between 0 and max */
+    min: number;
+    /** How high the performance can go, between min and max */
+    max: number;
+    /** Time until current returns to max in ms */
+    debounce: number;
+    /** Sets current to min, puts the system in regression */
+    regress: () => void;
+}
+export interface Renderer {
+    render: (scene: THREE.Scene, camera: THREE.Camera) => any;
+}
+export declare const isRenderer: (def: any) => boolean;
+export type StageTypes = Stage | FixedStage;
+export interface InternalState {
+    interaction: THREE.Object3D[];
+    hovered: Map<string, ThreeEvent<DomEvent>>;
+    subscribers: Subscription[];
+    capturedMap: Map<number, Map<THREE.Object3D, PointerCaptureTarget>>;
+    initialClick: [x: number, y: number];
+    initialHits: THREE.Object3D[];
+    lastEvent: React.MutableRefObject<DomEvent | null>;
+    active: boolean;
+    priority: number;
+    frames: number;
+    /** The ordered stages defining the lifecycle. */
+    stages: StageTypes[];
+    /** Render function flags */
+    render: 'auto' | 'manual';
+    /** The max delta time between two frames. */
+    maxDelta: number;
+    subscribe: (callback: React.MutableRefObject<RenderCallback>, priority: number, store: RootStore) => () => void;
+}
+export interface XRManager {
+    connect: () => void;
+    disconnect: () => void;
+}
+export interface RootState {
+    /** Set current state */
+    set: StoreApi<RootState>['setState'];
+    /** Get current state */
+    get: StoreApi<RootState>['getState'];
+    /** The instance of the renderer */
+    gl: THREE.WebGLRenderer;
+    /** Default camera */
+    camera: Camera;
+    /** Default scene */
+    scene: THREE.Scene;
+    /** Default raycaster */
+    raycaster: THREE.Raycaster;
+    /** Default clock */
+    clock: THREE.Clock;
+    /** Event layer interface, contains the event handler and the node they're connected to */
+    events: EventManager<any>;
+    /** XR interface */
+    xr: XRManager;
+    /** Currently used controls */
+    controls: THREE.EventDispatcher | null;
+    /** Normalized event coordinates */
+    pointer: THREE.Vector2;
+    /** @deprecated Normalized event coordinates, use "pointer" instead! */
+    mouse: THREE.Vector2;
+    legacy: boolean;
+    /** Shortcut to gl.outputColorSpace = THREE.LinearSRGBColorSpace */
+    linear: boolean;
+    /** Shortcut to gl.toneMapping = NoTonemapping */
+    flat: boolean;
+    /** Update frame loop flags */
+    frameloop: FrameloopLegacy;
+    /** Adaptive performance interface */
+    performance: Performance;
+    /** Reactive pixel-size of the canvas */
+    size: Size;
+    /** Reactive size of the viewport in threejs units */
+    viewport: Viewport & {
+        getCurrentViewport: (camera?: Camera, target?: THREE.Vector3 | Parameters<THREE.Vector3['set']>, size?: Size) => Omit<Viewport, 'dpr' | 'initialDpr'>;
+    };
+    /** Flags the canvas for render, but doesn't render in itself */
+    invalidate: (frames?: number) => void;
+    /** Advance (render) one step */
+    advance: (timestamp: number, runGlobalEffects?: boolean) => void;
+    /** Shortcut to setting the event layer */
+    setEvents: (events: Partial<EventManager<any>>) => void;
+    /** Shortcut to manual sizing */
+    setSize: (width: number, height: number, top?: number, left?: number) => void;
+    /** Shortcut to manual setting the pixel ratio */
+    setDpr: (dpr: Dpr) => void;
+    /** Shortcut to setting frameloop flags */
+    setFrameloop: (frameloop: Frameloop) => void;
+    /** When the canvas was clicked but nothing was hit */
+    onPointerMissed?: (event: MouseEvent) => void;
+    /** If this state model is layered (via createPortal) then this contains the previous layer */
+    previousRoot?: RootStore;
+    /** Internals */
+    internal: InternalState;
+}
+export type RootStore = UseBoundStore<StoreApi<RootState>>;
+export declare const context: React.Context<RootStore>;
+export declare const createStore: (invalidate: (state?: RootState, frames?: number) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState, frame?: XRFrame) => void) => RootStore;

package/dist/declarations/src/core/utils.d.ts

@@ -1,80 +1,128 @@
-import * as THREE from 'three';
-import * as React from 'react';
-import type { Fiber } from 'react-reconciler';
-import type { UseBoundStore } from 'zustand';
-import type { Dpr, RootState, Size } from './store';
-import type { Instance } from './renderer';
-export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
-export declare const isOrthographicCamera: (def: Camera) => def is THREE.OrthographicCamera;
-export declare const isRef: (obj: any) => obj is React.MutableRefObject<unknown>;
-export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
-export declare function useMutableCallback<T>(fn: T): React.MutableRefObject<T>;
-export declare type SetBlock = false | Promise<null> | null;
-export declare type UnblockProps = {
-    set: React.Dispatch<React.SetStateAction<SetBlock>>;
-    children: React.ReactNode;
-};
-export declare function Block({ set }: Omit<UnblockProps, 'children'>): null;
-export declare class ErrorBoundary extends React.Component<{
-    set: React.Dispatch<Error | undefined>;
-    children: React.ReactNode;
-}, {
-    error: boolean;
-}> {
-    state: {
-        error: boolean;
-    };
-    static getDerivedStateFromError: () => {
-        error: boolean;
-    };
-    componentDidCatch(err: Error): void;
-    render(): React.ReactNode;
-}
-export interface ObjectMap {
-    nodes: {
-        [name: string]: THREE.Object3D;
-    };
-    materials: {
-        [name: string]: THREE.Material;
-    };
-}
-export declare function calculateDpr(dpr: Dpr): number;
-export declare const getRootState: <T = THREE.Object3D<THREE.Event>>(obj: T) => RootState | undefined;
-export interface EquConfig {
-    arrays?: 'reference' | 'shallow';
-    objects?: 'reference' | 'shallow';
-    strict?: boolean;
-}
-export declare const is: {
-    obj: (a: any) => boolean;
-    fun: (a: any) => a is Function;
-    str: (a: any) => a is string;
-    num: (a: any) => a is number;
-    boo: (a: any) => a is boolean;
-    und: (a: any) => boolean;
-    arr: (a: any) => boolean;
-    equ(a: any, b: any, { arrays, objects, strict }?: EquConfig): boolean;
-};
-export declare function buildGraph(object: THREE.Object3D): ObjectMap;
-export interface Disposable {
-    type?: string;
-    dispose?: () => void;
-}
-export declare function dispose<T extends Disposable>(obj: T): void;
-export declare const REACT_INTERNAL_PROPS: string[];
-export declare function getInstanceProps<T = any>(queue: Fiber['pendingProps']): Instance<T>['props'];
-export declare function prepare<T = any>(target: T, root: UseBoundStore<RootState>, type: string, props: Instance<T>['props']): Instance<T>;
-export declare function resolve(root: any, key: string): {
-    root: any;
-    key: string;
-    target: any;
-};
-export declare function attach(parent: Instance, child: Instance): void;
-export declare function detach(parent: Instance, child: Instance): void;
-export declare const RESERVED_PROPS: string[];
-export declare function diffProps<T = any>(instance: Instance<T>, newProps: Instance<T>['props'], resetRemoved?: boolean): Instance<T>['props'];
-export declare function applyProps<T = any>(object: Instance<T>['object'], props: Instance<T>['props']): Instance<T>['object'];
-export declare function invalidateInstance(instance: Instance): void;
-export declare function updateCamera(camera: Camera & {
-    manual?: boolean;
-}, size: Size): void;
+import * as THREE from 'three';
+import * as React from 'react';
+import { Instance } from "./reconciler.js";
+import type { Fiber } from 'react-reconciler';
+import type { Dpr, Renderer, RootStore, Size } from "./store.js";
+/**
+ * Returns the instance's initial (outmost) root.
+ */
+export declare function findInitialRoot<T>(instance: Instance<T>): RootStore;
+/**
+ * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
+ */
+export declare const hasColorSpace: <T extends object | Renderer | THREE.Texture, P = T extends Renderer ? {
+    outputColorSpace: string;
+} : {
+    colorSpace: string;
+}>(object: T) => object is T & P;
+export type ColorManagementRepresentation = {
+    enabled: boolean | never;
+} | {
+    legacyMode: boolean | never;
+};
+/**
+ * The current THREE.ColorManagement instance, if present.
+ */
+export declare const getColorManagement: () => ColorManagementRepresentation | null;
+export type Act = <T = any>(cb: () => Promise<T>) => Promise<T>;
+/**
+ * Safely flush async effects when testing, simulating a legacy root.
+ */
+export declare const act: Act;
+export type Camera = (THREE.OrthographicCamera | THREE.PerspectiveCamera) & {
+    manual?: boolean;
+};
+export declare const isOrthographicCamera: (def: Camera) => def is THREE.OrthographicCamera;
+export declare const isRef: (obj: any) => obj is React.MutableRefObject<unknown>;
+/**
+ * An SSR-friendly useLayoutEffect.
+ *
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect elsewhere.
+ *
+ * @see https://github.com/facebook/react/issues/14927
+ */
+export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+export declare function useMutableCallback<T>(fn: T): React.MutableRefObject<T>;
+export type Bridge = React.FC<{
+    children?: React.ReactNode;
+}>;
+/**
+ * Bridges renderer Context and StrictMode from a primary renderer.
+ */
+export declare function useBridge(): Bridge;
+export type SetBlock = false | Promise<null> | null;
+export type UnblockProps = {
+    set: React.Dispatch<React.SetStateAction<SetBlock>>;
+    children: React.ReactNode;
+};
+export declare function Block({ set }: Omit<UnblockProps, 'children'>): null;
+export declare class ErrorBoundary extends React.Component<{
+    set: React.Dispatch<Error | undefined>;
+    children: React.ReactNode;
+}, {
+    error: boolean;
+}> {
+    state: {
+        error: boolean;
+    };
+    static getDerivedStateFromError: () => {
+        error: boolean;
+    };
+    componentDidCatch(err: Error): void;
+    render(): React.ReactNode;
+}
+export interface ObjectMap {
+    nodes: {
+        [name: string]: THREE.Object3D;
+    };
+    materials: {
+        [name: string]: THREE.Material;
+    };
+}
+export declare function calculateDpr(dpr: Dpr): number;
+/**
+ * Returns instance root state
+ */
+export declare function getRootState<T extends THREE.Object3D = THREE.Object3D>(obj: T): import("./store.js").RootState | undefined;
+export interface EquConfig {
+    /** Compare arrays by reference equality a === b (default), or by shallow equality */
+    arrays?: 'reference' | 'shallow';
+    /** Compare objects by reference equality a === b (default), or by shallow equality */
+    objects?: 'reference' | 'shallow';
+    /** If true the keys in both a and b must match 1:1 (default), if false a's keys must intersect b's */
+    strict?: boolean;
+}
+export declare const is: {
+    obj: (a: any) => boolean;
+    fun: (a: any) => a is Function;
+    str: (a: any) => a is string;
+    num: (a: any) => a is number;
+    boo: (a: any) => a is boolean;
+    und: (a: any) => boolean;
+    arr: (a: any) => boolean;
+    equ(a: any, b: any, { arrays, objects, strict }?: EquConfig): boolean;
+};
+export declare function buildGraph(object: THREE.Object3D): ObjectMap;
+export interface Disposable {
+    type?: string;
+    dispose?: () => void;
+}
+export declare function dispose<T extends Disposable>(obj: T): void;
+export declare const REACT_INTERNAL_PROPS: string[];
+export declare function getInstanceProps<T = any>(queue: Fiber['pendingProps']): Instance<T>['props'];
+export declare function prepare<T = any>(target: T, root: RootStore, type: string, props: Instance<T>['props']): Instance<T>;
+export declare function resolve(root: any, key: string): {
+    root: any;
+    key: string;
+    target: any;
+};
+export declare function attach(parent: Instance, child: Instance): void;
+export declare function detach(parent: Instance, child: Instance): void;
+export declare const RESERVED_PROPS: string[];
+export declare function diffProps<T = any>(instance: Instance<T>, newProps: Instance<T>['props'], resetRemoved?: boolean): Instance<T>['props'];
+export declare function applyProps<T = any>(object: Instance<T>['object'], props: Instance<T>['props']): Instance<T>['object'];
+export declare function invalidateInstance(instance: Instance): void;
+export declare function updateCamera(camera: Camera, size: Size): void;
+export declare const isObject3D: (object: any) => object is THREE.Object3D<THREE.Event>;

package/dist/declarations/src/index.d.ts

@@ -1,10 +1,6 @@
-export * from './three-types';
-export type { AttachFnType, AttachType, ConstructorRepresentation, Catalogue, Args, InstanceProps, Instance, } from './core/renderer';
-export type { Intersection, Subscription, Dpr, Size, Viewport, RenderCallback, Performance, RootState, } from './core/store';
-export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events';
-export type { ObjectMap, Camera } from './core/utils';
-export * from './web/Canvas';
-export { createEvents } from './core/events';
-export { createPointerEvents as events } from './web/events';
-export * from './core';
-export { Stage, FixedStage, Stages } from './core/stages';
+import * as ReactThreeFiber from "./three-types.js";
+export { ReactThreeFiber };
+export * from "./three-types.js";
+export * from "./core/index.js";
+export * from "./web/Canvas.js";
+export { createPointerEvents as events } from "./web/events.js";

package/dist/declarations/src/native/Canvas.d.ts

@@ -1,8 +1,14 @@
-import * as React from 'react';
-import { View, ViewProps, ViewStyle } from 'react-native';
-import { RenderProps } from '../core';
-export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, ViewProps {
-    children: React.ReactNode;
-    style?: ViewStyle;
-}
-export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<View>>;
+import * as React from 'react';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { RenderProps } from "../core/index.js";
+export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, ViewProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+export interface Props extends CanvasProps {
+}
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<View>>;