React Native - rendering primitive glb obj based on docs doesn't work

[filipmikes1]

Hi,

I did all steps in react native tutorial: https://docs.pmnd.rs/react-three-fiber/getting-started/installation . But 3d object is not showing. (both ios and android)
My code looks like this: Exactly same code just changed for web is working without issue.

import { useGLTF } from "@react-three/drei/native";
    import { Canvas } from "@react-three/fiber/native";
    import { Suspense } from "react";
    import { View } from "react-native";
    import modelPath from "./assets/tokyo.glb";
    
    function Model(props: any) {
      const gltf = useGLTF(modelPath);
      return <primitive {...props} position={[0, 0, 0]} scale={[0.1, 0.1, 0.1]} object={gltf.scene} />;
    }
    
    export default function App() {
      return (
        <View style={{ flex: 1 }}>
          <Canvas>
            <ambientLight />
            <Suspense>
              <Model />
            </Suspense>
          </Canvas>
        </View>
      );
    }

And my metro.config looks like this:

  
// Learn more https://docs.expo.io/guides/customizing-metro
  const { getDefaultConfig } = require("expo/metro-config");
  
  /** @type {import('expo/metro-config').MetroConfig} */
  const config = getDefaultConfig(__dirname);
  
  config.resolver.assetExts.push("glb", "gltf", "png", "jpg");
  config.resolver.sourceExts.push("js", "jsx", "json", "ts", "tsx", "cjs", "mjs");
  
  module.exports = config;

And this is dependencies:

  "@react-three/drei": "^9.99.7",
    "@react-three/fiber": "^8.15.19",
    "@types/three": "^0.162.0",
    "expo": "~50.0.8",
    "expo-gl": "~13.6.0",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.4",
    "three": "^0.162.0"

I am using LittlestTokyo.glb from three.js example https://github.com/mrdoob/three.js/blob/master/examples/webgl_animation_keyframes.html

Also when 3d will not display this error is shown. Not sure if it is related:

Is this a bug or I am doing something wrong? Thank you!

[ahazem-dev]

same issue but with an FBX model

import { Canvas } from '@react-three/fiber/native'
import { useFBX } from '@react-three/drei/native'

import modelPath from './../../models/cottage_fbx.fbx'

export default function Home () {
    const fbx = useFBX(modelPath)

    let clone = fbx.clone()
    console.log(clone);
    return (
        <Canvas>
            <primitive object={clone}/>
            <mesh>
                <boxGeometry args={[2, 2, 2]} />
                <meshPhongMaterial />
            </mesh>
            <ambientLight intensity={0.1} />
            <directionalLight position={[0, 0, 5]} color="red" />
        </Canvas>
    )
}