Loading environment map using files in React Native

[mateoguzmana]

How to load an environment map using files for React Native?

I'm trying to load an environment map using 6 images. I'm getting the error: Property document doesn't exist.

I assume that is because there is no direct support for this way of loading images in the environment in React Native. Are there any alternatives? Haven't seen examples of this around but I am happy to contribute to the solution if I can get some ideas on what would need to be changed.

I leave below a very minimal example of how I am trying to do this.

import { Environment } from "@react-three/drei/native";
import { Canvas } from "@react-three/fiber/native";

const px = require("../../assets/px.png");

export function MyComponent() {
  return (
    <Canvas>
      <Environment background files={[px]}
    </Canvas>
  );
}

Good to mention that loading a preset works. As below:

<Environment background preset="park" />