facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
118.96k stars 24.31k forks source link

use turboModule in app not as a libray in node_modules folder work fail, js file can not find the turboModule #44273

Closed ncwuguowei closed 1 month ago

ncwuguowei commented 6 months ago

Description

1.use newArch in app 2.create a turboModule in app,but no as a libray in external folder ,then yard add into node_module to be a library(as a library can not use app src and feacture ). 3.modify the root package.json to add codegenConfig add js file to Define Specs in JavaScript ./gradlew generateCodegenArtifactsFromSchema to gererate jni files create implement turboModule and TurboReactPackage add TurboReactPackage to ReactNativeHost packagelist

  1. modify App.tsx, import the turboModule, add add a button, on press click to call turboModule funcation, crash the error is can find the turboModule

Steps to reproduce

  1. Install the application with 'yarn android '
  2. Click on the button 'COMPUTE' on the home
  3. Notice the crash ,click the error tips

React Native Version

0.73.7

Affected Platforms

Runtime - Android, Build - Windows

Areas

TurboModule - The New Native Module System

Output of npx react-native info


info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.19045
  CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
  Memory: 1.80 GB / 15.71 GB
Binaries:
  Node:
    version: 20.11.1
    path: D:\Programs\nodejs\node.EXE
  Yarn:
    version: 1.22.21
    path: D:\Programs\nodejs\node_modules\node_modules\yarn\bin\yarn.CMD
  npm:
    version: 10.2.4
    path: D:\Programs\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
IDEs:
  Android Studio: Not Found
  Visual Studio: Not Found
Languages:
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.74.0 is now available (your project is running on v0.73.6).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.74.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".

Stacktrace or Logs

LOG  Running "ReproducerApp" with {"rootTag":21,"initialProps":{"concurrentRoot":true},"fabric":true}

TypeError:Cannot read property 'add' of null

source 
const value = await RTNCalclator.add(3, 7);

Reproducer

https://github.com/ncwuguowei/reproducer-react-native

Screenshots and Videos

image

image

github-actions[bot] commented 6 months ago
:warning: Newer Version of React Native is Available!
:information_source: You are on a supported minor version, but it looks like there's a newer patch available - 0.73.7. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.
ncwuguowei commented 6 months ago

upgrade the react version to 0.73.7, the issue also exits.

mensonones commented 5 months ago

Hi, @ncwuguowei!

Is there somewhere in the documentation of the new architecture that describes that we can create a turbo module that is not like a library (external folder)?

cipolleschi commented 1 month ago

@ncwuguowei @mensonones Hi there, sorry if it took me a lot of time to get back at you. Currently there is no documentation to do such thing, but it is totally possible as RNTester is doing that. I'll setup a sample repository for an example and I'll report it here.

cipolleschi commented 1 month ago

This is the Sample Repo I put together: https://github.com/cipolleschi/InAppModule

For now, there is only iOS, as that's my expertise. Steps for android should be similar, but step 3 will change as we have to implement the module in Java or Kotlin. I'll be back at that later today or worse case tomorrow.

cipolleschi commented 1 month ago

Android code added here: cipolleschi/InAppModule

The readme explains it step by step.

The results:

mensonones commented 1 month ago

Android code added here: cipolleschi/InAppModule

The readme explains it step by step.

The results:

Thank you very much for the answer and your work, @cipolleschi