react-native-worklets-core icon indicating copy to clipboard operation
react-native-worklets-core copied to clipboard

Worklets.createRunOnJS stop the app

Open IlyaZusko opened this issue 1 year ago • 8 comments

In my project, I use the frameProcessor from the react-native-vision-camera library. I have a code like this:

  const device = useCameraDevice('front');

  const {detectFaces} = useFaceDetector({
    classificationMode: 'all',
  });

  const handleDetectedFaces = Worklets.createRunOnJS(faces => {
    console.log('faces detected', faces);
  });

  const frameProcessor = useFrameProcessor(
    frame => {
      'worklet';
      const faces = detectFaces(frame);
      handleDetectedFaces(faces);
    },
    [],
  );

  return (
    <View style={{ flex: 1 }}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        enableFpsGraph
        fps={15}
        videoHdr={false}
        frameProcessor={frameProcessor}
      />
    </View>
    )

When I launch the project and go to the screen where the function is called, the application immediately freezes and in xcode I get errors like in the screenshot below Снимок экрана 2024-07-11 в 12 22 34

My package.json

"react": "^18.3.1",
"react-native": "^0.74.3",
"react-native-vision-camera": "^4.4.1",
"react-native-vision-camera-face-detector": "^1.7.0",
"react-native-worklets-core": "^1.3.3",

My babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset', 'module:react-native-dotenv'],
  plugins: [
    [
      'react-native-reanimated/plugin',
      {
        processNestedWorklets: true,
      },
    ],
    ['react-native-worklets-core/plugin'],
  ],
};

Initially, I assumed that this was due to the fact that I transfer too often from the worklet stream to the js stream, however, I also tried to write just a functional where, at the click of a button, I would transfer information to the js stream once and the application still hung with the same errors in xcode. Has anyone faced similar problems and how did you solve them?

IlyaZusko avatar Jul 11 '24 09:07 IlyaZusko

Yeah I have been also facing the same issue. This started happening after I migrated to react-native-vision-camera v4.

Here is my dependancies

"react-native": "0.71.19"
"react-native-reanimated": "3.5.4"
"react-native-vision-camera": "4.5.0"
"react-native-vision-camera-face-detector": "1.7.0"
"react-native-worklets-core": "1.3.3"

And the fact is, If I create fresh project with above dependencies then it works. So I am clueless on how to debug this in my existing app.

@mrousavy I know you are very much busy, but just a guide on how to debug this would be really helpful.

SarjuHansaliya avatar Jul 24 '24 07:07 SarjuHansaliya

  • @IlyaZusko can you please expand the left hand side menu in Xcode so we can see the full call stack? Right now its truncated
  • Can you try just using the reanimated plugin? So try to remove this plugin entry ['react-native-worklets-core/plugin'], and see if it changes anything
  • Could you add all your code in to a reproduction app? This will help us a lot debugging this issue!

hannojg avatar Jul 24 '24 07:07 hannojg

Hopefully this is not thread hijacking. But: what version of the library is recommended to use, that wouldn't suffer from this issue for example?

Meligy avatar Aug 05 '24 02:08 Meligy

I upgraded to below versions and now its working without any issues

"react-native": "0.73.9"
"react-native-reanimated": "3.14.0"
"react-native-vision-camera": "4.5.1"
"react-native-vision-camera-face-detector": "1.7.0"
"react-native-worklets-core": "1.3.3"

SarjuHansaliya avatar Aug 05 '24 03:08 SarjuHansaliya

Same issue, even with the packages from above comment.

pvedula7 avatar Aug 13 '24 13:08 pvedula7

@IlyaZusko did you resolved this issue ?

vijaysahani4115 avatar Aug 20 '24 16:08 vijaysahani4115

I am facing the same issue..

c-goettert avatar Sep 18 '24 15:09 c-goettert