Implement React Native Reanimated V2

[Parveshdhull]

Research issue for the implementation of react-native-reanimated v2

Summary:

Currently we are only using reanimated v1 API's and only version is bumped in package.json. We should Implement and use React Native Reanimated v2, at-least for newer animations for redesign.

Project Setup:

Configure project as per v2 installation guidelines and import API's.

Issues to fix

Issue 1:

useAnimatedStyle hook is one of the main element of reanimated v2. But when we use this hook like:

(reanimated/use-animated-style (fn [] #js {:width 100}))

It throws error:

Cannot convert undefined value to object

Screenshot:

this error is only shown in the older version, like 2.1.0, 2.2.0, etc. newer versions don't show errors due to this check, but the app just crashes with these logs

06-05 01:21:19.812 12779 12779 F DEBUG   : Abort message: 'JNI DETECTED ERROR IN APPLICATION: JNI GetObjectRefType called with pending exception java.lang.RuntimeException: Tried to synchronously call function {G__75911} from a different thread.
06-05 01:21:19.812 12779 12779 F DEBUG   : 
06-05 01:21:19.812 12779 12779 F DEBUG   : Occurred in worklet location: /home/parvesh_monu/Desktop/ArchFiles/React/status-react/node_modules/react-native-reanimated/src/reanimated2/hook/useAnimatedStyle.ts (492:18)
06-05 01:21:19.812 12779 12779 F DEBUG   : 
06-05 01:21:19.812 12779 12779 F DEBUG   : Possible solutions are:
06-05 01:21:19.812 12779 12779 F DEBUG   : a) If you want to synchronously execute this method, mark it as a Worklet
06-05 01:21:19.812 12779 12779 F DEBUG   : b) If you want to execute this method on the JS thread, wrap it using runOnJS
06-05 01:21:19.812 12779 12779 F DEBUG   :   at void com.swmansion.reanimated.AndroidErrorHandler.raise(java.lang.String) (AndroidErrorHandler.java:6)

Cause

This error occurs because useAnimatedStyle expects worklet as an argument (ref), while we are just passing a simple function.

While setting project we are also adding react-native-reanimated/plugin, which is supposed to convert the passed argument to worklet automatically (ref), which is not happening for us.

Issue 2

There is also another way to create worklet for reanimated v2. Using directives

function someWorklet(greeting) {
  'worklet';
  console.log("Hey I'm running on the UI thread");
}

This will also not work for clojure script, because even if I add "worklet" string, something like

(defn someWorklet [greeting]
    "worklet"
    (js/console.log "Hey I'm running on the UI thread"))

compiler will strip it out. It seems react-native-reanimated/plugin is more tailored toward javascript syntax and not working in cljs.

There is also a babel plugin available for using directive in cljs, but unfortunately it don't work in shadow-cljs.

Possible Solutions

1. One workaround can be to not rely on directive and the library can just provide a function to manually create worklets. Function is already there just not yet completely implemented (ref). One drawback of this is we have to maintain fork branch for the implementation for now, because even if change gets merged in parent, we can't use that because after version 2.4.0, latest versions of library needs gradlePluginVersion=4.2.2 and gradle 6.
2. Create or fix plugin so that directive also work for shadow-cljs. (?)

Related Refs:

• Original Issue
• Stackoverflow Question
• Issue Comment

[flexsurfer]

there is reanimated 3 is coming, so worth waiting and use it

[Parveshdhull]

Yes, Reanimated 3 looks great. But I think we have to skip using this for now.

Reanimated 3 will no longer include support for legacy Reanimated 1 API

And also it will most probably will require higher versions of gradle and gradle plugin.
(We should look into upgrading them, they are becoming blocker for several upgrades now)

[Parveshdhull]

Another solution: https://stackoverflow.com/a/72513996/7475429

[Parveshdhull]

Another solution: https://stackoverflow.com/a/72513996/7475429

So, I tried creating a separate Javascript file as mentioned in stackoverflow answer for the "worklets" and the app still crashed with the same error. I tried both with or without "directive" keyword and both time crashed.

For testing purposes, I created a simple react-native project, and with "directive" it worked but without it crashed with the exact error as above.

So, I think in shadow-cljs project adding directives not working even in the js file. Maybe the working of babel plugin not only affected by file type but also by project type.

[Parveshdhull]

The real magic behind the conversion of a regular function to a worklet is being handled by makeWorklet function of the reanimated plugin. Maybe we can directly implement this function in cljs?

[flexsurfer]

https://stackoverflow.com/questions/72500152/how-to-use-reanimated-worklet-directive-in-clojurescript

[flexsurfer]

i feel like all that reanimated stuff doesn't feet well clojurescript, a lot of interop, hooks hacks etc, so probably we should find a way how we could do it in plain js ?

[flexsurfer]

i believe @chrispader had all these issues here #13386 , would be great to hear his opinion

[flexsurfer]

probably we could do all animation code in js and just pass cljs components (views ) as a parameter (child)

[flexsurfer]

actually, i feel like we need to move quo2 in the separate library in plain js, so we'll have syles, components, and all animations in the separate js library, so other js devs could work on it and use it in their projects, wdyt ?

[Parveshdhull]

actually, i feel like we need to move quo2 in the separate library in plain js, so we'll have syles, components, and all animations in the separate js library, so other js devs could work on it and use it in their projects, wdyt ?

We are just using react-native components and polishing with styles as per our use case, I am not sure how much it will be useful for other projects.

I guess it will be somewhat easy for new contributors to contribute, but still not sure if it is worth it.

[Parveshdhull]

Another solution: https://stackoverflow.com/a/72513996/7475429

So, I tried creating a separate Javascript file as mentioned in stackoverflow answer for the "worklets" and the app still crashed with the same error. I tried both with or without "directive" keyword and both time crashed.

For testing purposes, I created a simple react-native project, and with "directive" it worked but without it crashed with the exact error as above.

So, I think in shadow-cljs project adding directives not working even in the js file. Maybe the working of babel plugin not only affected by file type but also by project type.

Using Javascript file for storing worklet directives worked.
Problem was for importing js file, I was using :require and file was being processed by shadow-cljs and directive didn't worked. But after using js/require file first went through metro and directive worked.