@react-three/fiber 8.0.16 → 8.0.17

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.0.17
+
+### Patch Changes
+
+- 9e3369e: fix dom resize, improve native tree shaking
+
 ## 8.0.16
 
 ### Patch Changes

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

@@ -0,0 +1 @@
+export declare function polyfills(): (() => void) | undefined;

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

@@ -6,7 +6,6 @@ var index = require('./index-f3176a33.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
-var mergeRefs = require('react-merge-refs');
 var useMeasure = require('react-use-measure');
 require('react-reconciler/constants');
 require('zustand');
@@ -36,7 +35,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
 
 const DOM_EVENTS = {
@@ -158,8 +156,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React__namespace.useRef(null);
-  const meshRef = React__namespace.useRef(null);
+  const divRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
+  React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -191,7 +190,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -211,7 +210,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     if (canvas) return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: mergeRefs__default["default"]([meshRef, containerRef]),
+    ref: divRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -219,12 +218,18 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React__namespace.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__namespace.createElement("canvas", {
+    ref: canvasRef,
     style: {
       display: 'block'
     }
-  }, fallback));
+  }, fallback)));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -6,7 +6,6 @@ var index = require('./index-4e1c76e5.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
-var mergeRefs = require('react-merge-refs');
 var useMeasure = require('react-use-measure');
 require('react-reconciler/constants');
 require('zustand');
@@ -36,7 +35,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
 
 const DOM_EVENTS = {
@@ -158,8 +156,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React__namespace.useRef(null);
-  const meshRef = React__namespace.useRef(null);
+  const divRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
+  React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -191,7 +190,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -211,7 +210,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     if (canvas) return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: mergeRefs__default["default"]([meshRef, containerRef]),
+    ref: divRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -219,12 +218,18 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React__namespace.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__namespace.createElement("canvas", {
+    ref: canvasRef,
     style: {
       display: 'block'
     }
-  }, fallback));
+  }, fallback)));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -3,7 +3,6 @@ export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
-import mergeRefs from 'react-merge-refs';
 import useMeasure from 'react-use-measure';
 import 'react-reconciler/constants';
 import 'zustand';
@@ -130,8 +129,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React.useRef(null);
-  const meshRef = React.useRef(null);
+  const divRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
+  React.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -163,7 +163,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -183,7 +183,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     if (canvas) return () => unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: mergeRefs([meshRef, containerRef]),
+    ref: divRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -191,12 +191,18 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, props), /*#__PURE__*/React.createElement("canvas", {
-    ref: mergeRefs([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
     style: {
       display: 'block'
     }
-  }, fallback));
+  }, fallback)));
 });
 
 export { Canvas, createPointerEvents as events };

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

@@ -2,12 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var THREE = require('three');
-var expoAsset = require('expo-asset');
 var index = require('../../dist/index-f3176a33.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
-var mergeRefs = require('react-merge-refs');
+var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var Pressability = require('react-native/Libraries/Pressability/Pressability');
@@ -37,9 +35,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
 
 const EVENTS = {
@@ -125,6 +122,114 @@ function createTouchEvents(store) {
   };
 }
 
+// Check if expo-asset is installed (available with expo modules)
+let expAsset;
+
+try {
+  var _require;
+
+  expAsset = (_require = require('expo-asset')) == null ? void 0 : _require.Asset;
+} catch (_) {}
+/**
+ * Generates an asset based on input type.
+ */
+
+
+function getAsset(input) {
+  switch (typeof input) {
+    case 'string':
+      return expAsset.fromURI(input);
+
+    case 'number':
+      return expAsset.fromModule(input);
+
+    default:
+      throw 'Invalid asset! Must be a URI or module.';
+  }
+}
+
+let injected = false;
+function polyfills() {
+  if (!expAsset || injected) return;
+  injected = true; // Don't pre-process urls, let expo-asset generate an absolute URL
+
+  const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
+
+  THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
+
+
+  const prevTextureLoad = THREE__namespace.TextureLoader.prototype.load;
+
+  THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
+    const texture = new THREE__namespace.Texture(); // @ts-ignore
+
+    texture.isDataTexture = true;
+    getAsset(url).downloadAsync().then(asset => {
+      texture.image = {
+        data: asset,
+        width: asset.width,
+        height: asset.height
+      };
+      texture.flipY = true;
+      texture.unpackAlignment = 1;
+      texture.needsUpdate = true;
+      onLoad == null ? void 0 : onLoad(texture);
+    }).catch(onError);
+    return texture;
+  }; // Fetches assets via XMLHttpRequest
+
+
+  const prevFileLoad = THREE__namespace.FileLoader.prototype.load;
+
+  THREE__namespace.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
+    if (this.path) url = this.path + url;
+    const request = new XMLHttpRequest();
+    getAsset(url).downloadAsync().then(asset => {
+      request.open('GET', asset.uri, true);
+      request.addEventListener('load', event => {
+        if (request.status === 200) {
+          onLoad == null ? void 0 : onLoad(request.response);
+          this.manager.itemEnd(url);
+        } else {
+          onError == null ? void 0 : onError(event);
+          this.manager.itemError(url);
+          this.manager.itemEnd(url);
+        }
+      }, false);
+      request.addEventListener('progress', event => {
+        onProgress == null ? void 0 : onProgress(event);
+      }, false);
+      request.addEventListener('error', event => {
+        onError == null ? void 0 : onError(event);
+        this.manager.itemError(url);
+        this.manager.itemEnd(url);
+      }, false);
+      request.addEventListener('abort', event => {
+        onError == null ? void 0 : onError(event);
+        this.manager.itemError(url);
+        this.manager.itemEnd(url);
+      }, false);
+      if (this.responseType) request.responseType = this.responseType;
+      if (this.withCredentials) request.withCredentials = this.withCredentials;
+
+      for (const header in this.requestHeader) {
+        request.setRequestHeader(header, this.requestHeader[header]);
+      }
+
+      request.send(null);
+      this.manager.itemStart(url);
+    });
+    return request;
+  }; // Cleanup function
+
+
+  return () => {
+    THREE__namespace.LoaderUtils.extractUrlBase = extractUrlBase;
+    THREE__namespace.TextureLoader.prototype.load = prevTextureLoad;
+    THREE__namespace.FileLoader.prototype.load = prevFileLoad;
+  };
+}
+
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
@@ -160,6 +265,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
+  React__namespace.useImperativeHandle(forwardedRef, () => viewRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -168,7 +274,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
 
   if (error) throw error;
   const viewRef = React__namespace.useRef(null);
-  const root = React__namespace.useRef(null);
+  const root = React__namespace.useRef(null); // Inject and cleanup RN polyfills if able
+
+  React__namespace.useLayoutEffect(() => polyfills(), []);
   const onLayout = React__namespace.useCallback(e => {
     const {
       width,
@@ -247,7 +355,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     }
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
-    ref: mergeRefs__default["default"]([viewRef, forwardedRef]),
+    ref: viewRef,
     onLayout: onLayout,
     style: {
       flex: 1,
@@ -259,89 +367,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }));
 });
 
-/**
- * Generates an asset based on input type.
- */
-
-const getAsset = input => {
-  if (input instanceof expoAsset.Asset) return input;
-
-  switch (typeof input) {
-    case 'string':
-      return expoAsset.Asset.fromURI(input);
-
-    case 'number':
-      return expoAsset.Asset.fromModule(input);
-
-    default:
-      throw 'Invalid asset! Must be a URI or module.';
-  }
-}; // Don't pre-process urls, let expo-asset generate an absolute URL
-
-
-const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
-
-THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
-
-
-THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
-  const texture = new THREE__namespace.Texture(); // @ts-ignore
-
-  texture.isDataTexture = true;
-  getAsset(url).downloadAsync().then(asset => {
-    texture.image = {
-      data: asset,
-      width: asset.width,
-      height: asset.height
-    };
-    texture.needsUpdate = true;
-    onLoad == null ? void 0 : onLoad(texture);
-  }).catch(onError);
-  return texture;
-}; // Fetches assets via XMLHttpRequest
-
-
-THREE__namespace.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
-  if (this.path) url = this.path + url;
-  const request = new XMLHttpRequest();
-  getAsset(url).downloadAsync().then(asset => {
-    request.open('GET', asset.uri, true);
-    request.addEventListener('load', event => {
-      if (request.status === 200) {
-        onLoad == null ? void 0 : onLoad(request.response);
-        this.manager.itemEnd(url);
-      } else {
-        onError == null ? void 0 : onError(event);
-        this.manager.itemError(url);
-        this.manager.itemEnd(url);
-      }
-    }, false);
-    request.addEventListener('progress', event => {
-      onProgress == null ? void 0 : onProgress(event);
-    }, false);
-    request.addEventListener('error', event => {
-      onError == null ? void 0 : onError(event);
-      this.manager.itemError(url);
-      this.manager.itemEnd(url);
-    }, false);
-    request.addEventListener('abort', event => {
-      onError == null ? void 0 : onError(event);
-      this.manager.itemError(url);
-      this.manager.itemEnd(url);
-    }, false);
-    if (this.responseType) request.responseType = this.responseType;
-    if (this.withCredentials) request.withCredentials = this.withCredentials;
-
-    for (const header in this.requestHeader) {
-      request.setRequestHeader(header, this.requestHeader[header]);
-    }
-
-    request.send(null);
-    this.manager.itemStart(url);
-  });
-  return request;
-};
-
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;
 exports.act = index.act;

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

@@ -2,12 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var THREE = require('three');
-var expoAsset = require('expo-asset');
 var index = require('../../dist/index-4e1c76e5.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
-var mergeRefs = require('react-merge-refs');
+var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var Pressability = require('react-native/Libraries/Pressability/Pressability');
@@ -37,9 +35,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
 
 const EVENTS = {
@@ -125,6 +122,114 @@ function createTouchEvents(store) {
   };
 }
 
+// Check if expo-asset is installed (available with expo modules)
+let expAsset;
+
+try {
+  var _require;
+
+  expAsset = (_require = require('expo-asset')) == null ? void 0 : _require.Asset;
+} catch (_) {}
+/**
+ * Generates an asset based on input type.
+ */
+
+
+function getAsset(input) {
+  switch (typeof input) {
+    case 'string':
+      return expAsset.fromURI(input);
+
+    case 'number':
+      return expAsset.fromModule(input);
+
+    default:
+      throw 'Invalid asset! Must be a URI or module.';
+  }
+}
+
+let injected = false;
+function polyfills() {
+  if (!expAsset || injected) return;
+  injected = true; // Don't pre-process urls, let expo-asset generate an absolute URL
+
+  const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
+
+  THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
+
+
+  const prevTextureLoad = THREE__namespace.TextureLoader.prototype.load;
+
+  THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
+    const texture = new THREE__namespace.Texture(); // @ts-ignore
+
+    texture.isDataTexture = true;
+    getAsset(url).downloadAsync().then(asset => {
+      texture.image = {
+        data: asset,
+        width: asset.width,
+        height: asset.height
+      };
+      texture.flipY = true;
+      texture.unpackAlignment = 1;
+      texture.needsUpdate = true;
+      onLoad == null ? void 0 : onLoad(texture);
+    }).catch(onError);
+    return texture;
+  }; // Fetches assets via XMLHttpRequest
+
+
+  const prevFileLoad = THREE__namespace.FileLoader.prototype.load;
+
+  THREE__namespace.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
+    if (this.path) url = this.path + url;
+    const request = new XMLHttpRequest();
+    getAsset(url).downloadAsync().then(asset => {
+      request.open('GET', asset.uri, true);
+      request.addEventListener('load', event => {
+        if (request.status === 200) {
+          onLoad == null ? void 0 : onLoad(request.response);
+          this.manager.itemEnd(url);
+        } else {
+          onError == null ? void 0 : onError(event);
+          this.manager.itemError(url);
+          this.manager.itemEnd(url);
+        }
+      }, false);
+      request.addEventListener('progress', event => {
+        onProgress == null ? void 0 : onProgress(event);
+      }, false);
+      request.addEventListener('error', event => {
+        onError == null ? void 0 : onError(event);
+        this.manager.itemError(url);
+        this.manager.itemEnd(url);
+      }, false);
+      request.addEventListener('abort', event => {
+        onError == null ? void 0 : onError(event);
+        this.manager.itemError(url);
+        this.manager.itemEnd(url);
+      }, false);
+      if (this.responseType) request.responseType = this.responseType;
+      if (this.withCredentials) request.withCredentials = this.withCredentials;
+
+      for (const header in this.requestHeader) {
+        request.setRequestHeader(header, this.requestHeader[header]);
+      }
+
+      request.send(null);
+      this.manager.itemStart(url);
+    });
+    return request;
+  }; // Cleanup function
+
+
+  return () => {
+    THREE__namespace.LoaderUtils.extractUrlBase = extractUrlBase;
+    THREE__namespace.TextureLoader.prototype.load = prevTextureLoad;
+    THREE__namespace.FileLoader.prototype.load = prevFileLoad;
+  };
+}
+
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
@@ -160,6 +265,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
+  React__namespace.useImperativeHandle(forwardedRef, () => viewRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -168,7 +274,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
 
   if (error) throw error;
   const viewRef = React__namespace.useRef(null);
-  const root = React__namespace.useRef(null);
+  const root = React__namespace.useRef(null); // Inject and cleanup RN polyfills if able
+
+  React__namespace.useLayoutEffect(() => polyfills(), []);
   const onLayout = React__namespace.useCallback(e => {
     const {
       width,
@@ -247,7 +355,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     }
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
-    ref: mergeRefs__default["default"]([viewRef, forwardedRef]),
+    ref: viewRef,
     onLayout: onLayout,
     style: {
       flex: 1,
@@ -259,89 +367,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }));
 });
 
-/**
- * Generates an asset based on input type.
- */
-
-const getAsset = input => {
-  if (input instanceof expoAsset.Asset) return input;
-
-  switch (typeof input) {
-    case 'string':
-      return expoAsset.Asset.fromURI(input);
-
-    case 'number':
-      return expoAsset.Asset.fromModule(input);
-
-    default:
-      throw 'Invalid asset! Must be a URI or module.';
-  }
-}; // Don't pre-process urls, let expo-asset generate an absolute URL
-
-
-const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
-
-THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
-
-
-THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
-  const texture = new THREE__namespace.Texture(); // @ts-ignore
-
-  texture.isDataTexture = true;
-  getAsset(url).downloadAsync().then(asset => {
-    texture.image = {
-      data: asset,
-      width: asset.width,
-      height: asset.height
-    };
-    texture.needsUpdate = true;
-    onLoad == null ? void 0 : onLoad(texture);
-  }).catch(onError);
-  return texture;
-}; // Fetches assets via XMLHttpRequest
-
-
-THREE__namespace.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
-  if (this.path) url = this.path + url;
-  const request = new XMLHttpRequest();
-  getAsset(url).downloadAsync().then(asset => {
-    request.open('GET', asset.uri, true);
-    request.addEventListener('load', event => {
-      if (request.status === 200) {
-        onLoad == null ? void 0 : onLoad(request.response);
-        this.manager.itemEnd(url);
-      } else {
-        onError == null ? void 0 : onError(event);
-        this.manager.itemError(url);
-        this.manager.itemEnd(url);
-      }
-    }, false);
-    request.addEventListener('progress', event => {
-      onProgress == null ? void 0 : onProgress(event);
-    }, false);
-    request.addEventListener('error', event => {
-      onError == null ? void 0 : onError(event);
-      this.manager.itemError(url);
-      this.manager.itemEnd(url);
-    }, false);
-    request.addEventListener('abort', event => {
-      onError == null ? void 0 : onError(event);
-      this.manager.itemError(url);
-      this.manager.itemEnd(url);
-    }, false);
-    if (this.responseType) request.responseType = this.responseType;
-    if (this.withCredentials) request.withCredentials = this.withCredentials;
-
-    for (const header in this.requestHeader) {
-      request.setRequestHeader(header, this.requestHeader[header]);
-    }
-
-    request.send(null);
-    this.manager.itemStart(url);
-  });
-  return request;
-};
-
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;
 exports.act = index.act;

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

@@ -1,10 +1,8 @@
-import * as THREE from 'three';
-import { Asset } from 'expo-asset';
 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-136ca0b0.esm.js';
 export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from '../../dist/index-136ca0b0.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import mergeRefs from 'react-merge-refs';
+import * as THREE from 'three';
 import { PixelRatio, View, StyleSheet } from 'react-native';
 import { GLView } from 'expo-gl';
 import Pressability from 'react-native/Libraries/Pressability/Pressability';
@@ -97,6 +95,114 @@ function createTouchEvents(store) {
   };
 }
 
+// Check if expo-asset is installed (available with expo modules)
+let expAsset;
+
+try {
+  var _require;
+
+  expAsset = (_require = require('expo-asset')) == null ? void 0 : _require.Asset;
+} catch (_) {}
+/**
+ * Generates an asset based on input type.
+ */
+
+
+function getAsset(input) {
+  switch (typeof input) {
+    case 'string':
+      return expAsset.fromURI(input);
+
+    case 'number':
+      return expAsset.fromModule(input);
+
+    default:
+      throw 'Invalid asset! Must be a URI or module.';
+  }
+}
+
+let injected = false;
+function polyfills() {
+  if (!expAsset || injected) return;
+  injected = true; // Don't pre-process urls, let expo-asset generate an absolute URL
+
+  const extractUrlBase = THREE.LoaderUtils.extractUrlBase.bind(THREE.LoaderUtils);
+
+  THREE.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
+
+
+  const prevTextureLoad = THREE.TextureLoader.prototype.load;
+
+  THREE.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
+    const texture = new THREE.Texture(); // @ts-ignore
+
+    texture.isDataTexture = true;
+    getAsset(url).downloadAsync().then(asset => {
+      texture.image = {
+        data: asset,
+        width: asset.width,
+        height: asset.height
+      };
+      texture.flipY = true;
+      texture.unpackAlignment = 1;
+      texture.needsUpdate = true;
+      onLoad == null ? void 0 : onLoad(texture);
+    }).catch(onError);
+    return texture;
+  }; // Fetches assets via XMLHttpRequest
+
+
+  const prevFileLoad = THREE.FileLoader.prototype.load;
+
+  THREE.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
+    if (this.path) url = this.path + url;
+    const request = new XMLHttpRequest();
+    getAsset(url).downloadAsync().then(asset => {
+      request.open('GET', asset.uri, true);
+      request.addEventListener('load', event => {
+        if (request.status === 200) {
+          onLoad == null ? void 0 : onLoad(request.response);
+          this.manager.itemEnd(url);
+        } else {
+          onError == null ? void 0 : onError(event);
+          this.manager.itemError(url);
+          this.manager.itemEnd(url);
+        }
+      }, false);
+      request.addEventListener('progress', event => {
+        onProgress == null ? void 0 : onProgress(event);
+      }, false);
+      request.addEventListener('error', event => {
+        onError == null ? void 0 : onError(event);
+        this.manager.itemError(url);
+        this.manager.itemEnd(url);
+      }, false);
+      request.addEventListener('abort', event => {
+        onError == null ? void 0 : onError(event);
+        this.manager.itemError(url);
+        this.manager.itemEnd(url);
+      }, false);
+      if (this.responseType) request.responseType = this.responseType;
+      if (this.withCredentials) request.withCredentials = this.withCredentials;
+
+      for (const header in this.requestHeader) {
+        request.setRequestHeader(header, this.requestHeader[header]);
+      }
+
+      request.send(null);
+      this.manager.itemStart(url);
+    });
+    return request;
+  }; // Cleanup function
+
+
+  return () => {
+    THREE.LoaderUtils.extractUrlBase = extractUrlBase;
+    THREE.TextureLoader.prototype.load = prevTextureLoad;
+    THREE.FileLoader.prototype.load = prevFileLoad;
+  };
+}
+
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
@@ -132,6 +238,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   });
   const [canvas, setCanvas] = React.useState(null);
   const [bind, setBind] = React.useState();
+  React.useImperativeHandle(forwardedRef, () => viewRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -140,7 +247,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
 
   if (error) throw error;
   const viewRef = React.useRef(null);
-  const root = React.useRef(null);
+  const root = React.useRef(null); // Inject and cleanup RN polyfills if able
+
+  React.useLayoutEffect(() => polyfills(), []);
   const onLayout = React.useCallback(e => {
     const {
       width,
@@ -219,7 +328,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
     }
   }, [canvas]);
   return /*#__PURE__*/React.createElement(View, _extends({}, props, {
-    ref: mergeRefs([viewRef, forwardedRef]),
+    ref: viewRef,
     onLayout: onLayout,
     style: {
       flex: 1,
@@ -231,87 +340,4 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   }));
 });
 
-/**
- * Generates an asset based on input type.
- */
-
-const getAsset = input => {
-  if (input instanceof Asset) return input;
-
-  switch (typeof input) {
-    case 'string':
-      return Asset.fromURI(input);
-
-    case 'number':
-      return Asset.fromModule(input);
-
-    default:
-      throw 'Invalid asset! Must be a URI or module.';
-  }
-}; // Don't pre-process urls, let expo-asset generate an absolute URL
-
-
-const extractUrlBase = THREE.LoaderUtils.extractUrlBase.bind(THREE.LoaderUtils);
-
-THREE.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
-
-
-THREE.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
-  const texture = new THREE.Texture(); // @ts-ignore
-
-  texture.isDataTexture = true;
-  getAsset(url).downloadAsync().then(asset => {
-    texture.image = {
-      data: asset,
-      width: asset.width,
-      height: asset.height
-    };
-    texture.needsUpdate = true;
-    onLoad == null ? void 0 : onLoad(texture);
-  }).catch(onError);
-  return texture;
-}; // Fetches assets via XMLHttpRequest
-
-
-THREE.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
-  if (this.path) url = this.path + url;
-  const request = new XMLHttpRequest();
-  getAsset(url).downloadAsync().then(asset => {
-    request.open('GET', asset.uri, true);
-    request.addEventListener('load', event => {
-      if (request.status === 200) {
-        onLoad == null ? void 0 : onLoad(request.response);
-        this.manager.itemEnd(url);
-      } else {
-        onError == null ? void 0 : onError(event);
-        this.manager.itemError(url);
-        this.manager.itemEnd(url);
-      }
-    }, false);
-    request.addEventListener('progress', event => {
-      onProgress == null ? void 0 : onProgress(event);
-    }, false);
-    request.addEventListener('error', event => {
-      onError == null ? void 0 : onError(event);
-      this.manager.itemError(url);
-      this.manager.itemEnd(url);
-    }, false);
-    request.addEventListener('abort', event => {
-      onError == null ? void 0 : onError(event);
-      this.manager.itemError(url);
-      this.manager.itemEnd(url);
-    }, false);
-    if (this.responseType) request.responseType = this.responseType;
-    if (this.withCredentials) request.withCredentials = this.withCredentials;
-
-    for (const header in this.requestHeader) {
-      request.setRequestHeader(header, this.requestHeader[header]);
-    }
-
-    request.send(null);
-    this.manager.itemStart(url);
-  });
-  return request;
-};
-
 export { Canvas, createTouchEvents as events };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.16",
+  "version": "8.0.17",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -44,7 +44,6 @@
   "dependencies": {
     "@babel/runtime": "^7.17.8",
     "@types/react-reconciler": "^0.26.7",
-    "react-merge-refs": "^1.1.0",
     "react-reconciler": "^0.27.0",
     "react-use-measure": "^2.1.1",
     "scheduler": "^0.21.0",