@react-three/fiber 8.8.0 → 8.8.1

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

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import type { Options as ResizeOptions } from 'react-use-measure';
-import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    resize?: ResizeOptions;
-    eventSource?: HTMLElement | React.MutableRefObject<HTMLElement>;
-    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
-}
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+import * as React from 'react';
+import type { Options as ResizeOptions } from 'react-use-measure';
+import { RenderProps } from '../core';
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+    resize?: ResizeOptions;
+    eventSource?: HTMLElement | React.MutableRefObject<HTMLElement>;
+    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
+}
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

package/dist/declarations/src/web/events.d.ts

@@ -1,4 +1,4 @@
-import { UseBoundStore } from 'zustand';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import { EventManager } from '../core/events';
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

package/dist/{index-a38b08b7.cjs.dev.js → index-78501abd.cjs.dev.js}

@@ -56,87 +56,6 @@ function useMutableCallback(fn) {
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
-/**
- * Traverses up or down a {@link Fiber}, return `true` to stop and select a node.
- */
-
-function traverseFiber(fiber, ascending, selector) {
-  if (selector(fiber) === true) return fiber;
-  let child = ascending ? fiber.return : fiber.child;
-
-  while (child) {
-    const match = traverseFiber(child, ascending, selector);
-    if (match) return match;
-    child = child.sibling;
-  }
-} // Active contexts
-
-
-const contexts = [];
-/**
- * Represents a react-context bridge provider component.
- */
-
-/**
- * React Context currently cannot be shared across [React renderers](https://reactjs.org/docs/codebase-overview.html#renderers) but explicitly forwarded between providers (see [react#17275](https://github.com/facebook/react/issues/17275)). This hook returns a {@link ContextBridge} of live context providers to pierce Context across renderers.
- *
- * Pass {@link ContextBridge} as a component to a secondary renderer to enable context-sharing within its children.
- */
-function useContextBridge(fiber) {
-  if (fiber) {
-    traverseFiber(fiber, true, node => {
-      var _node$type;
-
-      const context = (_node$type = node.type) == null ? void 0 : _node$type._context;
-      if (!context || contexts.includes(context)) return; // In development, React will warn about using contexts between renderers because
-      // of the above issue. We'll hide the warning because this hook works as expected
-      // https://github.com/facebook/react/pull/12779
-
-      Object.defineProperties(context, {
-        _currentRenderer: {
-          get() {
-            return null;
-          },
-
-          set() {}
-
-        },
-        _currentRenderer2: {
-          get() {
-            return null;
-          },
-
-          set() {}
-
-        }
-      });
-      contexts.push(context);
-    });
-  }
-
-  return contexts.reduce((Prev, context) => {
-    var _SECRET_INTERNALS_DO;
-
-    const value = (_SECRET_INTERNALS_DO = React__namespace.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current) == null ? void 0 : _SECRET_INTERNALS_DO.readContext(context);
-    return props => /*#__PURE__*/React__namespace.createElement(Prev, null, /*#__PURE__*/React__namespace.createElement(context.Provider, { ...props,
-      value
-    }));
-  }, props => /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, props));
-}
-/**
- * Exposes the current react-internal {@link Fiber}.
- */
-
-class FiberProvider extends React__namespace.Component {
-  componentDidMount() {
-    this.props.setFiber(this._reactInternals);
-  }
-
-  render() {
-    return this.props.children;
-  }
-
-}
 function Block({
   set
 }) {
@@ -2248,7 +2167,6 @@ const act = React__namespace.unstable_act;
 
 exports.Block = Block;
 exports.ErrorBoundary = ErrorBoundary;
-exports.FiberProvider = FiberProvider;
 exports.act = act;
 exports.addAfterEffect = addAfterEffect;
 exports.addEffect = addEffect;
@@ -2269,7 +2187,6 @@ exports.render = render;
 exports.roots = roots;
 exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
-exports.useContextBridge = useContextBridge;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useInstanceHandle = useInstanceHandle;

package/dist/{index-f01196c6.esm.js → index-80784ca9.esm.js}

@@ -29,87 +29,6 @@ function useMutableCallback(fn) {
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
-/**
- * Traverses up or down a {@link Fiber}, return `true` to stop and select a node.
- */
-
-function traverseFiber(fiber, ascending, selector) {
-  if (selector(fiber) === true) return fiber;
-  let child = ascending ? fiber.return : fiber.child;
-
-  while (child) {
-    const match = traverseFiber(child, ascending, selector);
-    if (match) return match;
-    child = child.sibling;
-  }
-} // Active contexts
-
-
-const contexts = [];
-/**
- * Represents a react-context bridge provider component.
- */
-
-/**
- * React Context currently cannot be shared across [React renderers](https://reactjs.org/docs/codebase-overview.html#renderers) but explicitly forwarded between providers (see [react#17275](https://github.com/facebook/react/issues/17275)). This hook returns a {@link ContextBridge} of live context providers to pierce Context across renderers.
- *
- * Pass {@link ContextBridge} as a component to a secondary renderer to enable context-sharing within its children.
- */
-function useContextBridge(fiber) {
-  if (fiber) {
-    traverseFiber(fiber, true, node => {
-      var _node$type;
-
-      const context = (_node$type = node.type) == null ? void 0 : _node$type._context;
-      if (!context || contexts.includes(context)) return; // In development, React will warn about using contexts between renderers because
-      // of the above issue. We'll hide the warning because this hook works as expected
-      // https://github.com/facebook/react/pull/12779
-
-      Object.defineProperties(context, {
-        _currentRenderer: {
-          get() {
-            return null;
-          },
-
-          set() {}
-
-        },
-        _currentRenderer2: {
-          get() {
-            return null;
-          },
-
-          set() {}
-
-        }
-      });
-      contexts.push(context);
-    });
-  }
-
-  return contexts.reduce((Prev, context) => {
-    var _SECRET_INTERNALS_DO;
-
-    const value = (_SECRET_INTERNALS_DO = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current) == null ? void 0 : _SECRET_INTERNALS_DO.readContext(context);
-    return props => /*#__PURE__*/React.createElement(Prev, null, /*#__PURE__*/React.createElement(context.Provider, { ...props,
-      value
-    }));
-  }, props => /*#__PURE__*/React.createElement(React.Fragment, props));
-}
-/**
- * Exposes the current react-internal {@link Fiber}.
- */
-
-class FiberProvider extends React.Component {
-  componentDidMount() {
-    this.props.setFiber(this._reactInternals);
-  }
-
-  render() {
-    return this.props.children;
-  }
-
-}
 function Block({
   set
 }) {
@@ -2219,4 +2138,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { useFrame as A, Block as B, useGraph as C, useLoader as D, ErrorBoundary as E, FiberProvider as F, useMutableCallback as a, createRoot as b, createEvents as c, useIsomorphicLayoutEffect as d, extend as e, unmountComponentAtNode as f, context as g, createPortal as h, isRef as i, reconciler as j, applyProps as k, dispose as l, invalidate as m, advance as n, addEffect as o, addAfterEffect as p, addTail as q, render as r, getRootState as s, threeTypes as t, useContextBridge as u, act as v, roots as w, useInstanceHandle as x, useStore as y, useThree as z };
+export { useGraph as A, Block as B, useLoader as C, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, isRef as i, applyProps as j, dispose as k, invalidate as l, advance as m, addEffect as n, addAfterEffect as o, addTail as p, getRootState as q, render as r, act as s, threeTypes as t, useMutableCallback as u, roots as v, useInstanceHandle as w, useStore as x, useThree as y, useFrame as z };

package/dist/{index-fb8e3829.cjs.prod.js → index-e6292667.cjs.prod.js}

@@ -56,87 +56,6 @@ function useMutableCallback(fn) {
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
-/**
- * Traverses up or down a {@link Fiber}, return `true` to stop and select a node.
- */
-
-function traverseFiber(fiber, ascending, selector) {
-  if (selector(fiber) === true) return fiber;
-  let child = ascending ? fiber.return : fiber.child;
-
-  while (child) {
-    const match = traverseFiber(child, ascending, selector);
-    if (match) return match;
-    child = child.sibling;
-  }
-} // Active contexts
-
-
-const contexts = [];
-/**
- * Represents a react-context bridge provider component.
- */
-
-/**
- * React Context currently cannot be shared across [React renderers](https://reactjs.org/docs/codebase-overview.html#renderers) but explicitly forwarded between providers (see [react#17275](https://github.com/facebook/react/issues/17275)). This hook returns a {@link ContextBridge} of live context providers to pierce Context across renderers.
- *
- * Pass {@link ContextBridge} as a component to a secondary renderer to enable context-sharing within its children.
- */
-function useContextBridge(fiber) {
-  if (fiber) {
-    traverseFiber(fiber, true, node => {
-      var _node$type;
-
-      const context = (_node$type = node.type) == null ? void 0 : _node$type._context;
-      if (!context || contexts.includes(context)) return; // In development, React will warn about using contexts between renderers because
-      // of the above issue. We'll hide the warning because this hook works as expected
-      // https://github.com/facebook/react/pull/12779
-
-      Object.defineProperties(context, {
-        _currentRenderer: {
-          get() {
-            return null;
-          },
-
-          set() {}
-
-        },
-        _currentRenderer2: {
-          get() {
-            return null;
-          },
-
-          set() {}
-
-        }
-      });
-      contexts.push(context);
-    });
-  }
-
-  return contexts.reduce((Prev, context) => {
-    var _SECRET_INTERNALS_DO;
-
-    const value = (_SECRET_INTERNALS_DO = React__namespace.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current) == null ? void 0 : _SECRET_INTERNALS_DO.readContext(context);
-    return props => /*#__PURE__*/React__namespace.createElement(Prev, null, /*#__PURE__*/React__namespace.createElement(context.Provider, { ...props,
-      value
-    }));
-  }, props => /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, props));
-}
-/**
- * Exposes the current react-internal {@link Fiber}.
- */
-
-class FiberProvider extends React__namespace.Component {
-  componentDidMount() {
-    this.props.setFiber(this._reactInternals);
-  }
-
-  render() {
-    return this.props.children;
-  }
-
-}
 function Block({
   set
 }) {
@@ -2248,7 +2167,6 @@ const act = React__namespace.unstable_act;
 
 exports.Block = Block;
 exports.ErrorBoundary = ErrorBoundary;
-exports.FiberProvider = FiberProvider;
 exports.act = act;
 exports.addAfterEffect = addAfterEffect;
 exports.addEffect = addEffect;
@@ -2269,7 +2187,6 @@ exports.render = render;
 exports.roots = roots;
 exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
-exports.useContextBridge = useContextBridge;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useInstanceHandle = useInstanceHandle;

package/dist/react-three-fiber.cjs.dev.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-a38b08b7.cjs.dev.js');
+var index = require('./index-78501abd.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
+var itsFine = require('its-fine');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
@@ -115,11 +116,7 @@ function createPointerEvents(store) {
   };
 }
 
-/**
- * A DOM canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
+const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   children,
   fallback,
   resize,
@@ -146,8 +143,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const [fiber, setFiber] = React__namespace.useState(null);
-  const Bridge = index.useContextBridge(fiber);
+  const Bridge = itsFine.useContextBridge();
   const [containerRef, containerRect] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
@@ -224,9 +220,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // Or else the canvas will block events from reaching the event source
 
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/React__namespace.createElement(index.FiberProvider, {
-    setFiber: setFiber
-  }, /*#__PURE__*/React__namespace.createElement("div", _extends({
+  return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: divRef,
     style: {
       position: 'relative',
@@ -247,7 +241,17 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     style: {
       display: 'block'
     }
-  }, fallback))));
+  }, fallback)));
+});
+/**
+ * A DOM canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+
+const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
+  })));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

package/dist/react-three-fiber.cjs.prod.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-fb8e3829.cjs.prod.js');
+var index = require('./index-e6292667.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
+var itsFine = require('its-fine');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
@@ -115,11 +116,7 @@ function createPointerEvents(store) {
   };
 }
 
-/**
- * A DOM canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
+const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   children,
   fallback,
   resize,
@@ -146,8 +143,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const [fiber, setFiber] = React__namespace.useState(null);
-  const Bridge = index.useContextBridge(fiber);
+  const Bridge = itsFine.useContextBridge();
   const [containerRef, containerRect] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
@@ -224,9 +220,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // Or else the canvas will block events from reaching the event source
 
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/React__namespace.createElement(index.FiberProvider, {
-    setFiber: setFiber
-  }, /*#__PURE__*/React__namespace.createElement("div", _extends({
+  return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: divRef,
     style: {
       position: 'relative',
@@ -247,7 +241,17 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     style: {
       display: 'block'
     }
-  }, fallback))));
+  }, fallback)));
+});
+/**
+ * A DOM canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+
+const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
+  })));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

package/dist/react-three-fiber.esm.js

@@ -1,9 +1,10 @@
-import { c as createEvents, e as extend, u as useContextBridge, a as useMutableCallback, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as useIsomorphicLayoutEffect, f as unmountComponentAtNode, F as FiberProvider } from './index-f01196c6.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, p as addAfterEffect, o as addEffect, q as addTail, n as advance, k as applyProps, g as context, c as createEvents, h as createPortal, b as createRoot, l as dispose, e as extend, s as getRootState, m as invalidate, j as reconciler, r as render, f as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-f01196c6.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-80784ca9.esm.js';
+export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from './index-80784ca9.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';
+import { FiberProvider, useContextBridge } from 'its-fine';
 import 'react-reconciler/constants';
 import 'zustand';
 import 'react-reconciler';
@@ -88,11 +89,7 @@ function createPointerEvents(store) {
   };
 }
 
-/**
- * A DOM canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
-const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
+const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
   children,
   fallback,
   resize,
@@ -119,8 +116,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React.useMemo(() => extend(THREE), []);
-  const [fiber, setFiber] = React.useState(null);
-  const Bridge = useContextBridge(fiber);
+  const Bridge = useContextBridge();
   const [containerRef, containerRect] = useMeasure({
     scroll: true,
     debounce: {
@@ -197,9 +193,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   // Or else the canvas will block events from reaching the event source
 
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/React.createElement(FiberProvider, {
-    setFiber: setFiber
-  }, /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     ref: divRef,
     style: {
       position: 'relative',
@@ -220,7 +214,17 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     style: {
       display: 'block'
     }
-  }, fallback))));
+  }, fallback)));
+});
+/**
+ * A DOM canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+
+const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
+  })));
 });
 
 export { Canvas, createPointerEvents as events };

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-a38b08b7.cjs.dev.js');
+var index = require('../../dist/index-78501abd.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
+var itsFine = require('its-fine');
 var Pressability = require('react-native/Libraries/Pressability/Pressability');
 require('react-reconciler/constants');
 require('zustand');
@@ -236,7 +237,7 @@ function polyfills() {
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
+const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   children,
   style,
   gl,
@@ -258,8 +259,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const [fiber, setFiber] = React__namespace.useState(null);
-  const Bridge = index.useContextBridge(fiber);
+  const Bridge = itsFine.useContextBridge();
   const [{
     width,
     height,
@@ -370,9 +370,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       return () => index.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(index.FiberProvider, {
-    setFiber: setFiber
-  }, /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
+  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
     ref: viewRef,
     onLayout: onLayout,
     style: {
@@ -382,6 +380,16 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
     onContextCreate: onContextCreate,
     style: reactNative.StyleSheet.absoluteFill
+  }));
+});
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+
+const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
   })));
 });
 

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-fb8e3829.cjs.prod.js');
+var index = require('../../dist/index-e6292667.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
+var itsFine = require('its-fine');
 var Pressability = require('react-native/Libraries/Pressability/Pressability');
 require('react-reconciler/constants');
 require('zustand');
@@ -236,7 +237,7 @@ function polyfills() {
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
+const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   children,
   style,
   gl,
@@ -258,8 +259,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const [fiber, setFiber] = React__namespace.useState(null);
-  const Bridge = index.useContextBridge(fiber);
+  const Bridge = itsFine.useContextBridge();
   const [{
     width,
     height,
@@ -370,9 +370,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       return () => index.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(index.FiberProvider, {
-    setFiber: setFiber
-  }, /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
+  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
     ref: viewRef,
     onLayout: onLayout,
     style: {
@@ -382,6 +380,16 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
     onContextCreate: onContextCreate,
     style: reactNative.StyleSheet.absoluteFill
+  }));
+});
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+
+const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
   })));
 });