Is it possible to use react-three-fiber with React-Native CLI application?

[SB2318]

I have tried to set up it with React-Native CLI application, and came up with the following limitation.

error: Error: Unable to resolve module expo-file-system from C:\Newfolder\ReactNative3DAnim\node_modules\@react-three\fiber\native\dist\react-three-fiber-native.cjs.prod.js: expo-file-system could not be found within the project or in these directories:
  node_modules\@react-three\fiber\node_modules
  node_modules
  11 | var itsFine = require('its-fine');
  12 | var expoAsset = require('expo-asset');
> 13 | var fs = require('expo-file-system');
     |                   ^
  14 | var base64Js = require('base64-js');
  15 | var buffer = require('buffer');
  16 | require('react-reconciler/constants');
    at ModuleResolver.resolveDependency (C:\Newfolder\ReactNative3DAnim\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:138:15)
    at DependencyGraph.resolveDependency (C:\Newfolder\ReactNative3DAnim\node_modules\metro\src\node-haste\DependencyGraph.js:231:43)
    at C:\Newfolder\ReactNative3DAnim\node_modules\metro\src\lib\transformHelpers.js:156:21
    at resolveDependencies (C:\Newfolder\ReactNative3DAnim\node_modules\metro\src\DeltaBundler\buildSubgraph.js:42:25)
    at visit (C:\Newfolder\ReactNative3DAnim\node_modules\metro\src\DeltaBundler\buildSubgraph.js:83:30)
    at async Promise.all (index 0)
    at async visit (C:\Newfolder\ReactNative3DAnim\node_modules\metro\src\DeltaBundler\buildSubgraph.js:92:5)
    at async Promise.all (index 9)
    at async visit (C:\Newfolder\ReactNative3DAnim\node_modules\metro\src\DeltaBundler\buildSubgraph.js:92:5)
    at async Promise.all (index 2)

React Version: 18.2.0
React-Native version: 0.73.6

In the documentation also, there is no specification for the CLI project.

Yes, with expo-project it is okay, But if I want it to integrate with my CLI project, what will be the solution?

[SB2318]

Thanks again, If you consider this issue. :)

[CodyJasonBennett]

We maintain instructions for both, more specifically for react-native CLI:

https://docs.pmnd.rs/react-three-fiber/getting-started/installation#react-native

# Create and link bare app
npx react-native init my-app
npx install-expo-modules@latest
cd my-app

[SB2318]

Thank you. 😇

[Torstentjh]

Did you solve this problem? I have the same problem.

[SB2318]

Did you solve this problem? I have the same problem.

(i) install yarn
then (ii) install expo-modules

npx install-expo-modules@latest

Then the command line asks if u want to use expo or not (If you want to integrate expo-cli or not)

Select not by pressing N.

I think you will done.

[Torstentjh]

thank you，now，There is no error message on my console, but no content is rendered. I don't know what's wrong

[SB2318]

thank you，now，There is no error message on my console, but no content is rendered. I don't know what's wrong

Uninstall the app and reinstall again.
From now it will be functionality issue of that library.
You can comment out your import for testing purpose

[SB2318]

thank you，now，There is no error message on my console, but no content is rendered. I don't know what's wrong

Uninstall the app and reinstall again. From now it will be functionality issue of that library. You can comment out your import and try to render some dummy text for testing purpose.

[Torstentjh]

Hello, are you using gltf or glb format? I have tried both. The glb format does not report an error but does not display content, while the gltf format prompts that the texture cannot be loaded. 😭

[t104360088]

Hi @SB2318 ,

I try the commands but got this error message, could you help me? thanks.

error: Error: Unable to resolve module expo-gl from ../node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.prod.js: expo-gl could not be found within the project or in these directories:
  node_modules/@react-three/fiber/node_modules
  node_modules
   7 | var THREE = require('three');
   8 | var reactNative = require('react-native');
>  9 | var expoGl = require('expo-gl');
     |                       ^
  10 | var itsFine = require('its-fine');
  11 | var jsxRuntime = require('react/jsx-runtime');
  12 | var expoAsset = require('expo-asset');

I got the other error after using npm i expo-gl .

 ERROR  Error: Cannot find native module 'ExponentGLObjectManager', js engine: hermes 
    at anonymous (http://localhost:8081/node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.dev.bundle//&platform=android&lazy=true&app=com.test&modulesOnly=true&dev=true&minify=false&runModule=true&shallow=true:147:24)
    at FiberProvider (http://localhost:8081/node_modules/its-fine/dist/index.bundle//&platform=android&lazy=true&app=com.test&modulesOnly=true&dev=true&minify=false&runModule=true&shallow=true:93:36)
    at CanvasWrapper
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at ThreeDScreen
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at RCTScrollView
    at ScrollView (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:74600:36)
    at ScrollView
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at App (http://localhost:8081/App.bundle//&platform=android&lazy=true&app=com.test&modulesOnly=true&dev=true&minify=false&runModule=true&shallow=true:73:54)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at AppContainer (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64126:25)
    at test(RootComponent) (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:117471:28)

[SB2318]

Hi @SB2318 ,

I try the commands but got this error message, could you help me? thanks.

error: Error: Unable to resolve module expo-gl from ../node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.prod.js: expo-gl could not be found within the project or in these directories:
  node_modules/@react-three/fiber/node_modules
  node_modules
   7 | var THREE = require('three');
   8 | var reactNative = require('react-native');
>  9 | var expoGl = require('expo-gl');
     |                       ^
  10 | var itsFine = require('its-fine');
  11 | var jsxRuntime = require('react/jsx-runtime');
  12 | var expoAsset = require('expo-asset');

I got the other error after using npm i expo-gl .

 ERROR  Error: Cannot find native module 'ExponentGLObjectManager', js engine: hermes 
    at anonymous (http://localhost:8081/node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.dev.bundle//&platform=android&lazy=true&app=com.test&modulesOnly=true&dev=true&minify=false&runModule=true&shallow=true:147:24)
    at FiberProvider (http://localhost:8081/node_modules/its-fine/dist/index.bundle//&platform=android&lazy=true&app=com.test&modulesOnly=true&dev=true&minify=false&runModule=true&shallow=true:93:36)
    at CanvasWrapper
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at ThreeDScreen
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at RCTScrollView
    at ScrollView (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:74600:36)
    at ScrollView
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at App (http://localhost:8081/App.bundle//&platform=android&lazy=true&app=com.test&modulesOnly=true&dev=true&minify=false&runModule=true&shallow=true:73:54)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64253:43)
    at AppContainer (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:64126:25)
    at test(RootComponent) (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.test&modulesOnly=false&runModule=true:117471:28)

what step you have followed

[SB2318]

First delete your node_modules as well as package.lock or yarn.lock

Then try to follow the step after a 'npm clean cache' or 'npm start --reset-cache' If you are using npm

install yarn then (ii) install expo-modules

npx install-expo-modules@latest

Then the command line asks if u want to use expo or not (If you want to integrate expo-cli or not)

Select not by pressing N.

I think you will done.

@t104360088 please let me know If this suggestion helps you. 😇

[t104360088]

Thanks for your reply. I fix the issue by using npx expo install expo-gl .