Add react-native-reanimated v4 support #2374

lucaswitch · 2025-07-24T19:55:19Z

First of all, thank you for this library. Basically a "must install" on almost every react-native project.

This pull request is responsible for adding support to react-native-reanimated v4.

Motivation

React Native Reanimated v4 introduces some breaking changes, but we want to maintain compatibility by continuing to support it within the existing v5 branch.

To achieve this, we added a custom useWorkletCallback hook that performs a runtime check: if the original useWorkletCallback is available, it uses it; otherwise, it falls back to the new approach described in the official documentation.

I also removed addWhitelistedNativeProps and addWhitelistedUIProps since they are no longer used in v4.
This update still requires testing before production release, so it can be considered a release candidate for now.

lucaswitch · 2025-07-24T21:02:16Z

I'm testing it by including on a example app using: "@gorhom/bottom-sheet": "git+https://github.com/lucaswitch/react-native-bottom-sheet.git",

lucaswitch · 2025-07-25T03:25:07Z

Its not done yet. I ll work on it tomorrow

Splanis · 2025-07-25T12:00:56Z

Did anyone faced an issue that BottomSheetModals are being dismissed immediately (they are rendered for like 50ms and closing)? :/

MadeinFrance · 2025-07-25T12:15:41Z

src/hooks/useWorkletCallback.ts

+  : function useWorkletCallback<T extends (...args: any[]) => any>(callback: T, deps: readonly unknown[]): T {
+      return useCallback((...args: Parameters<T>): ReturnType<T> => {
+        'worklet';
+        return callback?.(...args);


I got the following error: Error: [Worklets] Tried to synchronously call a non-worklet function evaluatePosition on the UI thread.

Yes, i'm seeing that error still looks like the current approach is not enough for inner functions.

evaluatePosition is broken:

lucaswitch · 2025-07-25T13:24:29Z

Did anyone faced an issue that BottomSheetModals are being dismissed immediately (they are rendered for like 50ms and closing)? :/

This is happening after this pull request somehow there some behavior changes between reanimated v3 and reanimated v4. I'm looking forward to see whats happening.

lucaswitch · 2025-07-25T13:39:48Z

Did anyone faced an issue that BottomSheetModals are being dismissed immediately (they are rendered for like 50ms and closing)? :/

This is happening after this pull request somehow there some behavior changes between reanimated v3 and reanimated v4. I'm looking forward to see whats happening.

But must be something with the my application and yours cause the example apple is running smooth

lucaswitch · 2025-07-25T13:44:15Z

https://github.com/user-attachments/assets/1b55807e-15e7-4825-a715-33041ee842a4
Test with v3
"react-native-reanimated": "~3.17.4"

lucaswitch · 2025-07-25T14:00:00Z

https://github.com/user-attachments/assets/1b55807e-15e7-4825-a715-33041ee842a4 Test with v3 "react-native-reanimated": "~3.17.4"

I'll test on v4

lucaswitch · 2025-07-25T17:30:05Z

Did anyone faced an issue that BottomSheetModals are being dismissed immediately (they are rendered for like 50ms and closing)? :/

This is happening on v4

… both

lyonscrawl · 2025-07-25T20:07:32Z

Getting this using your master branch and reanimated 4, sometimes it opens or not, sometimes i am getting this error

"@gorhom/bottom-sheet": "github:lucaswitch/react-native-bottom-sheet",
"react-native-reanimated": "~4.0.0",

lucaswitch · 2025-07-25T20:13:29Z

Getting this using your master branch and reanimated 4, sometimes it opens or not, sometimes i am getting this error
"@gorhom/bottom-sheet": "github:lucaswitch/react-native-bottom-sheet", "react-native-reanimated": "~4.0.0",

Yep it's not ready yet. I'm trying to fix it. Also the SectionList example is not working yet.

lucaswitch · 2025-07-25T20:38:46Z

Screen.Recording.2025-07-25.at.17.36.08.mov

This is the current behavior with reanimated v4.

matiaswastaken · 2025-07-30T16:06:20Z

Yep got same issue with reanimated v4, the BottomSheetModal just closes if the content is smaller than 50% of the height of the device.

gorhom · 2025-08-03T18:27:43Z

@lucaswitch thanks for submitting this PR, im working now in merging it with #2223 & #2356

ericpoulinnz · 2025-08-05T04:25:38Z

Yep got same issue with reanimated v4, the BottomSheetModal just closes if the content is smaller than 50% of the height of the device.

Yeah I get this with reanimated v4 + bottom sheet 5.1.8

tigranpetrossian · 2025-08-11T07:06:43Z

@lucaswitch @gorhom Thanks for doing this.
This is a bit of a blocker for what I'm working on, anything I can help with to get this in?

lucaswitch · 2025-08-11T12:24:18Z

Yes! every help wanted, what we are facing now is a behavior change between reanimated v3 and v4 somehow on modals it cannot detect the children elements size correctly.
I'm in a middle of a release in the company i'm working on so i'm not working on it this week.

tigranpetrossian · 2025-08-12T11:17:52Z

Thanks @lucaswitch
It looks like updating RNR to v4.0.2 fixes the modal issue, but I had no luck so far in understanding the cause for SectionList/VirtualizedList crashing. Will spend a little more time later today looking into it.

Chirag7096 · 2025-09-11T00:00:44Z

I tried the template with EXPO SDK 54, and it's not working

I get a warning
Couldn't find the scrollable node handle id!

And when I try to scroll, the app crashes

My basic code

<BottomSheetModal>
    <BottomSheetScrollView>
        {My code...}
    </BottomSheetScrollView>
</BottomSheetModal>

package.json

    "@gorhom/bottom-sheet": "^5.2.6",
    "react-native-reanimated": "~4.1.0",
    "react-native-worklets": "^0.5.1"

christophehurpeau · 2025-09-14T14:15:10Z

@lucaswitch @tigranpetrossian I don't know why exactly but after investigating using AI the issue on SectionList/VirtualizedList crashing seems to be related to useAnimatedRef of useScrollHandler: changing it to useRef make it works but I have no idea what this change would break.

Not sure about the AI but this is what it is saying:

I hope this helps ?

lucaswitch added 4 commits July 24, 2025 16:43

feat: add support to react-native-reanimated v4

18448fb

feat: add support to react-native-reanimated v4

fb0bb77

fix: fix backwards support to v3

2ec7d56

fix: fix useWorkletCallback definition

9855aea

lucaswitch mentioned this pull request Jul 24, 2025

Migrate from useWorkletCallback #2356

Merged

fix: add upgrade reanimated notice and add worklet functions annotations

9c908b9

MadeinFrance reviewed Jul 25, 2025

View reviewed changes

fix: add the useCallback approach

a6dfe2c

fix: fix example and update example deps and babel configs to support…

f933756

… both

fix: revert bottom sheet default index on reanimated v4

e007f43

gorhom force-pushed the master branch 2 times, most recently from 425b6ec to a123b17 Compare August 17, 2025 21:39

nhatanhvl approved these changes Aug 29, 2025

View reviewed changes

bnussman mentioned this pull request Sep 14, 2025

chore: Expo SDK 54 bnussman/beep#146

Merged

renanmav mentioned this pull request Sep 23, 2025

[v4] "Couldn't find the scrollable node handle id!" console warning printed from BottomSheetScrollView in tests #1919

Closed

Uh oh!

Add react-native-reanimated v4 support #2374

Are you sure you want to change the base?

Add react-native-reanimated v4 support #2374

Conversation

lucaswitch commented Jul 24, 2025

Motivation

Uh oh!

lucaswitch commented Jul 24, 2025

Uh oh!

lucaswitch commented Jul 25, 2025

Uh oh!

Splanis commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MadeinFrance Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

lucaswitch Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

lucaswitch Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

MadeinFrance Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

lucaswitch commented Jul 25, 2025

Uh oh!

lucaswitch commented Jul 25, 2025

Uh oh!

lucaswitch commented Jul 25, 2025

Uh oh!

lucaswitch commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lucaswitch commented Jul 25, 2025

Uh oh!

lyonscrawl commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lucaswitch commented Jul 25, 2025

Uh oh!

lucaswitch commented Jul 25, 2025

Uh oh!

matiaswastaken commented Jul 30, 2025

Uh oh!

gorhom commented Aug 3, 2025

Uh oh!

ericpoulinnz commented Aug 5, 2025

Uh oh!

tigranpetrossian commented Aug 11, 2025

Uh oh!

lucaswitch commented Aug 11, 2025

Uh oh!

tigranpetrossian commented Aug 12, 2025

Uh oh!

Chirag7096 commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

christophehurpeau commented Sep 14, 2025

Uh oh!

Uh oh!

Splanis commented Jul 25, 2025 •

edited

Loading

lucaswitch commented Jul 25, 2025 •

edited

Loading

lyonscrawl commented Jul 25, 2025 •

edited

Loading

Chirag7096 commented Sep 11, 2025 •

edited

Loading