useTexture does not work on react native with Expo

[itsyoboieltr]

• three version: 0.161.0
• @react-three/fiber version: 8.15.16
• @react-three/drei version: 9.97.0
• node version: v20.9.0
• npm (or yarn) version: 10.1.0

Problem description:

I am trying to load a sprite, but it errors.

Relevant code:

import { useTexture } from '@react-three/drei/native';

export default function Test() {
  const sprite = useTexture(require('./sprite.png'));
  return <></>;
}

Suggested solution:

Maybe I am misusing it? but I would expect this to work.

[divyansh4300]

Try wrapping the component with Canvas

import React from 'react';
import { Canvas } from 'react-three-fiber';
import { useTexture } from '@react-three/drei';

function Test() {
  const sprite = useTexture(require('./sprite.png'));
  return (
    <mesh>
      <planeBufferGeometry attach="geometry" args={[1, 1]} />
      <meshBasicMaterial attach="material" map={sprite} />
    </mesh>
  );
}

export default function App() {
  return (
    <Canvas>
      <Test />
    </Canvas>
  );
}

[github-actions[bot]]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!