@react-three/fiber 7.0.25 → 7.0.26

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 7.0.26
+
+### Patch Changes
+
+- ccda644: passthrough size via raycaster#computeOffsets
+
 ## 7.0.25
 
 ### Patch Changes

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

@@ -90,6 +90,8 @@ export declare type FilterFunction = (items: THREE.Intersection[], state: RootSt
 export declare type ComputeOffsetsFunction = (event: any, state: RootState) => {
     offsetX: number;
     offsetY: number;
+    width?: number;
+    height?: number;
 };
 export declare type StoreProps = {
     gl: THREE.WebGLRenderer;

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

@@ -114,7 +114,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -125,14 +125,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }

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

@@ -114,7 +114,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -125,14 +125,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }

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

@@ -81,7 +81,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -92,14 +92,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }

package/native/dist/react-three-fiber-native.cjs.d.ts

@@ -1,11 +1 @@
-// are you seeing an error that a default export doesn't exist but your source file has a default export?
-// you should run `yarn` or `yarn preconstruct dev` if preconstruct dev isn't in your postinstall hook
-
-// curious why you need to?
-// this file exists so that you can import from the entrypoint normally
-// except that it points to your source file and you don't need to run build constantly
-// which means we need to re-export all of the modules from your source file
-// and since export * doesn't include default exports, we need to read your source file
-// to check for a default export and re-export it if it exists
-// it's not ideal, but it works pretty well ¯\_(ツ)_/¯
-export * from "../../src/native";
+export * from "../../dist/declarations/src/native";

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

@@ -0,0 +1,358 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var THREE = require('three');
+var expoAsset = require('expo-asset');
+var index = require('../../dist/index-95c17855.cjs.dev.js');
+var _extends = require('@babel/runtime/helpers/extends');
+var React = require('react');
+var reactNative = require('react-native');
+var expoGl = require('expo-gl');
+var Pressability = require('react-native/Libraries/Pressability/Pressability');
+require('suspend-react');
+require('react-reconciler/constants');
+require('zustand');
+require('react-reconciler');
+require('scheduler');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n['default'] = e;
+  return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
+
+const EVENTS = {
+  PRESS: 'onPress',
+  PRESSIN: 'onPressIn',
+  PRESSOUT: 'onPressOut',
+  LONGPRESS: 'onLongPress',
+  HOVERIN: 'onHoverIn',
+  HOVEROUT: 'onHoverOut',
+  PRESSMOVE: 'onPressMove'
+};
+const DOM_EVENTS = {
+  [EVENTS.PRESS]: 'onClick',
+  [EVENTS.PRESSIN]: 'onPointerDown',
+  [EVENTS.PRESSOUT]: 'onPointerUp',
+  [EVENTS.LONGPRESS]: 'onDoubleClick',
+  [EVENTS.HOVERIN]: 'onPointerOver',
+  [EVENTS.HOVEROUT]: 'onPointerOut',
+  [EVENTS.PRESSMOVE]: 'onPointerMove'
+};
+function createTouchEvents(store) {
+  const {
+    handlePointer
+  } = index.createEvents(store);
+
+  const handleTouch = (event, name) => {
+    event.persist() // Apply offset
+    ;
+    event.nativeEvent.offsetX = event.nativeEvent.locationX;
+    event.nativeEvent.offsetY = event.nativeEvent.locationY; // Emulate DOM event
+
+    const callback = handlePointer(DOM_EVENTS[name]);
+    return callback(event.nativeEvent);
+  };
+
+  return {
+    connected: false,
+    handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
+      [name]: event => handleTouch(event, name)
+    }), {}),
+    connect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      const connected = new Pressability__default['default'](events == null ? void 0 : events.handlers);
+      set(state => ({
+        events: { ...state.events,
+          connected
+        }
+      }));
+      const handlers = connected.getEventHandlers();
+      return handlers;
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+
+      if (events.connected) {
+        events.connected.reset();
+        set(state => ({
+          events: { ...state.events,
+            connected: false
+          }
+        }));
+      }
+    }
+  };
+}
+
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
+
+function Block({
+  set
+}) {
+  React__namespace.useLayoutEffect(() => {
+    set(new Promise(() => null));
+    return () => set(false);
+  }, [set]);
+  return null;
+}
+
+class ErrorBoundary extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      error: false
+    };
+  }
+
+  componentDidCatch(error) {
+    this.props.set(error);
+  }
+
+  render() {
+    return this.state.error ? null : this.props.children;
+  }
+
+}
+
+ErrorBoundary.getDerivedStateFromError = () => ({
+  error: true
+});
+
+const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
+  children,
+  fallback,
+  style,
+  events,
+  ...props
+}, forwardedRef) => {
+  // Create a known catalogue of Threejs-native elements
+  // 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 [{
+    width,
+    height
+  }, setSize] = React__namespace.useState({
+    width: 0,
+    height: 0
+  });
+  const [canvas, setCanvas] = React__namespace.useState(null);
+  const [bind, setBind] = React__namespace.useState();
+  const canvasProps = index.pick(props, CANVAS_PROPS);
+  const viewProps = index.omit(props, CANVAS_PROPS);
+  const [block, setBlock] = React__namespace.useState(false);
+  const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
+
+  if (block) throw block; // Throw exception outwards if anything within canvas throws
+
+  if (error) throw error;
+  const onLayout = React__namespace.useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setSize({
+      width,
+      height
+    });
+  }, []);
+  const onContextCreate = React__namespace.useCallback(context => {
+    const canvasShim = {
+      width: context.drawingBufferWidth,
+      height: context.drawingBufferHeight,
+      style: {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      clientHeight: context.drawingBufferHeight,
+      getContext: () => context
+    };
+    setCanvas(canvasShim);
+  }, []);
+
+  if (width > 0 && height > 0 && canvas) {
+    // Overwrite onCreated to apply RN bindings
+    const onCreated = state => {
+      // Bind events after creation
+      const handlers = state.events.connect == null ? void 0 : state.events.connect(canvas);
+      setBind(handlers); // Bind render to RN bridge
+
+      const context = state.gl.getContext();
+      const renderFrame = state.gl.render.bind(state.gl);
+
+      state.gl.render = (scene, camera) => {
+        renderFrame(scene, camera);
+        context.endFrameEXP();
+      };
+
+      return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
+    };
+
+    index.createRoot(canvas, { ...canvasProps,
+      // expo-gl can only render at native dpr/resolution
+      // https://github.com/expo/expo-three/issues/39
+      dpr: reactNative.PixelRatio.get(),
+      size: {
+        width,
+        height
+      },
+      events: events || createTouchEvents,
+      onCreated
+    }).render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
+      set: setError
+    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
+      fallback: /*#__PURE__*/React__namespace.createElement(Block, {
+        set: setBlock
+      })
+    }, children)));
+  }
+
+  React__namespace.useEffect(() => {
+    return () => index.unmountComponentAtNode(canvas);
+  }, [canvas]);
+  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
+    ref: forwardedRef,
+    onLayout: onLayout,
+    style: {
+      flex: 1,
+      ...style
+    }
+  }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
+    onContextCreate: onContextCreate,
+    style: reactNative.StyleSheet.absoluteFill
+  }));
+});
+
+/**
+ * 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
+
+
+THREE__namespace.LoaderUtils.extractUrlBase = () => './'; // 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-expect-error
+
+  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;
+exports.addAfterEffect = index.addAfterEffect;
+exports.addEffect = index.addEffect;
+exports.addTail = index.addTail;
+exports.advance = index.advance;
+exports.applyProps = index.applyProps;
+exports.context = index.context;
+exports.createPortal = index.createPortal;
+exports.createRoot = index.createRoot;
+exports.dispose = index.dispose;
+exports.extend = index.extend;
+exports.invalidate = index.invalidate;
+exports.reconciler = index.reconciler;
+exports.render = index.render;
+exports.unmountComponentAtNode = index.unmountComponentAtNode;
+exports.useFrame = index.useFrame;
+exports.useGraph = index.useGraph;
+exports.useLoader = index.useLoader;
+exports.useStore = index.useStore;
+exports.useThree = index.useThree;
+exports.Canvas = Canvas;
+exports.events = createTouchEvents;

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

@@ -1,16 +1,7 @@
-"use strict";
-// this file might look strange and you might be wondering what it's for
-// it's lets you import your source files by importing this entrypoint
-// as you would import it if it was built with preconstruct build
-// this file is slightly different to some others though
-// it has a require hook which compiles your code with Babel
-// this means that you don't have to set up @babel/register or anything like that
-// but you can still require this module and it'll be compiled
+'use strict';
 
-// this bit of code imports the require hook and registers it
-let unregister = require("../../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../../..", "../..");
-
-// this re-exports the source file
-module.exports = require("../../src/native.tsx");
-
-unregister();
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./react-three-fiber-native.cjs.prod.js");
+} else {
+  module.exports = require("./react-three-fiber-native.cjs.dev.js");
+}

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

@@ -0,0 +1,358 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var THREE = require('three');
+var expoAsset = require('expo-asset');
+var index = require('../../dist/index-ff8b5912.cjs.prod.js');
+var _extends = require('@babel/runtime/helpers/extends');
+var React = require('react');
+var reactNative = require('react-native');
+var expoGl = require('expo-gl');
+var Pressability = require('react-native/Libraries/Pressability/Pressability');
+require('suspend-react');
+require('react-reconciler/constants');
+require('zustand');
+require('react-reconciler');
+require('scheduler');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n['default'] = e;
+  return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
+
+const EVENTS = {
+  PRESS: 'onPress',
+  PRESSIN: 'onPressIn',
+  PRESSOUT: 'onPressOut',
+  LONGPRESS: 'onLongPress',
+  HOVERIN: 'onHoverIn',
+  HOVEROUT: 'onHoverOut',
+  PRESSMOVE: 'onPressMove'
+};
+const DOM_EVENTS = {
+  [EVENTS.PRESS]: 'onClick',
+  [EVENTS.PRESSIN]: 'onPointerDown',
+  [EVENTS.PRESSOUT]: 'onPointerUp',
+  [EVENTS.LONGPRESS]: 'onDoubleClick',
+  [EVENTS.HOVERIN]: 'onPointerOver',
+  [EVENTS.HOVEROUT]: 'onPointerOut',
+  [EVENTS.PRESSMOVE]: 'onPointerMove'
+};
+function createTouchEvents(store) {
+  const {
+    handlePointer
+  } = index.createEvents(store);
+
+  const handleTouch = (event, name) => {
+    event.persist() // Apply offset
+    ;
+    event.nativeEvent.offsetX = event.nativeEvent.locationX;
+    event.nativeEvent.offsetY = event.nativeEvent.locationY; // Emulate DOM event
+
+    const callback = handlePointer(DOM_EVENTS[name]);
+    return callback(event.nativeEvent);
+  };
+
+  return {
+    connected: false,
+    handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
+      [name]: event => handleTouch(event, name)
+    }), {}),
+    connect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      const connected = new Pressability__default['default'](events == null ? void 0 : events.handlers);
+      set(state => ({
+        events: { ...state.events,
+          connected
+        }
+      }));
+      const handlers = connected.getEventHandlers();
+      return handlers;
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+
+      if (events.connected) {
+        events.connected.reset();
+        set(state => ({
+          events: { ...state.events,
+            connected: false
+          }
+        }));
+      }
+    }
+  };
+}
+
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
+
+function Block({
+  set
+}) {
+  React__namespace.useLayoutEffect(() => {
+    set(new Promise(() => null));
+    return () => set(false);
+  }, [set]);
+  return null;
+}
+
+class ErrorBoundary extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      error: false
+    };
+  }
+
+  componentDidCatch(error) {
+    this.props.set(error);
+  }
+
+  render() {
+    return this.state.error ? null : this.props.children;
+  }
+
+}
+
+ErrorBoundary.getDerivedStateFromError = () => ({
+  error: true
+});
+
+const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
+  children,
+  fallback,
+  style,
+  events,
+  ...props
+}, forwardedRef) => {
+  // Create a known catalogue of Threejs-native elements
+  // 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 [{
+    width,
+    height
+  }, setSize] = React__namespace.useState({
+    width: 0,
+    height: 0
+  });
+  const [canvas, setCanvas] = React__namespace.useState(null);
+  const [bind, setBind] = React__namespace.useState();
+  const canvasProps = index.pick(props, CANVAS_PROPS);
+  const viewProps = index.omit(props, CANVAS_PROPS);
+  const [block, setBlock] = React__namespace.useState(false);
+  const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
+
+  if (block) throw block; // Throw exception outwards if anything within canvas throws
+
+  if (error) throw error;
+  const onLayout = React__namespace.useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setSize({
+      width,
+      height
+    });
+  }, []);
+  const onContextCreate = React__namespace.useCallback(context => {
+    const canvasShim = {
+      width: context.drawingBufferWidth,
+      height: context.drawingBufferHeight,
+      style: {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      clientHeight: context.drawingBufferHeight,
+      getContext: () => context
+    };
+    setCanvas(canvasShim);
+  }, []);
+
+  if (width > 0 && height > 0 && canvas) {
+    // Overwrite onCreated to apply RN bindings
+    const onCreated = state => {
+      // Bind events after creation
+      const handlers = state.events.connect == null ? void 0 : state.events.connect(canvas);
+      setBind(handlers); // Bind render to RN bridge
+
+      const context = state.gl.getContext();
+      const renderFrame = state.gl.render.bind(state.gl);
+
+      state.gl.render = (scene, camera) => {
+        renderFrame(scene, camera);
+        context.endFrameEXP();
+      };
+
+      return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
+    };
+
+    index.createRoot(canvas, { ...canvasProps,
+      // expo-gl can only render at native dpr/resolution
+      // https://github.com/expo/expo-three/issues/39
+      dpr: reactNative.PixelRatio.get(),
+      size: {
+        width,
+        height
+      },
+      events: events || createTouchEvents,
+      onCreated
+    }).render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
+      set: setError
+    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
+      fallback: /*#__PURE__*/React__namespace.createElement(Block, {
+        set: setBlock
+      })
+    }, children)));
+  }
+
+  React__namespace.useEffect(() => {
+    return () => index.unmountComponentAtNode(canvas);
+  }, [canvas]);
+  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
+    ref: forwardedRef,
+    onLayout: onLayout,
+    style: {
+      flex: 1,
+      ...style
+    }
+  }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
+    onContextCreate: onContextCreate,
+    style: reactNative.StyleSheet.absoluteFill
+  }));
+});
+
+/**
+ * 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
+
+
+THREE__namespace.LoaderUtils.extractUrlBase = () => './'; // 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-expect-error
+
+  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;
+exports.addAfterEffect = index.addAfterEffect;
+exports.addEffect = index.addEffect;
+exports.addTail = index.addTail;
+exports.advance = index.advance;
+exports.applyProps = index.applyProps;
+exports.context = index.context;
+exports.createPortal = index.createPortal;
+exports.createRoot = index.createRoot;
+exports.dispose = index.dispose;
+exports.extend = index.extend;
+exports.invalidate = index.invalidate;
+exports.reconciler = index.reconciler;
+exports.render = index.render;
+exports.unmountComponentAtNode = index.unmountComponentAtNode;
+exports.useFrame = index.useFrame;
+exports.useGraph = index.useGraph;
+exports.useLoader = index.useLoader;
+exports.useStore = index.useStore;
+exports.useThree = index.useThree;
+exports.Canvas = Canvas;
+exports.events = createTouchEvents;

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

@@ -0,0 +1,306 @@
+import * as THREE from 'three';
+import { Asset } from 'expo-asset';
+import { c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from '../../dist/index-3f4e5f46.esm.js';
+export { t as ReactThreeFiber, q as _roots, n as act, l as addAfterEffect, k as addEffect, m as addTail, j as advance, g as applyProps, b as context, d as createPortal, a as createRoot, h as dispose, e as extend, i as invalidate, f as reconciler, r as render, u as unmountComponentAtNode, w as useFrame, x as useGraph, y as useLoader, s as useStore, v as useThree } from '../../dist/index-3f4e5f46.esm.js';
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { PixelRatio, View, StyleSheet } from 'react-native';
+import { GLView } from 'expo-gl';
+import Pressability from 'react-native/Libraries/Pressability/Pressability';
+import 'suspend-react';
+import 'react-reconciler/constants';
+import 'zustand';
+import 'react-reconciler';
+import 'scheduler';
+
+const EVENTS = {
+  PRESS: 'onPress',
+  PRESSIN: 'onPressIn',
+  PRESSOUT: 'onPressOut',
+  LONGPRESS: 'onLongPress',
+  HOVERIN: 'onHoverIn',
+  HOVEROUT: 'onHoverOut',
+  PRESSMOVE: 'onPressMove'
+};
+const DOM_EVENTS = {
+  [EVENTS.PRESS]: 'onClick',
+  [EVENTS.PRESSIN]: 'onPointerDown',
+  [EVENTS.PRESSOUT]: 'onPointerUp',
+  [EVENTS.LONGPRESS]: 'onDoubleClick',
+  [EVENTS.HOVERIN]: 'onPointerOver',
+  [EVENTS.HOVEROUT]: 'onPointerOut',
+  [EVENTS.PRESSMOVE]: 'onPointerMove'
+};
+function createTouchEvents(store) {
+  const {
+    handlePointer
+  } = createEvents(store);
+
+  const handleTouch = (event, name) => {
+    event.persist() // Apply offset
+    ;
+    event.nativeEvent.offsetX = event.nativeEvent.locationX;
+    event.nativeEvent.offsetY = event.nativeEvent.locationY; // Emulate DOM event
+
+    const callback = handlePointer(DOM_EVENTS[name]);
+    return callback(event.nativeEvent);
+  };
+
+  return {
+    connected: false,
+    handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
+      [name]: event => handleTouch(event, name)
+    }), {}),
+    connect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      const connected = new Pressability(events == null ? void 0 : events.handlers);
+      set(state => ({
+        events: { ...state.events,
+          connected
+        }
+      }));
+      const handlers = connected.getEventHandlers();
+      return handlers;
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+
+      if (events.connected) {
+        events.connected.reset();
+        set(state => ({
+          events: { ...state.events,
+            connected: false
+          }
+        }));
+      }
+    }
+  };
+}
+
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
+
+function Block({
+  set
+}) {
+  React.useLayoutEffect(() => {
+    set(new Promise(() => null));
+    return () => set(false);
+  }, [set]);
+  return null;
+}
+
+class ErrorBoundary extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      error: false
+    };
+  }
+
+  componentDidCatch(error) {
+    this.props.set(error);
+  }
+
+  render() {
+    return this.state.error ? null : this.props.children;
+  }
+
+}
+
+ErrorBoundary.getDerivedStateFromError = () => ({
+  error: true
+});
+
+const Canvas = /*#__PURE__*/React.forwardRef(({
+  children,
+  fallback,
+  style,
+  events,
+  ...props
+}, forwardedRef) => {
+  // Create a known catalogue of Threejs-native elements
+  // 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 [{
+    width,
+    height
+  }, setSize] = React.useState({
+    width: 0,
+    height: 0
+  });
+  const [canvas, setCanvas] = React.useState(null);
+  const [bind, setBind] = React.useState();
+  const canvasProps = pick(props, CANVAS_PROPS);
+  const viewProps = omit(props, CANVAS_PROPS);
+  const [block, setBlock] = React.useState(false);
+  const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
+
+  if (block) throw block; // Throw exception outwards if anything within canvas throws
+
+  if (error) throw error;
+  const onLayout = React.useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setSize({
+      width,
+      height
+    });
+  }, []);
+  const onContextCreate = React.useCallback(context => {
+    const canvasShim = {
+      width: context.drawingBufferWidth,
+      height: context.drawingBufferHeight,
+      style: {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      clientHeight: context.drawingBufferHeight,
+      getContext: () => context
+    };
+    setCanvas(canvasShim);
+  }, []);
+
+  if (width > 0 && height > 0 && canvas) {
+    // Overwrite onCreated to apply RN bindings
+    const onCreated = state => {
+      // Bind events after creation
+      const handlers = state.events.connect == null ? void 0 : state.events.connect(canvas);
+      setBind(handlers); // Bind render to RN bridge
+
+      const context = state.gl.getContext();
+      const renderFrame = state.gl.render.bind(state.gl);
+
+      state.gl.render = (scene, camera) => {
+        renderFrame(scene, camera);
+        context.endFrameEXP();
+      };
+
+      return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
+    };
+
+    createRoot(canvas, { ...canvasProps,
+      // expo-gl can only render at native dpr/resolution
+      // https://github.com/expo/expo-three/issues/39
+      dpr: PixelRatio.get(),
+      size: {
+        width,
+        height
+      },
+      events: events || createTouchEvents,
+      onCreated
+    }).render( /*#__PURE__*/React.createElement(ErrorBoundary, {
+      set: setError
+    }, /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React.createElement(Block, {
+        set: setBlock
+      })
+    }, children)));
+  }
+
+  React.useEffect(() => {
+    return () => unmountComponentAtNode(canvas);
+  }, [canvas]);
+  return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
+    ref: forwardedRef,
+    onLayout: onLayout,
+    style: {
+      flex: 1,
+      ...style
+    }
+  }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
+    onContextCreate: onContextCreate,
+    style: StyleSheet.absoluteFill
+  }));
+});
+
+/**
+ * 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
+
+
+THREE.LoaderUtils.extractUrlBase = () => './'; // 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-expect-error
+
+  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": "7.0.25",
+  "version": "7.0.26",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",