Update how Gesture Handler exposes `setGestureState` to the Reanimated UI runtime #3207

j-piasecki · 2024-11-12T16:22:46Z

Description

Changes how setGestureState is exposed to the UI runtime. Instead of the weird conditionally adding Reanimated as a dependency on Android and the weird cast on iOS it uses _WORKLET_RUNTIME const injected by Reanimated into the JS runtime. This allows Gesture Handler to decorate the UI runtime without direct dependencies between the libraries.

TODO:

look more closely at conditionally adding Reanimated as a dependency on Android as it does more than just handle setGestureState
restore FabricExample to the state from before this PR

Caution

This works only on the New Architecture (and breaks the old one)

Test plan

TODO

FabricExample/package.json

tomekzaw · 2025-04-17T13:44:20Z

src/handlers/gestures/gestureStateManager.ts

+
+  if (REANIMATED_AVAILABLE) {
+    // When Reanimated is available, setGestureState should be defined
+    if (global._setGestureStateNew) {


Let's use globalThis instead of global, I believe @tjzel can provide some more insights on that.

Suggested change

if (global._setGestureStateNew) {

if (globalThis._setGestureState) {

Also, I'm not sure if we need to include "new" in the name, how about using _setGestureState instead and renaming setGestureState to setGestureStateOld` as suggested in another comment?

I'd prefer not to change the previous method - it's consumed by RNGH, but it's defined entirely on the Reanimated part. Changing it will very likely break the integration between Reanimated and older versions of RNGH.

And _setGestureStateNew is subject to change, though _setGestureState will be hard to beat 😅

Using globalThis will help you with exotic web environments as it should point to the right context of window, global, self, etc.

Updated the code to use globalThis. I also changed the name - it will be possible to change the state of the gesture from the JS thread as well, so names are:

_setGestureStateSync on UI runtime

_setGestureStateAsync on JS runtime

src/handlers/gestures/gestureStateManager.ts

tomekzaw · 2025-04-17T13:47:31Z

src/RNGestureHandlerModule.ts

+
+function tryInstallUIBindings() {
+  if (global._WORKLET_RUNTIME) {
+    console.log('Installing Gesture Handler UI bindings');


Do we want to keep those console.logs in .ts file? Maybe let's convert them to comments.

Nope, but they are useful for development. One of the todos from the PR description is get rid of the console logs

tomekzaw · 2025-04-17T13:47:38Z

src/RNGestureHandlerModule.ts

+    setTimeout(() => {
+      console.log('Waiting for worklet runtime to be available');
+      tryInstallUIBindings();
+    }, 1);


not good, did this actually happen to you? I believe that _WORKLET_RUNTIME is injected synchronously once we import react-native-reanimated

Reanimated's index.ts doesn't have any side-effects and just requiring it might not trigger the TurboModule to initialize. I think it would be better to require executeOnUIRuntimeSync, then invoke it with a HostFunction that will invoke native tryInstallUIBindings, to make sure the pipeline is all set.

I switched to a different approach - instead of decorating the UI runtime immediately, I do it lazily when the first gesture is created. This way, the possible delay should be mitigated entirely.

android/src/main/jni/RNGestureHandlerModule.cpp

tomekzaw · 2025-04-17T14:00:37Z

Additionally, I'd like to rename NativeMethods.h to GestureHandler.h or SetGestureState.h in react-native-reanimated, is that okay?

https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-reanimated/apple/reanimated/apple/native/NativeMethods.h

android/src/main/jni/RNGestureHandlerModule.h

tjzel

Very nice work overall, I like the removals 😎

tjzel · 2025-04-18T16:36:56Z

android/src/main/jni/RNGestureHandlerModule.h

+        friend HybridBase;
+        jsi::Runtime* rnRuntime = nullptr;
+
+        jni::global_ref<RNGestureHandlerModule::javaobject> javaPart_;


You must release javaPart_ when native modules are invalidated, otherwise you'll create a retain cycle and leak memory.

You mean in the destructor of the C++ class or something else?

apple/RNGestureHandlerModule.mm

src/RNGestureHandlerModule.ts

tjzel · 2025-04-18T16:45:09Z

src/RNGestureHandlerModule.ts

+    setTimeout(() => {
+      console.log('Waiting for worklet runtime to be available');
+      tryInstallUIBindings();
+    }, 1);


Reanimated's index.ts doesn't have any side-effects and just requiring it might not trigger the TurboModule to initialize. I think it would be better to require executeOnUIRuntimeSync, then invoke it with a HostFunction that will invoke native tryInstallUIBindings, to make sure the pipeline is all set.

src/handlers/gestures/gestureStateManager.ts

tomekzaw · 2025-05-13T13:48:47Z

apple/RNGestureHandlerModule.mm

+  jsi::Runtime &rt = *_rnRuntime;
+
+  const auto arrayBufferValue =
+      rt.global().getProperty(rt, "_WORKLET_RUNTIME").getObject(rt).getArrayBuffer(rt).data(rt);
+  const auto uiRuntimeAddress = reinterpret_cast<uintptr_t *>(&arrayBufferValue[0]);
+  jsi::Runtime &uiRuntime = *reinterpret_cast<jsi::Runtime *>(*uiRuntimeAddress);
+
+  __weak RNGestureHandlerModule *weakSelf = self;
+
+  auto setGestureStateNew = jsi::Function::createFromHostFunction(
+      uiRuntime,
+      jsi::PropNameID::forAscii(uiRuntime, "_setGestureStateNew"),
+      2,
+      [weakSelf](jsi::Runtime &runtime, const jsi::Value &, const jsi::Value *args, size_t count) -> jsi::Value {
+        if (count == 2) {
+          const auto handlerTag = static_cast<int>(args[0].asNumber());
+          const auto state = static_cast<int>(args[1].asNumber());
+
+          // TODO: expose to JS and dispatch to UI thread if called on JS?
+          RNGestureHandlerModule *strongSelf = weakSelf;
+          if (strongSelf != nullptr) {
+            [strongSelf setGestureState:state forHandler:handlerTag];
+          }
+        }
+        return jsi::Value::undefined();
+      });
+
+  uiRuntime.global().setProperty(uiRuntime, "_setGestureStateNew", std::move(setGestureStateNew));


Why don't we move this code to the same place where isViewFlatteningDisabled is defined?

It needs to be delayed since there's no guarantee UI runtime will be initialized and injected into the JS one by this point.

- `setGestureState` -> `setGestureState_DEPRECATED` (JSI injected name stays the same for compatibility) - `_setGestureStateNew` -> `_setGestureStateModern`

j-piasecki requested a review from tomekzaw November 12, 2024 16:24

j-piasecki force-pushed the @jpiasecki/update-reanimated-integration branch from 4b6cb29 to 039e228 Compare April 17, 2025 13:19

tomekzaw requested changes Apr 17, 2025

View reviewed changes

tomekzaw changed the title ~~Update how gesture handler exposes setGestureState to the ui runtime~~ Update how Gesture Handler exposes setGestureState to the Reanimated UI runtime Apr 17, 2025

tomekzaw reviewed Apr 17, 2025

View reviewed changes

android/src/main/jni/RNGestureHandlerModule.h Outdated Show resolved Hide resolved

tjzel reviewed Apr 18, 2025

View reviewed changes

tomekzaw reviewed May 13, 2025

View reviewed changes

j-piasecki added 17 commits May 27, 2025 09:19

Bump Reanimated

a074641

Update ios

16c1f7c

Update android

e713b5b

Use Reanimated 4 beta

c678330

Renames:

e5b9498

- `setGestureState` -> `setGestureState_DEPRECATED` (JSI injected name stays the same for compatibility) - `_setGestureStateNew` -> `_setGestureStateModern`

Decorate UI runtime lazily

f0e6d0a

Use non-deprecated method

74dd724

Rename to _setGestureStateSync

35f9ca3

Extract runtime decoration to shared code

6d608df

Prefix with underscore

0e972ad

Handle calling setGestureState from other threads

fd01119

Expose _setGestureStateAsync to JS runtime

184e52d

Make state manager work also on JS

a121dfd

Add cpp format script

4f73b93

Format c++

184a72b

Don't format build folders

6b99927

Fix header

12c9f11

j-piasecki force-pushed the @jpiasecki/update-reanimated-integration branch from 08271fd to 12c9f11 Compare May 27, 2025 12:21

Remove some gates

296b706

	if (global._setGestureStateNew) {
	if (globalThis._setGestureState) {

Uh oh!

Update how Gesture Handler exposes setGestureState to the Reanimated UI runtime #3207

Are you sure you want to change the base?

Update how Gesture Handler exposes setGestureState to the Reanimated UI runtime #3207

Uh oh!

Conversation

j-piasecki commented Nov 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test plan

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tomekzaw commented Apr 17, 2025

Uh oh!

Uh oh!

tjzel left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Update how Gesture Handler exposes `setGestureState` to the Reanimated UI runtime #3207

Update how Gesture Handler exposes `setGestureState` to the Reanimated UI runtime #3207

j-piasecki commented Nov 12, 2024 •

edited

Loading