So I try to develop an Android app with React-Native that uses the Google ML Kit pose detection. I'm still at the beginning of this project, but my first goal is to start the app and see if the pose detection works. Because of that I need the react-native-vision-camera and the react-native-worklets-core package for the frame processor. Just to let you know, in App.tsx I use the frame processor like that:
//[...]
const frameProcessor = useFrameProcessor((frame: any) => {
'worklet';
const poseObject = objectDetect(frame);
//[...]
and included it in the Camera-component in return:
return (
<>
<Camera
frameProcessor={frameProcessor}
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
/>
//[...]
Currently I still work with the emulator of Android Studio. I did everything as descripted in the directions of React-Native-Vision-Camera and -Worklets-core and the build is always successful but the app gives me the following error code on the emulator:
Uncaught Error
Frame Processors are not available, react-native-worklets-core is not installed! Error: TurboModuleRegistry.getEnforcing(...): 'Worklets' could not be found. Verify that a module by this name is registered in the native binary.
Bridgeless mode: false. TurboModule interop: false. Modules loaded:
{"NativeModules":["PlatformConstants","LogBox","Timing","AppState","SourceCode","BlobModule","WebSocketModule","DevSettings","DevToolsSettingsManager","Networking","Appearance","DevLoadingView","HeadlessJsTaskSupport","UIManager","DeviceInfo","ImageLoader","SoundManager","IntentAndroid","DeviceEventManager","RNGestureHandlerModule","I18nManager","ReanimatedModule"],"TurboModules":[],"NotFound":["NativePerformanceCxx","NativePerformanceObserverCxx","RedBox","BugReporting","LinkingManager","Worklets"]}
The point is: I already installed worklets-core!
My dependencies in package.json:
"dependencies": {
"metro-react-native-babel-preset": "^0.77.0",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-gesture-handler": "^2.14.0",
"react-native-reanimated": "^3.6.2",
"react-native-svg": "^15.3.0",
"react-native-vision-camera": "^4.0.5",
"react-native-worklets-core": "^1.3.3"
},
And the dependencies in build.gradle:
dependencies {
implementation("com.facebook.react:react-android")
implementation("com.facebook.react:react-native:+")
implementation("com.facebook.soloader:soloader:0.10.3")
implementation 'com.google.mlkit:pose-detection:18.0.0-beta4'
implementation 'com.google.mlkit:pose-detection-accurate:18.0.0-beta4'
implementation 'com.google.mlkit:vision-common:17.0.0'
implementation 'com.google.mlkit:vision-interfaces:16.0.0'
implementation 'com.google.mlkit:camera:16.0.0-beta3'
implementation 'androidx.annotation:annotation:1.3.0'
implementation 'com.google.android.gms:play-services-tasks:18.0.0'
implementation 'com.android.support:multidex:1.0.3'
implementation project(':react-native-gesture-handler')
implementation project(':react-native-vision-camera')
implementation project(':react-native-svg')
implementation project(':react-native-worklets-core')
if (hermesEnabled.toBoolean()) {
implementation("com.facebook.react:hermes-android")
} else {
implementation jscFlavor
}
}
And my babel configurations:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-private-methods',
'@babel/plugin-transform-flow-strip-types',
'@babel/plugin-transform-runtime',
'@babel/plugin-transform-arrow-functions',
['react-native-worklets-core/plugin'],
['react-native-reanimated/plugin', { globals: ['__poseDetection'] }],
],
};
Did I miss something? Is there a missing import that I'm not aware of?
I already deleted the node_modules and installed the dependencies again several times, but still the same error
I checked other versions of vision-camera and worklets-core, but anything else than V4 for vision-camera and V1 for worklets-core leads to compatibility issues with the other dependencies. For anything else: same error
I tried linking worklets-core manually to vision-camera, but for the version 1.x.x linking is disabled because it does it automatically according to the developers
I tried putting worklets-core as a peer dependency instead of a standard dependency. This actually leads to gradle not being able to build the app I get the error:
> Could not resolve all task dependencies for configuration ':classpath'.
> Could not find com.facebook.react:react-native-gradle-plugin:.
Required by:
project :
When used as a standard dependency, gradle is able to find the classpath
include ':react-native-worklets-core'
project(':react-native-worklets-core').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-worklets-core/android')
No changes at all
So I finally figured it out:
The Error consists of 2 parts:
To the first part: inserting 'import 'react-native-worklets-core';' in App.tsx, just like I mentioned in my comment, leads to solving this part.
To the second part: my imports of MainApplication.kt were not complete. Unfortunately I did not post them here, but the lines that I forgot were the import 'import com.worklets.WorkletsPackage' and the package itself for React where 'MainReactPackage' is listed as well:
override fun getPackages(): List<ReactPackage> {
return Arrays.asList<ReactPackage>(
MainReactPackage(),
PoseDetectionPackage(),
RNGestureHandlerPackage(),
ReanimatedPackage(),
CameraPackage(),
SvgPackage(),
WorkletsPackage() //This one
)
}
It's possible that the second part of this fix also solves the first part but I just tried several things and these steps fixed the whole issue for me.