Error loading OBJ model in React Native

[Hamidi07]

Problem:
When attempting to load an OBJ model in my React Native application using React Three Fiber and Three.js, I encounter an error "text.split is not a function" that appears to be related to the model loading.

Environment:

"dependencies": {
"@react-three/fiber": "^8.15.16",
"expo": "~50.0.8",
"expo-asset": "^9.0.2",
"expo-file-system": "^16.0.7",
"expo-gl": "^13.6.0",
"expo-status-bar": "~1.11.1",
"expo-three": "^7.0.0",
"react": "18.2.0",
"react-native": "0.73.4",
"three": "^0.162.0"
}

import { Canvas, useFrame, useLoader } from '@react-three/fiber';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';

const material = useLoader(MTLLoader, require('./assets/test/model.mtl'));

const obj = useLoader(
  OBJLoader,
  require('./assets/test/model.obj'),
  (loader) => {
    material.preload();
    loader.setMaterials(material);
  }
);

  (ERROR) Error: Could not load 7: text.split is not a function (it is undefined)
This error is located at:
    in Unknown
    in FiberProvider
    in CanvasWrapper (at App.js:124)
    in RCTView (at View.js:116)
    in View (at App.js:120)
    in App (at withDevTools.js:18)
    in withDevTools(App) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes

[stockhuman]

This is rather unlikely to be related to r3f; given that the error is coming from three's own loader. What does <CanvasWrapper /> do? And have you configured assets to load correctly?

It seems you are requiring assets directly, which won't resolve to actual loadable resources. See the Expo-Asset section on loading assets, and this section in particular:

// Create an Asset from a resource
const asset = Asset.fromModule(require('./image.png'));

await asset.downloadAsync();

// This is the local URI
const uri = asset.localUri;

[CodyJasonBennett]

See #3085 (comment). We polyfill some web APIs since react-native either doesn't implement them or implements them wrongly. There I have a workaround and pending fix. glTF and other formats parse correctly OOTB, we're still working to have everything consistent without hassle.