Loading a GLTF or GLB into React Native GL - reactjs

Question

I have been attempting to load a simple model into my React Native App, I have craeted a model in Blender and exported as GLTF and GLB. In my react native app I'm using expo-gl and threejs to load and render the scene. This is my page code:
import React, { useEffect } from 'react'
import { GLView } from 'expo-gl'
import { Renderer } from 'expo-three'
import * as THREE from 'three'
import OrbitControlsView from 'expo-three-orbit-controls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { storage } from '../services/firebase'
import { ref, getDownloadURL } from 'firebase/storage'
class SphereMesh extends THREE.Mesh {
constructor() {
super(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({ color: 'red' })
)
}
}
export function ThreeComponent() {
// Animmation clock
const clock = new THREE.Clock()
const [camera, setCamera] = React.useState<THREE.Camera | null>(null)
async function loadModel() {
getDownloadURL(ref(storage, 'niltontest/mymodel.gltf'))
.then(async (url) => {
// let blob = await fetch(url).then((r) => r.blob())
// GLTF loader
const gltfLoader = new GLTFLoader()
// await gltfLoader.parse(
// 'file:///Users/niltonsf/Desktop/react-native-3d/assets/mymodel.gltf',
// '',
// (gltf) => {
// console.log('here', gltf)
// },
// () => {
// console.log('fail')
// }
// )
gltfLoader.load(
// resource URL
url,
// called when the resource is loaded
function (gltf) {
console.log('sc')
},
// called while loading is progressing
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
},
// called when loading has errors
function (error) {
console.log('An error happened', error)
}
)
})
.catch((error) => {
// Handle any errors
})
}
// Mesh
const cube = new SphereMesh()
const tick = () => {
window.requestAnimationFrame(tick)
}
useEffect(() => {
loadModel()
}, [])
return (
<OrbitControlsView style={{ flex: 1 }} camera={camera}>
<GLView
style={{ flex: 1 }}
onContextCreate={async (gl) => {
// GL Parameter disruption
const {
drawingBufferWidth: width,
drawingBufferHeight: height
} = gl
// Scene
const scene = new THREE.Scene()
// Geometry
scene.add(cube)
// Camera
const camera = new THREE.PerspectiveCamera(
75,
width / height,
1,
1000
)
camera.position.z = 2
camera.position.x = 2
camera.position.y = 2
camera.lookAt(cube.position)
setCamera(camera)
scene.add(camera)
// Renderer
const renderer = new Renderer({ gl })
renderer.setSize(width, height)
renderer.setClearColor('#fff')
// Render function
const render = () => {
requestAnimationFrame(render)
renderer.render(scene, camera)
gl.endFrameEXP()
}
render()
}}
/>
</OrbitControlsView>
)
}
I have attemtpted to un a model from Firebase Storage and a local one. But either of them say the same error message, which is:
An error happened [Error: FileReader.readAsArrayBuffer is not implemented]