fix(native): make expo modules optional

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<RenderProps<HTMLCanvasElement>, '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<View, Props>(
 
     // 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<string, EventListener[]>()
 
       const canvas = {
@@ -198,10 +204,11 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef<View, Props>(
         // 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<View, Props>(
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 export const Canvas = React.forwardRef<View, Props>(function CanvasWrapper(props, ref) {
+  if (!GLView) throw new Error('expo-gl must be installed to use Canvas!')
+
   return (
     <FiberProvider>
       <CanvasImpl {...props} ref={ref} />

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) => {