React Native - unable to load .glb files with useGLTF Android

[Rakha112]

I got an error when importing a .glb file using useGLTF from @react-three/drei in react native.
The .glb file is just a cube and I used gltfjsx to convert it to a jsx file
I don't know if this is related to #2992 or not

Here is the code in my App.tsx file

import {Canvas} from '@react-three/fiber/native';
import Model from './src/assets/Model';
import {StyleSheet, View} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Canvas>
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        <Suspense fallback={null}>
          <Model />
        </Suspense>
      </Canvas>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: 'black'},
});

This is the code generated by gltfjsx, I only added the import for modelPath

import {useGLTF} from '@react-three/drei/native';
import modelPath from './Cube.glb';

const Model = props => {
  const {nodes, materials} = useGLTF(modelPath);
  return (
    <group {...props} dispose={null}>
      <mesh geometry={nodes.Cube.geometry} material={materials.Material} />
    </group>
  );
};

useGLTF.preload(modelPath);

export default Model;

These are the dependencies in this project

  "dependencies": {
    "@react-three/drei": "^9.82.0",
    "@react-three/fiber": "^8.14.1",
    "expo": "^49.0.0",
    "expo-gl": "~13.0.1",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "three": "^0.156.1"
  },

This is my metro.config.js

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resolver: {
    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs'],
    assetExts: ['glb', 'gltf', 'mtl', 'obj', 'png', 'jpg'],
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

and these are screenshots of the error

Thankyou

[jorjordandan]

I get the same error on Android simulator with 18.14.1
(Could not load 1: undefined)
also using useGLTF from drei (so maybe this issue should be there)

It works on device on iOS and is the same as usual (no frames) on iOS simulator.
I was using the Duck example code glb.
I'm going to give it a shot with useLoader and GLTFLoader...

Okay - same issue, same error with useLoader and GTLFLoader.

import React, {Suspense} from "react";
// import { useGLTF } from "@react-three/drei/native";
import duck from "./assets/Duck.glb"

import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three-stdlib'


export default function Model(props) {
  const gltf = useLoader(GLTFLoader, duck)

  const { nodes, materials } = gltf;
  return (
    <group {...props} dispose={null}>
      <group scale={0.01}>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.LOD3spShape.geometry}
          material={materials["blinn3-fx"]}
        />
      </group>
    </group>
  );
}

// useGLTF.preload(duck);

Also not sure if this is helpful but the error is different with the patch commit from last week, which gives the error:
THREE.GLTFLoader: Couldn't load texture {"_h": 1, "_i": 2, "_j": [Error: Cannot create URL for blob!], "_k": null}
But with the patch commit, the model renders with no texture, while 18.14.1 doesn't render the model.

[CodyJasonBennett]

@Rakha112 does this only occur on Android (dev, not APK) for you? #2992 would be for Android APK.

[Rakha112]

@CodyJasonBennett Yes this only happens on Android, in the APK file (generated by assembleRelease) the application crashes (Force Close) and during development the error is like the previous screenshots. On physical iOS devices and the iOS simulator it runs fine (on the iOS simulator it just goes blank I think this is a known issue ? #2546 (comment) ) as in the screenshots below

[CodyJasonBennett]

iOS simulator is known not to render under the OpenGL backend. Frames will only sometimes flush, so you'll need to test on a real device for animation. I'll be continuing this in #2992 so we can consolidate efforts. They have the same underlying issue, APK aside.