React Native: THREE.GLTFLoader: Couldn\'t load texture in react native

[lichmac]

System:
OS: macOS 14.4.1
CPU: (8) arm64 Apple M2
Memory: 496.13 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.17.0
path: ~/.nvm/versions/node/v18.17.0/bin/node
Yarn:
version: 1.22.21
path: ~/.nvm/versions/node/v18.17.0/bin/yarn
npm:
version: 9.6.7
path: ~/.nvm/versions/node/v18.17.0/bin/npm
Watchman:
version: 2023.10.30.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.14.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.4
- iOS 17.4
- macOS 14.4
- tvOS 17.4
- visionOS 1.1
- watchOS 10.4
Android SDK:
API Levels:
- "25"
- "29"
- "30"
- "31"
- "32"
- "33"
- "34"
Build Tools:
- 29.0.2
- 30.0.2
- 30.0.3
- 31.0.0
- 33.0.0
- 33.0.1
- 34.0.0
System Images:
- android-31 | Android TV ARM 64 v8a
- android-31 | Android TV Intel x86 Atom
- android-31 | Google TV ARM 64 v8a
- android-31 | Google TV Intel x86 Atom
- android-31 | Google APIs ARM 64 v8a
- android-31 | Google APIs Intel x86 Atom_64
- android-31 | Google Play ARM 64 v8a
- android-31 | Google Play Intel x86 Atom_64
- android-33 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10406996
Xcode:
version: 15.3/15E204a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.9
path: /Users/*/.jenv/shims/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.4
wanted: 0.73.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

"@react-three/drei": "^9.105.6",
"@react-three/fiber": "^8.16.3",
"expo": "^50.0.0",
"expo-gl": "~13.6.0",
"react": "18.2.0",
"react-native": "0.73.4",
"three": "^0.164.1",

Problem description:

I got the error in React Native. Threejs throws the texture errors

2024-05-07 16:45:44.771462+0700 unitygpt[7665:9613623] [javascript] 'THREE.GLTFLoader: Couldn't load texture', 'blob:70e21b66-0dce-41b4-a77d-cb228e339bd1?offset=0&size=935696'
2024-05-07 16:45:44.779363+0700 unitygpt[7665:9613623] [javascript] 'THREE.GLTFLoader: Couldn't load texture', 'blob:c65a591f-43cf-4f79-837f-86fb175dba64?offset=0&size=222888'
2024-05-07 16:45:44.788510+0700 unitygpt[7665:9613623] [javascript] 'THREE.GLTFLoader: Couldn't load texture', 'blob:69d1043a-e99b-4467-8942-570b1b6698f0?offset=0&size=7620'

This is my model

avatar.zip

Relevant code:

import React, { Suspense } from "react";
import { PixelRatio, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
import { Canvas } from "@react-three/fiber/native";
import { useGLTF } from "@react-three/drei/native";

const onCanvasCreated = (state) => {
    // state.camera.lookAt(0, 0, -10);
    const _camera = state.camera, _size = state.size;
    _camera.aspect = _size.width/_size.height;
    _camera.updateProjectionMatrix();
    const _gl = state.gl.getContext();
    _gl.gammaFactor = 2.2;
    const pixelStorei = _gl.pixelStorei.bind(_gl);
    _gl.pixelStorei = function(...args) {
      const [parameter] = args;
      switch (parameter) {
        case _gl.UNPACK_FLIP_Y_WEBGL:
          return pixelStorei(...args);
      }
    };
  };
  
  function Model(props) {
  const {scene} = useGLTF(modelPath)
  return <primitive
      object={scene}
      rotation={[0, 0, 0]}
      position={[0, -1.5, 0]} />
}
  
<Canvas
        legacy={true}
        gl={{ antialias: true }}
        dpr={PixelRatio.get()}
        camera={{ fov: 50, near: 0.1, far: 1000, position: [0, 0, 0.8] }}
        onCreated={onCanvasCreated}>
        <ambientLight
          color={0xffffff}
          intensity={0.1} />
        <hemisphereLight
          color={0xffffff}
          intensity={0.5} />
        <directionalLight
          color={0xffffff}
          intensity={1.5}
          position={[0, 1, 5]} />
        <pointLight
          position={[1, 2, -0.5]}
          castShadow={true}
          intensity={2}
          distance={100} />
        <Suspense fallback={null}>
          <Model>
        </Suspense>
      </Canvas>