How to provide directory path to .obj & .mtl file in React Native?

Question

I am using react-viro to include AR support in my application. Viro integration is perfect, I am able to see text in AR mode. But when I try to include any 3D Object using Viro3DObject, I get an error saying "The module could not be found from (local path to my file)". When I load the same asset from a server, I am able to load it with its URI.

As per the React-Viro documentation, React-native by default does not support 3D files with .obj and .mtl extensions. So, I followed this approach to include the support. But still, the same error persists.

https://docs.viromedia.com/docs/importing-assets#adding-asset-types

<Viro3DObject
source={require('./emoji_vow/emoji_vow.vrx')}
position={[0, .2, 0]}
scale={[.2, .2, .2]}
type="VRX"
lightReceivingBitMask={3}
shadowCastingBitMask={2}
transformBehaviors={['billboardY']}
resources={[require('./emoji_wow/emoji_wow_diffuse.png'),
require('./emoji_wow/emoji_wow_specular.png'),
require('./emoji_wow/emoji_wow_normal.png')]}/>

Answer 1

add metro.config.js

'use strict';

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { assetExts }
  } = await getDefaultConfig();

  return {
    resolver: {
      assetExts: [...assetExts, "obj", "mtl", "JPG", "vrx", "hdr", "gltf", "glb", "GLB", "bin", "arobject", "gif"]
    }
  };
})();

shoud be fine

Answer 2

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {assetExts},
  } = await getDefaultConfig();

  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: [
        ...assetExts,
        'obj',
        'mtl',
        'JPG',
        'vrx',
        'hdr',
        'gltf',
        'glb',
        'bin',
        'arobject',
        'gif',
      ],
    },
  };
})();