@react-three/fiber 8.13.9 → 8.14.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.14.0
+
+### Minor Changes
+
+- 89e96bf4: feat: react-native-web, native globals fixes
+
 ## 8.13.9
 
 ### Patch Changes

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

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

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

@@ -9,15 +9,15 @@ 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');
+var expoAsset = require('expo-asset');
+var fs = require('expo-file-system');
+var base64Js = require('base64-js');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
 require('scheduler');
 require('suspend-react');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -38,28 +38,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
-
-/* eslint-enable import/default, import/no-named-as-default, import/no-named-as-default-member */
-
-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'
-};
+var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
 
 /** Default R3F event manager for react-native */
 function createTouchEvents(store) {
@@ -75,9 +54,26 @@ function createTouchEvents(store) {
     event.nativeEvent.offsetY = event.nativeEvent.locationY;
 
     // Emulate DOM event
-    const callback = handlePointer(DOM_EVENTS[name]);
-    return callback(event.nativeEvent);
+    const callback = handlePointer(name);
+    callback(event.nativeEvent);
+    return true;
   };
+  const responder = reactNative.PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponderCapture: () => true,
+    onPanResponderTerminationRequest: () => true,
+    onStartShouldSetPanResponderCapture: e => handleTouch(e, 'onPointerCapture'),
+    onPanResponderStart: e => handleTouch(e, 'onPointerDown'),
+    onPanResponderMove: e => handleTouch(e, 'onPointerMove'),
+    onPanResponderEnd: (e, state) => {
+      handleTouch(e, 'onPointerUp');
+      if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick');
+    },
+    onPanResponderRelease: e => handleTouch(e, 'onPointerLeave'),
+    onPanResponderTerminate: e => handleTouch(e, 'onLostPointerCapture'),
+    onPanResponderReject: e => handleTouch(e, 'onLostPointerCapture')
+  });
   return {
     priority: 1,
     enabled: true,
@@ -88,17 +84,16 @@ function createTouchEvents(store) {
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
     connected: undefined,
-    handlers: Object.values(EVENTS).reduce((acc, name) => ({
-      ...acc,
-      [name]: event => handleTouch(event, name)
-    }), {}),
+    handlers: responder.panHandlers,
     update: () => {
       var _internal$lastEvent;
       const {
         events,
         internal
       } = store.getState();
-      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
+      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) {
+        handlePointer('onPointerMove')(internal.lastEvent.current);
+      }
     },
     connect: () => {
       const {
@@ -106,131 +101,24 @@ function createTouchEvents(store) {
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      const connected = new Pressability__default["default"](events.handlers);
       set(state => ({
         events: {
           ...state.events,
-          connected
+          connected: true
         }
       }));
-      const handlers = connected.getEventHandlers();
-      return handlers;
     },
     disconnect: () => {
       const {
-        set,
-        events
+        set
       } = store.getState();
-      if (events.connected) {
-        events.connected.reset();
-        set(state => ({
-          events: {
-            ...state.events,
-            connected: undefined
-          }
-        }));
-      }
-    }
-  };
-}
-
-// 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 new Error('R3F: 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) {
-    if (this.path) url = this.path + url;
-    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);
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: false
         }
-      }, 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;
+      }));
+    }
   };
 }
 
@@ -286,9 +174,6 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   if (error) throw error;
   const viewRef = 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,
@@ -347,8 +232,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       // Overwrite onCreated to apply RN bindings
       onCreated: state => {
         // Bind events after creation
-        const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
-        setBind(handlers);
+        setBind(state.events.handlers);
 
         // Bind render to RN bridge
         const context = state.gl.getContext();
@@ -396,6 +280,180 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(p
   })));
 });
 
+function polyfills() {
+  // Patch Blob for ArrayBuffer if unsupported
+  try {
+    new Blob([new ArrayBuffer(4)]);
+  } catch (_) {
+    global.Blob = class extends Blob {
+      constructor(parts, options) {
+        super(parts == null ? void 0 : parts.map(part => {
+          if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
+            part = base64Js.fromByteArray(new Uint8Array(part));
+          }
+          return part;
+        }), options);
+      }
+    };
+  }
+  function uuidv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+      const r = Math.random() * 16 | 0,
+        v = c == 'x' ? r : r & 0x3 | 0x8;
+      return v.toString(16);
+    });
+  }
+  async function getAsset(input) {
+    if (typeof input === 'string') {
+      // Point to storage if preceded with fs path
+      if (input.startsWith('file:')) return {
+        localUri: input
+      };
+
+      // Unpack Blobs from react-native BlobManager
+      if (input.startsWith('blob:')) {
+        const blob = await new Promise((res, rej) => {
+          const xhr = new XMLHttpRequest();
+          xhr.open('GET', input);
+          xhr.responseType = 'blob';
+          xhr.onload = () => res(xhr.response);
+          xhr.onerror = rej;
+          xhr.send();
+        });
+        const data = await new Promise((res, rej) => {
+          const reader = new FileReader();
+          reader.onload = () => res(reader.result);
+          reader.onerror = rej;
+          reader.readAsText(blob);
+        });
+        input = `data:${blob.type};base64,${data}`;
+      }
+
+      // Create safe URI for JSI
+      if (input.startsWith('data:')) {
+        const [header, data] = input.split(',');
+        const [, type] = header.split('/');
+        const localUri = fs__namespace.cacheDirectory + uuidv4() + `.${type}`;
+        await fs__namespace.writeAsStringAsync(localUri, data, {
+          encoding: fs__namespace.EncodingType.Base64
+        });
+        return {
+          localUri
+        };
+      }
+    }
+
+    // Download bundler module or external URL
+    const asset = expoAsset.Asset.fromModule(input);
+
+    // Unpack assets in Android Release Mode
+    if (!asset.uri.includes(':')) {
+      const localUri = `${fs__namespace.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
+      await fs__namespace.copyAsync({
+        from: asset.uri,
+        to: localUri
+      });
+      return {
+        localUri
+      };
+    }
+
+    // Otherwise, resolve from registry
+    return asset.downloadAsync();
+  }
+
+  // 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) {
+    if (this.path) url = this.path + url;
+    const texture = new THREE__namespace.Texture();
+    getAsset(url).then(async asset => {
+      const uri = asset.localUri || asset.uri;
+      if (!asset.width || !asset.height) {
+        const {
+          width,
+          height
+        } = await new Promise((res, rej) => reactNative.Image.getSize(uri, (width, height) => res({
+          width,
+          height
+        }), rej));
+        asset.width = width;
+        asset.height = height;
+      }
+      texture.image = {
+        data: {
+          localUri: uri
+        },
+        width: asset.width,
+        height: asset.height
+      };
+      texture.flipY = true;
+      texture.unpackAlignment = 1;
+      texture.needsUpdate = true;
+
+      // Force non-DOM upload for EXGL fast paths
+      // @ts-ignore
+      texture.isDataTexture = true;
+      onLoad == null ? void 0 : onLoad(texture);
+    }).catch(onError);
+    return texture;
+  };
+
+  // Fetches assets via XMLHttpRequest
+  THREE__namespace.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
+    if (this.path) url = this.path + url;
+    const request = new XMLHttpRequest();
+    getAsset(url).then(async asset => {
+      let uri = asset.localUri || asset.uri;
+
+      // Make FS paths web-safe
+      if (asset.uri.startsWith('file://')) {
+        const data = await fs__namespace.readAsStringAsync(asset.uri, {
+          encoding: fs__namespace.EncodingType.Base64
+        });
+        uri = `data:application/octet-stream;base64,${data}`;
+      }
+      request.open('GET', 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);
+    }).catch(onError);
+    return request;
+  };
+}
+
+polyfills();
+
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;
 exports.act = index.act;

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

@@ -9,15 +9,15 @@ 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');
+var expoAsset = require('expo-asset');
+var fs = require('expo-file-system');
+var base64Js = require('base64-js');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
 require('scheduler');
 require('suspend-react');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -38,28 +38,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
-
-/* eslint-enable import/default, import/no-named-as-default, import/no-named-as-default-member */
-
-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'
-};
+var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
 
 /** Default R3F event manager for react-native */
 function createTouchEvents(store) {
@@ -75,9 +54,26 @@ function createTouchEvents(store) {
     event.nativeEvent.offsetY = event.nativeEvent.locationY;
 
     // Emulate DOM event
-    const callback = handlePointer(DOM_EVENTS[name]);
-    return callback(event.nativeEvent);
+    const callback = handlePointer(name);
+    callback(event.nativeEvent);
+    return true;
   };
+  const responder = reactNative.PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponderCapture: () => true,
+    onPanResponderTerminationRequest: () => true,
+    onStartShouldSetPanResponderCapture: e => handleTouch(e, 'onPointerCapture'),
+    onPanResponderStart: e => handleTouch(e, 'onPointerDown'),
+    onPanResponderMove: e => handleTouch(e, 'onPointerMove'),
+    onPanResponderEnd: (e, state) => {
+      handleTouch(e, 'onPointerUp');
+      if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick');
+    },
+    onPanResponderRelease: e => handleTouch(e, 'onPointerLeave'),
+    onPanResponderTerminate: e => handleTouch(e, 'onLostPointerCapture'),
+    onPanResponderReject: e => handleTouch(e, 'onLostPointerCapture')
+  });
   return {
     priority: 1,
     enabled: true,
@@ -88,17 +84,16 @@ function createTouchEvents(store) {
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
     connected: undefined,
-    handlers: Object.values(EVENTS).reduce((acc, name) => ({
-      ...acc,
-      [name]: event => handleTouch(event, name)
-    }), {}),
+    handlers: responder.panHandlers,
     update: () => {
       var _internal$lastEvent;
       const {
         events,
         internal
       } = store.getState();
-      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
+      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) {
+        handlePointer('onPointerMove')(internal.lastEvent.current);
+      }
     },
     connect: () => {
       const {
@@ -106,131 +101,24 @@ function createTouchEvents(store) {
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      const connected = new Pressability__default["default"](events.handlers);
       set(state => ({
         events: {
           ...state.events,
-          connected
+          connected: true
         }
       }));
-      const handlers = connected.getEventHandlers();
-      return handlers;
     },
     disconnect: () => {
       const {
-        set,
-        events
+        set
       } = store.getState();
-      if (events.connected) {
-        events.connected.reset();
-        set(state => ({
-          events: {
-            ...state.events,
-            connected: undefined
-          }
-        }));
-      }
-    }
-  };
-}
-
-// 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 new Error('R3F: 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) {
-    if (this.path) url = this.path + url;
-    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);
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: false
         }
-      }, 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;
+      }));
+    }
   };
 }
 
@@ -286,9 +174,6 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   if (error) throw error;
   const viewRef = 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,
@@ -347,8 +232,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       // Overwrite onCreated to apply RN bindings
       onCreated: state => {
         // Bind events after creation
-        const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
-        setBind(handlers);
+        setBind(state.events.handlers);
 
         // Bind render to RN bridge
         const context = state.gl.getContext();
@@ -396,6 +280,180 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(p
   })));
 });
 
+function polyfills() {
+  // Patch Blob for ArrayBuffer if unsupported
+  try {
+    new Blob([new ArrayBuffer(4)]);
+  } catch (_) {
+    global.Blob = class extends Blob {
+      constructor(parts, options) {
+        super(parts == null ? void 0 : parts.map(part => {
+          if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
+            part = base64Js.fromByteArray(new Uint8Array(part));
+          }
+          return part;
+        }), options);
+      }
+    };
+  }
+  function uuidv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+      const r = Math.random() * 16 | 0,
+        v = c == 'x' ? r : r & 0x3 | 0x8;
+      return v.toString(16);
+    });
+  }
+  async function getAsset(input) {
+    if (typeof input === 'string') {
+      // Point to storage if preceded with fs path
+      if (input.startsWith('file:')) return {
+        localUri: input
+      };
+
+      // Unpack Blobs from react-native BlobManager
+      if (input.startsWith('blob:')) {
+        const blob = await new Promise((res, rej) => {
+          const xhr = new XMLHttpRequest();
+          xhr.open('GET', input);
+          xhr.responseType = 'blob';
+          xhr.onload = () => res(xhr.response);
+          xhr.onerror = rej;
+          xhr.send();
+        });
+        const data = await new Promise((res, rej) => {
+          const reader = new FileReader();
+          reader.onload = () => res(reader.result);
+          reader.onerror = rej;
+          reader.readAsText(blob);
+        });
+        input = `data:${blob.type};base64,${data}`;
+      }
+
+      // Create safe URI for JSI
+      if (input.startsWith('data:')) {
+        const [header, data] = input.split(',');
+        const [, type] = header.split('/');
+        const localUri = fs__namespace.cacheDirectory + uuidv4() + `.${type}`;
+        await fs__namespace.writeAsStringAsync(localUri, data, {
+          encoding: fs__namespace.EncodingType.Base64
+        });
+        return {
+          localUri
+        };
+      }
+    }
+
+    // Download bundler module or external URL
+    const asset = expoAsset.Asset.fromModule(input);
+
+    // Unpack assets in Android Release Mode
+    if (!asset.uri.includes(':')) {
+      const localUri = `${fs__namespace.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
+      await fs__namespace.copyAsync({
+        from: asset.uri,
+        to: localUri
+      });
+      return {
+        localUri
+      };
+    }
+
+    // Otherwise, resolve from registry
+    return asset.downloadAsync();
+  }
+
+  // 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) {
+    if (this.path) url = this.path + url;
+    const texture = new THREE__namespace.Texture();
+    getAsset(url).then(async asset => {
+      const uri = asset.localUri || asset.uri;
+      if (!asset.width || !asset.height) {
+        const {
+          width,
+          height
+        } = await new Promise((res, rej) => reactNative.Image.getSize(uri, (width, height) => res({
+          width,
+          height
+        }), rej));
+        asset.width = width;
+        asset.height = height;
+      }
+      texture.image = {
+        data: {
+          localUri: uri
+        },
+        width: asset.width,
+        height: asset.height
+      };
+      texture.flipY = true;
+      texture.unpackAlignment = 1;
+      texture.needsUpdate = true;
+
+      // Force non-DOM upload for EXGL fast paths
+      // @ts-ignore
+      texture.isDataTexture = true;
+      onLoad == null ? void 0 : onLoad(texture);
+    }).catch(onError);
+    return texture;
+  };
+
+  // Fetches assets via XMLHttpRequest
+  THREE__namespace.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
+    if (this.path) url = this.path + url;
+    const request = new XMLHttpRequest();
+    getAsset(url).then(async asset => {
+      let uri = asset.localUri || asset.uri;
+
+      // Make FS paths web-safe
+      if (asset.uri.startsWith('file://')) {
+        const data = await fs__namespace.readAsStringAsync(asset.uri, {
+          encoding: fs__namespace.EncodingType.Base64
+        });
+        uri = `data:application/octet-stream;base64,${data}`;
+      }
+      request.open('GET', 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);
+    }).catch(onError);
+    return request;
+  };
+}
+
+polyfills();
+
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;
 exports.act = index.act;

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

@@ -3,37 +3,18 @@ export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as
 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 { PanResponder, PixelRatio, View, StyleSheet, Image } from 'react-native';
 import { GLView } from 'expo-gl';
 import { FiberProvider, useContextBridge } from 'its-fine';
-import Pressability from 'react-native/Libraries/Pressability/Pressability';
+import { Asset } from 'expo-asset';
+import * as fs from 'expo-file-system';
+import { fromByteArray } from 'base64-js';
 import 'react-reconciler/constants';
 import 'zustand';
 import 'react-reconciler';
 import 'scheduler';
 import 'suspend-react';
 
-/* eslint-enable import/default, import/no-named-as-default, import/no-named-as-default-member */
-
-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'
-};
-
 /** Default R3F event manager for react-native */
 function createTouchEvents(store) {
   const {
@@ -48,9 +29,26 @@ function createTouchEvents(store) {
     event.nativeEvent.offsetY = event.nativeEvent.locationY;
 
     // Emulate DOM event
-    const callback = handlePointer(DOM_EVENTS[name]);
-    return callback(event.nativeEvent);
+    const callback = handlePointer(name);
+    callback(event.nativeEvent);
+    return true;
   };
+  const responder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponderCapture: () => true,
+    onPanResponderTerminationRequest: () => true,
+    onStartShouldSetPanResponderCapture: e => handleTouch(e, 'onPointerCapture'),
+    onPanResponderStart: e => handleTouch(e, 'onPointerDown'),
+    onPanResponderMove: e => handleTouch(e, 'onPointerMove'),
+    onPanResponderEnd: (e, state) => {
+      handleTouch(e, 'onPointerUp');
+      if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick');
+    },
+    onPanResponderRelease: e => handleTouch(e, 'onPointerLeave'),
+    onPanResponderTerminate: e => handleTouch(e, 'onLostPointerCapture'),
+    onPanResponderReject: e => handleTouch(e, 'onLostPointerCapture')
+  });
   return {
     priority: 1,
     enabled: true,
@@ -61,17 +59,16 @@ function createTouchEvents(store) {
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
     connected: undefined,
-    handlers: Object.values(EVENTS).reduce((acc, name) => ({
-      ...acc,
-      [name]: event => handleTouch(event, name)
-    }), {}),
+    handlers: responder.panHandlers,
     update: () => {
       var _internal$lastEvent;
       const {
         events,
         internal
       } = store.getState();
-      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
+      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) {
+        handlePointer('onPointerMove')(internal.lastEvent.current);
+      }
     },
     connect: () => {
       const {
@@ -79,131 +76,24 @@ function createTouchEvents(store) {
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      const connected = new Pressability(events.handlers);
       set(state => ({
         events: {
           ...state.events,
-          connected
+          connected: true
         }
       }));
-      const handlers = connected.getEventHandlers();
-      return handlers;
     },
     disconnect: () => {
       const {
-        set,
-        events
+        set
       } = store.getState();
-      if (events.connected) {
-        events.connected.reset();
-        set(state => ({
-          events: {
-            ...state.events,
-            connected: undefined
-          }
-        }));
-      }
-    }
-  };
-}
-
-// 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 new Error('R3F: 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) {
-    if (this.path) url = this.path + url;
-    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);
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: false
         }
-      }, 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;
+      }));
+    }
   };
 }
 
@@ -259,9 +149,6 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
   if (error) throw error;
   const viewRef = 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,
@@ -320,8 +207,7 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
       // Overwrite onCreated to apply RN bindings
       onCreated: state => {
         // Bind events after creation
-        const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
-        setBind(handlers);
+        setBind(state.events.handlers);
 
         // Bind render to RN bridge
         const context = state.gl.getContext();
@@ -369,4 +255,178 @@ const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref)
   })));
 });
 
+function polyfills() {
+  // Patch Blob for ArrayBuffer if unsupported
+  try {
+    new Blob([new ArrayBuffer(4)]);
+  } catch (_) {
+    global.Blob = class extends Blob {
+      constructor(parts, options) {
+        super(parts == null ? void 0 : parts.map(part => {
+          if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
+            part = fromByteArray(new Uint8Array(part));
+          }
+          return part;
+        }), options);
+      }
+    };
+  }
+  function uuidv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+      const r = Math.random() * 16 | 0,
+        v = c == 'x' ? r : r & 0x3 | 0x8;
+      return v.toString(16);
+    });
+  }
+  async function getAsset(input) {
+    if (typeof input === 'string') {
+      // Point to storage if preceded with fs path
+      if (input.startsWith('file:')) return {
+        localUri: input
+      };
+
+      // Unpack Blobs from react-native BlobManager
+      if (input.startsWith('blob:')) {
+        const blob = await new Promise((res, rej) => {
+          const xhr = new XMLHttpRequest();
+          xhr.open('GET', input);
+          xhr.responseType = 'blob';
+          xhr.onload = () => res(xhr.response);
+          xhr.onerror = rej;
+          xhr.send();
+        });
+        const data = await new Promise((res, rej) => {
+          const reader = new FileReader();
+          reader.onload = () => res(reader.result);
+          reader.onerror = rej;
+          reader.readAsText(blob);
+        });
+        input = `data:${blob.type};base64,${data}`;
+      }
+
+      // Create safe URI for JSI
+      if (input.startsWith('data:')) {
+        const [header, data] = input.split(',');
+        const [, type] = header.split('/');
+        const localUri = fs.cacheDirectory + uuidv4() + `.${type}`;
+        await fs.writeAsStringAsync(localUri, data, {
+          encoding: fs.EncodingType.Base64
+        });
+        return {
+          localUri
+        };
+      }
+    }
+
+    // Download bundler module or external URL
+    const asset = Asset.fromModule(input);
+
+    // Unpack assets in Android Release Mode
+    if (!asset.uri.includes(':')) {
+      const localUri = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
+      await fs.copyAsync({
+        from: asset.uri,
+        to: localUri
+      });
+      return {
+        localUri
+      };
+    }
+
+    // Otherwise, resolve from registry
+    return asset.downloadAsync();
+  }
+
+  // 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) {
+    if (this.path) url = this.path + url;
+    const texture = new THREE.Texture();
+    getAsset(url).then(async asset => {
+      const uri = asset.localUri || asset.uri;
+      if (!asset.width || !asset.height) {
+        const {
+          width,
+          height
+        } = await new Promise((res, rej) => Image.getSize(uri, (width, height) => res({
+          width,
+          height
+        }), rej));
+        asset.width = width;
+        asset.height = height;
+      }
+      texture.image = {
+        data: {
+          localUri: uri
+        },
+        width: asset.width,
+        height: asset.height
+      };
+      texture.flipY = true;
+      texture.unpackAlignment = 1;
+      texture.needsUpdate = true;
+
+      // Force non-DOM upload for EXGL fast paths
+      // @ts-ignore
+      texture.isDataTexture = true;
+      onLoad == null ? void 0 : onLoad(texture);
+    }).catch(onError);
+    return texture;
+  };
+
+  // Fetches assets via XMLHttpRequest
+  THREE.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
+    if (this.path) url = this.path + url;
+    const request = new XMLHttpRequest();
+    getAsset(url).then(async asset => {
+      let uri = asset.localUri || asset.uri;
+
+      // Make FS paths web-safe
+      if (asset.uri.startsWith('file://')) {
+        const data = await fs.readAsStringAsync(asset.uri, {
+          encoding: fs.EncodingType.Base64
+        });
+        uri = `data:application/octet-stream;base64,${data}`;
+      }
+      request.open('GET', 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);
+    }).catch(onError);
+    return request;
+  };
+}
+
+polyfills();
+
 export { Canvas, createTouchEvents as events };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.13.9",
+  "version": "8.14.0",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -44,6 +44,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.8",
     "@types/react-reconciler": "^0.26.7",
+    "base64-js": "^1.5.1",
     "its-fine": "^1.0.6",
     "react-reconciler": "^0.27.0",
     "react-use-measure": "^2.1.1",
@@ -55,6 +56,7 @@
     "expo": ">=43.0",
     "expo-asset": ">=8.4",
     "expo-gl": ">=11.0",
+    "expo-file-system": ">=11.0",
     "react": ">=18.0",
     "react-dom": ">=18.0",
     "react-native": ">=0.64",
@@ -73,6 +75,9 @@
     "expo-asset": {
       "optional": true
     },
+    "expo-file-system": {
+      "optional": true
+    },
     "expo-gl": {
       "optional": true
     }