React three fiber and Textureloader not display - reactjs

Question

I am learning to develop some mobile applications using react native and expo.
I have created some code to apply a texture on a sphere. I have tried both with http url image and an image stored on my machine. When I am running the project in the expo web browser, everything is OK, but when I am launching it on android and ios devices, the sphere object is not displayed.
Any idea why this would work in the browser but not in a native environment?
Here is my code:
import React, { useRef, useState,useMemo, Suspense } from 'react';
import { StyleSheet, View } from 'react-native';
import * as THREE from "three";
import { Canvas, useFrame,useLoader } from 'react-three-fiber';
// import myImage from './img/world.png'
function SphereElement(props) {
// This reference will give us direct access to the mesh
const mesh = useRef();
// Set up state for the hovered and active state
const [hovered, setHover] = useState(false);
const [active, setActive] = useState(false);
// Rotate mesh
useFrame(() => {
if (mesh && mesh.current) {
mesh.current.rotation.y = mesh.current.rotation.y += 0.002;
}
});
const image_pth='https://i.imgur.com/3yEEsnO.png'
const texture = useLoader(THREE.TextureLoader,image_pth)
return (
<mesh
{...props}
ref={mesh}
>
<sphereBufferGeometry attach="geometry" args={[2, 32, 32]} />
<meshBasicMaterial
attach="material"
transparent side={THREE.DoubleSide}
map={texture}
>
</meshBasicMaterial>
</mesh>
);
}
export default function App() {
return (
<View style={styles.container}>
<Canvas>
<Suspense fallback={null}>
<SphereElement position={[0, 0, 0]} />
</Suspense>
</Canvas>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "black",
},
});

Answer 1

You should use useTexture hook from drei, as of the newer version of three and react-three-fiber, that is the recommended way to load textures.
https://github.com/pmndrs/drei#usetexture