@react-three/fiber 8.8.0 → 8.8.1

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

@@ -1,10 +1,11 @@
-import { c as createEvents, e as extend, u as useContextBridge, a as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, f as unmountComponentAtNode, F as FiberProvider } from '../../dist/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, 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 '../../dist/index-f01196c6.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/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, 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 '../../dist/index-80784ca9.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PixelRatio, View, StyleSheet } from 'react-native';
 import { GLView } from 'expo-gl';
+import { FiberProvider, useContextBridge } from 'its-fine';
 import Pressability from 'react-native/Libraries/Pressability/Pressability';
 import 'react-reconciler/constants';
 import 'zustand';
@@ -209,7 +210,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.forwardRef(({
+const CanvasImpl = /*#__PURE__*/React.forwardRef(({
   children,
   style,
   gl,
@@ -231,8 +232,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   // 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 [{
     width,
     height,
@@ -343,9 +343,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
       return () => unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React.createElement(FiberProvider, {
-    setFiber: setFiber
-  }, /*#__PURE__*/React.createElement(View, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(View, _extends({}, props, {
     ref: viewRef,
     onLayout: onLayout,
     style: {
@@ -355,6 +353,16 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
     onContextCreate: onContextCreate,
     style: 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.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
   })));
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.8.0",
+  "version": "8.8.1",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -44,6 +44,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.8",
     "@types/react-reconciler": "^0.26.7",
+    "its-fine": "^1.0.0",
     "react-reconciler": "^0.27.0",
     "react-use-measure": "^2.1.1",
     "scheduler": "^0.21.0",