Error: Could not load 21: undefined in React Native Expo

[ArjunPatidarRadix]

I'm trying to load the GLB model in react native but I'm always getting this error I'm using the same code from

• three version:
• @react-three/fiber "^8.14.4":
• @react-three/drei "^9.86.3":
• node v16.15.0:
• npm 8.5.5:

Problem description:

Error: Could not load 21: undefined

This error is located at:
in Unknown
in FiberProvider
in CanvasWrapper (created by AvatarScreen)
in AvatarScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen
in Unknown (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by RootStackNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by RootStackNavigator)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by RootStackNavigator)
in RootStackNavigator (created by App)
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes

Relevant code:

`import React, { Suspense } from 'react'
import { useGLTF } from '@react-three/drei/native'
import { Canvas } from '@react-three/fiber/native'
import modelPath from './assets/monkey.glb'

function Model(props) {
const { scene } = useGLTF(modelPath)
return <primitive {...props} object={scene} />
}

export default function App() {
return (





)
}`tsx

Suggested solution:

It should load the 3d model glb or gltf file in mobile and web

[creativedrewy]

I have confirmed this behavior as well; I'm running a sample on Android via expo. I have seen this error with both locally bundled GLB files as well as GLB files on remote URLs. I'll attach my sample code below, thought it's very similar to OPs code.

I tried a few r3f releases to see if this ever worked in the past and/or when it showed up as a bug. Sure enough, it started with the 8.14.0 release which I think was a big change to attempt to fix gltf support, no?

A remote GLB (like the one in the code below) will render in r3f 8.13.9, though it does toast an error message: THREE.GLTFLoader: Couldn't load texture {"_h": 1, "_i": 2, "_j": [Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported], "_k": null}

Here is the sample code:

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Canvas shadows>
        <Suspense fallback={null}>

          <ambientLight />
          <directionalLight castShadow intensity={0.6} position={[0, 0, 10]} />
          <Model />
        </Suspense>
      </Canvas>
    </View>
  )
}

const Model = () => {
  const gltf = useGLTF("https://www.arweave.net/1Qi6CQm7jv35_2eDsqc3SraLaB_ngxdm_m1UVbKF8Us?ext=glb");
  return (
      <>
        <primitive object={gltf.scene} scale={0.008} />
      </>
  );
};