diff --git a/packages/fiber/src/native/Canvas.tsx b/packages/fiber/src/native/Canvas.tsx index 36b6994d7e..04be38124d 100644 --- a/packages/fiber/src/native/Canvas.tsx +++ b/packages/fiber/src/native/Canvas.tsx @@ -11,7 +11,6 @@ import { StyleSheet, PixelRatio, } from 'react-native' -import { ExpoWebGLRenderingContext, GLView } from 'expo-gl' import { useContextBridge, FiberProvider } from 'its-fine' import { SetBlock, Block, ErrorBoundary, useMutableCallback } from '../core/utils' import { extend, createRoot, unmountComponentAtNode, RenderProps, ReconcilerRoot } from '../core' @@ -25,6 +24,13 @@ export interface CanvasProps extends Omit, 'size' export interface Props extends CanvasProps {} +// Lazily load expo-gl, so it's only required when Canvas is used +try { + var GLView = require('expo-gl').GLView +} catch (_) { + // +} + /** * A native canvas which accepts threejs elements as children. * @see https://docs.pmnd.rs/react-three-fiber/api/canvas @@ -85,7 +91,7 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef( // Called on context create or swap // https://github.com/pmndrs/react-three-fiber/pull/2297 - const onContextCreate = React.useCallback((context: ExpoWebGLRenderingContext) => { + const onContextCreate = React.useCallback((context: WebGL2RenderingContext) => { const listeners = new Map() const canvas = { @@ -198,10 +204,11 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef( // Overwrite onCreated to apply RN bindings onCreated: (state: RootState) => { // Bind render to RN bridge - const context = state.gl.getContext() as ExpoWebGLRenderingContext + const context = state.gl.getContext() const renderFrame = state.gl.render.bind(state.gl) state.gl.render = (scene: THREE.Scene, camera: THREE.Camera) => { renderFrame(scene, camera) + // @ts-ignore context.endFrameEXP() } @@ -238,6 +245,8 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef( * @see https://docs.pmnd.rs/react-three-fiber/api/canvas */ export const Canvas = React.forwardRef(function CanvasWrapper(props, ref) { + if (!GLView) throw new Error('expo-gl must be installed to use Canvas!') + return ( diff --git a/packages/fiber/src/native/polyfills.ts b/packages/fiber/src/native/polyfills.ts index b61b2d9fcb..99602ef790 100644 --- a/packages/fiber/src/native/polyfills.ts +++ b/packages/fiber/src/native/polyfills.ts @@ -1,10 +1,16 @@ import * as THREE from 'three' import { Image, NativeModules, Platform } from 'react-native' -import { Asset } from 'expo-asset' -import * as fs from 'expo-file-system' import { fromByteArray } from 'base64-js' import { Buffer } from 'buffer' +// Polyfill asset loading if expo modules are available +try { + var Asset = require('expo-asset').Asset + var fs = require('expo-file-system') +} catch (_) { + // +} + // http://stackoverflow.com/questions/105034 function uuidv4() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {