Cannot use all R3F and Drei modules in React Native Expo application

Questions
, , ,
1

Hi,

I’ve encountered some errors with R3F and React Native Expo and I’m not sure if I did something wrong or it’s not working in general.

Of course I import all components from @react-three/fiber/native and @react-three/drei/native.

  1. Error: Can’t find variable: document.
    Some components (e.g. drei/OrbitControls, drei/Text, drei/Html) cannot be used in RN because the document object cannot be found. This makes sense of course - but is there anyway a workaround to use the components. Especially OrbitControls must work somehow.

  2. Error: Your web project is importing a module from ‘react-native’ instead of ‘react-native-web’.
    This error appears in the web version of the app. If I load the components via @react-three/fiber or @react-three/drei, it works, but since I am still in a React Native environment with the web version I should load via /native, or am I wrong?

I would be very grateful if someone could help me here.

Thanks.

2

html cannot work, the others not sure, out of the box orbitcontrols is using dom/web events, i think you need to use controls from expo instead. generally, fiber is making sure that three itself will run on native, and most of the drei stuff, but anything that relies on the dom can’t just work on native.

i think you’ll have better chances in getting this sorted out on pmndrs discord, cody is the main dev behind three in react native.