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. 😭