Can't install react-three-fiber for react-native

[TeamBaconn]

I've try npm install three @react-three/fiber but my code cant run because there's something wrong with the module and stuff, here's the problem. I've searched for the solution but can't find anything that actually works.

Here are my dependencies "dependencies": { "@react-three/fiber": "^7.0.4", "expo": "~42.0.1", "expo-status-bar": "~1.0.4", "react": "16.13.1", "react-dom": "16.13.1", "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz", "react-native-web": "~0.13.12", "three": "^0.130.1" },

[drcmda]

react-native does not exist in v7. it's waiting for someone to complete https://github.com/pmndrs/react-three-fiber/pull/1384

[TeamBaconn]

react-native does not exist in v7. it's waiting for someone to complete #1384

so how can I use the extension? Is there any downgrade version or something? I tried my code on Expo snack and some how it works.

[drcmda]

react-three-fiber@v5 has a native target. the best path forward would be if you could help get this done for @react-three/fiber v7 (the pr above needs more contribution), it wouldn't be much work. i don't have any experience with RN to do it myself. otherwise you need to use v5 and the old namespace

[TeamBaconn]

react-three-fiber@v5 has a native target. the best path forward would be if you could help get this done for @react-three/fiber v7 (the pr above needs more contribution), it wouldn't be much work. i don't have any experience with RN to do it myself. otherwise you need to use v5 and the old namespace

hi, I've installed the version that you were talking about, it worked fine. But when I run on the phone, it created some errors such as (iPhone 12: Warning: THREE.WebGLRenderer: WEBGL_lose_context extension not supported.). However, the web version works fine.

[drcmda]

if its just warnings i think thats fine. the entire thing doesnt come from us but expo, they are making the threejs to native port. r3f just adds react semantics and events. i think for issues like these expo can help you out better.

[TeamBaconn]

if its just warnings i think thats fine. the entire thing doesnt come from us but expo, they are making the threejs to native port. r3f just adds react semantics and events. i think for issues like these expo can help you out better.

oh, thank you so much. I just want to get 1 last thing clear. I've tried your example, it works fine on every platform and I notice that it doesn't use the 'three' library at all in the code. I think my problem is as long as I'm using 'three' library, my code will only be run on web platform and not mobile and stuff. Is my statement correct?

[TeamBaconn]

if its just warnings i think thats fine. the entire thing doesnt come from us but expo, they are making the threejs to native port. r3f just adds react semantics and events. i think for issues like these expo can help you out better.

oh, thank you so much. I just want to get 1 last thing clear. I've tried your example, it works fine on every platform and I notice that it doesn't use the 'three' library at all in the code. I think my problem is as long as I'm using 'three' library, my code will only be run on web platform and not mobile and stuff. Is my statement correct?

I just checked and turn out correctly. The problem is if I'm using any 'element' or 'code' from 'three', mobile device will not render my stuff. I've changed my code so that it can only use what is in react-three-fiber. Set position, indices, uvs is easy but how can I load the texture without using THREE.TextureLoader though. Thank you.

[CSumm]

I am using the most recent version of Gatsby starter and trying to npm install three @react-three/fiber as a dependency and it throws errors as well.

 npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   peer react@"15.x || 16.x || 17.x" from @gatsbyjs/reach-router@1.3.6
npm ERR!   node_modules/@gatsbyjs/reach-router
npm ERR!     @gatsbyjs/reach-router@"^1.3.6" from gatsby@3.9.1
npm ERR!     node_modules/gatsby
npm ERR!       peer gatsby@"^3.0.0-next.0" from babel-plugin-remove-graphql-queries@3.9.0
npm ERR!       node_modules/babel-plugin-remove-graphql-queries
npm ERR!         babel-plugin-remove-graphql-queries@"^3.9.0" from gatsby@3.9.1
npm ERR!         2 more (gatsby-plugin-image, gatsby-plugin-typescript)
npm ERR!       20 more (gatsby-plugin-feed, gatsby-plugin-gatsby-cloud, ...)
npm ERR!     peer @gatsbyjs/reach-router@"^1.3.5" from gatsby-link@3.9.0
npm ERR!     node_modules/gatsby-link
npm ERR!       gatsby-link@"^3.9.0" from gatsby@3.9.1
npm ERR!       node_modules/gatsby
npm ERR!         peer gatsby@"^3.0.0-next.0" from babel-plugin-remove-graphql-queries@3.9.0
npm ERR!         node_modules/babel-plugin-remove-graphql-queries
npm ERR!         20 more (gatsby-plugin-feed, gatsby-plugin-gatsby-cloud, ...)
npm ERR!     1 more (gatsby-react-router-scroll)
npm ERR!   peer react@"^16.9.0 || ^17.0.0" from gatsby@3.9.1
npm ERR!   node_modules/gatsby
npm ERR!     peer gatsby@"^3.0.0-next.0" from babel-plugin-remove-graphql-queries@3.9.0
npm ERR!     node_modules/babel-plugin-remove-graphql-queries
npm ERR!       babel-plugin-remove-graphql-queries@"^3.9.0" from gatsby@3.9.1
npm ERR!       2 more (gatsby-plugin-image, gatsby-plugin-typescript)
npm ERR!     peer gatsby@"^3.0.0-next.0" from gatsby-plugin-feed@3.9.0
npm ERR!     node_modules/gatsby-plugin-feed
npm ERR!       gatsby-plugin-feed@"^3.9.0" from the root project
npm ERR!     19 more (gatsby-plugin-gatsby-cloud, ...)
npm ERR!   11 more (gatsby-link, gatsby-plugin-feed, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.2" from react-reconciler@0.26.2
npm ERR! node_modules/@react-three/fiber/node_modules/react-reconciler
npm ERR!   react-reconciler@"^0.26.2" from @react-three/fiber@7.0.5
npm ERR!   node_modules/@react-three/fiber
npm ERR!     @react-three/fiber@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

This also occurs on a fresh new Gatsby starter project as well

[drcmda]

the namespace is @react-three/fiber

"react-three-fiber", the last version, is deprecated and only returns an empty index.js

[CSumm]

I made a correction to my addition to the thread, my bad for writing the namespace wrong

[drcmda]

That must be a fault in your build system. The library is most definitively published and available on npm. Or perhaps a typo when you import it.

[CSumm]

Hi, you are right. I must have made a mistake and was looking at audit fixes instead of the usual build process. Thanks for the help!

[TeamBaconn]

That must be a fault in your build system. The library is most definitively published and available on npm. Or perhaps a typo when you import it.

Hi, it took some time to figure out that I can not use Texture Loader of "Three.js" nor useLoader(TextureLoader,link) of react native fiber. It just does not work on the phone devices. My alternative method is to use TextureLoader in Expo Three but they cannot retrieve the width and height of the texture themselves. Can you help me out? I would be appreciated it a lot. Is there any other way?

[arcaneCheco]

is there a way you can use @react-three/drei with the downgraded version of @react-three/fiber? I can't get it working on native. Trying to use useTexture from drei since textureloader isn't working..

Thank you

[leokaplan]

Any updates on this? I am using "@react-three/drei": "^7.5.0" and "@react-three/fiber": "5.x". But I am receiving

While trying to resolve module three-mesh-bvh from file ...\node_modules\@react-three\drei\native\index.js, the package ...\node_modules\three-mesh-bvh\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved

Thank you

[CodyJasonBennett]

Just an update, I've wrapped up support for react native for v8 in #1699, but I'd appreciate some feedback. Working on some bug fixes for v7 then we can publish it in an alpha release.

[CodyJasonBennett]

We recently reintroduced react-native support in @react-three/fiber@beta with react@beta with full loaders/events support (installation instructions here).

Loaders like TextureLoader and useTexture work OOTB in this release (alongside every loader but AudioLoader & LottieLoader -- these are broken but we can PR a fix in three).

Maybe give that a try and see if issues with Drei and mesh-bvh still persist.

[holyxiaoxin]

There's a conflict in peer dependencies: https://github.com/pmndrs/react-three-fiber/blob/v8/packages/fiber/package.json#L61 when trying to install with npm. However, able to install dependecies using yarn.

[TeamBaconn]

Do i need to install react@beta in order to get the plugin working? I'm using react 17

[CodyJasonBennett]

Yes, react 18 beta. I'll look into the peer deps. I at least see a typo for the RN version.

[TeamBaconn]

Hi, quick question. I'm just uninstalled expo-three and install everything like the document said. I've re-imported the library too. This is my code to download the texture from URL import { useFrame, useLoader } from "@react-three/fiber/native" import { TextureLoader, MeshBasicMaterial } from "three"

texture.current = useLoader(TextureLoader, img) const material = new MeshBasicMaterial({ map: texture.current, }) It said something about RefForwarding and Suspend but my old code already have suspend in the code. I have to move suspend outside of Canvas in order for my app to run (but not rendering).

[CodyJasonBennett]

That sounds like something is throwing in that suspended component up to the Canvas' error boundary.

Nothing looks wrong from that snippet though. Can you share what you're seeing?

[TeamBaconn]

Here is my log shown: https://www.toptal.com/developers/hastebin/umusazetif.http Here is what it shown on expo app: https://imgur.com/a/PLlp2Bq

If i comment the useLoader, the mesh still be rendered with BasicMaterial color. I think its something weird with the useLoader thingy

[CodyJasonBennett]

Oh, I don't think you're suspending the component with useLoader. That will throw a promise to trigger suspense, so you need to wrap the component calling the hook.

const Material = ({ img }) => {
  const map = useLoader(TextureLoader, img)
  return <meshBasicMaterial map={map} />
}

//

<Suspense fallback={null}>
  <Material img={img} />
</Suspense>

This would be roughly equivalent to:

async function createMaterial(img) {
  const map = await loader.loadAsync(img)
  return new MeshBasicMaterial({ map })
}

//

await createMaterial(img)

[TeamBaconn]

I have my suspense inside canvas and inside the suspense is the Model component where i used useLoader to load texture for the Model. I think i'm doing it right and it gives me the suspense error.

If I throw the Suspense outside wrapping the Canvas. It won't throw any suspense error but still get the 2nd error I sent you earlier which is comming from useLoader i suppose

[CodyJasonBennett]

Closing this as resolved with react-native support in our previous beta release.

npm install react@beta @react-three/fiber@beta

import { Canvas, render, useLoader } from '@react-three/fiber/native'