react-native-bottom-sheet Add react-native-reanimated v4 support

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.

Jul 24 '25 19:07 lucaswitch

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

Jul 24 '25 21:07 lucaswitch

Its not done yet. I ll work on it tomorrow

Jul 25 '25 03:07 lucaswitch

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

Jul 25 '25 12:07 Splanis

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.

Jul 25 '25 13:07 lucaswitch

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

Jul 25 '25 13:07 lucaswitch

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

Jul 25 '25 13:07 lucaswitch

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

Jul 25 '25 14:07 lucaswitch

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

This is happening on v4

Jul 25 '25 17:07 lucaswitch

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",

Jul 25 '25 20:07 lyonscrawl

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.

Jul 25 '25 20:07 lucaswitch

https://github.com/user-attachments/assets/6bd0996b-60e4-44b4-8e7c-2c9605021c70

This is the current behavior with reanimated v4.

Jul 25 '25 20:07 lucaswitch

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

Jul 30 '25 16:07 matiaswastaken

@lucaswitch thanks for submitting this PR, im working now in merging it with https://github.com/gorhom/react-native-bottom-sheet/pull/2223 & https://github.com/gorhom/react-native-bottom-sheet/pull/2356

Aug 03 '25 18:08 gorhom

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

Aug 05 '25 04:08 ericpoulinnz

@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?

Aug 11 '25 07:08 tigranpetrossian

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.

Aug 11 '25 12:08 lucaswitch

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.

Aug 12 '25 11:08 tigranpetrossian

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"

Sep 11 '25 00:09 Chirag7096

@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.