[Bug]: BottomSheetModal not opening in React Native 0.79 despite working setup

[etoiva]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

BottomSheetModal` does not open in my React Native 0.79 project, even though:

• ref.current?.present() is called and defined
• Using BottomSheetModalProvider at root
• Using GestureHandlerRootView at root
• Reanimated plugin added to babel.config.js (and placed last)
• All versions are compatible with RN 0.79

Interestingly, @gorhom/portal works perfectly, but BottomSheetModal silently fails.

Reproduction steps

• 1. Call .present() on a ref to BottomSheetModal

2. Confirm it's defined, and log runs
3. No visible error, but no bottom sheet appears

Reproduction sample

https://snack.expo.dev/@etoivag/bottom-sheet---issue-reproduction-template

Relevant log output

[etoiva]

is anyone here?

[Maniae]

Using <BottomSheetView/> instead of <View/> in the provided snack allows the BottomSheet to display its content. https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetview

[etoiva]

problem is with BottomSheetModal />, BottomSheet /> works

[petrbela]

Looks like it works in 5.1.4, so something broke it in 5.1.5, maybe the portal changes or dependency updates?

[rklf]

Experiencing a similar issue, seems like portal changes broke something. Working properly in 5.1.4 but no anymore in nexts.

[lucaslcode]

Also having this problem. We are also using portals separately from the bottom sheet in our app.

Removing hostName from usePortal on line 78 and the portal component on line 445 in BottomSheetModal.tsx fixes the issue.

Moving the BottomSheetModalProvider inside our root PortalProvider makes bottom sheet modals appear, but then our notifications (which use Portal) don't appear.

Obviously there is some behaviour we were relying on (BottomSheetModals going to our PortalProvider instead of the one in BottomSheetModalProvider?) however I couldn't find any combination that gets them both to work.

Downgrading to 5.1.4 fixes both

[MerijnCanvas]

Not sure if this will help anyone, but my issue was that I wrapped my BottomSheetModal in a Portal, which isn't necessary. Issue also started existing when updating from 6.1.4 -> 6.1.5.

So e.g. I had:

<Portal>
    <BottomSheetModal />
</Portal>

and simply removed the portal

[KiranSayone]

Anyone got a valid fix. Downgrading from 6.1.5 to 6.1.4 did not help me. Tried BottomSheetView instead of View and that did not work as well. Rn Version 0.79.0

[dispelpowerone]

The same issue after upgrading from "4.6.4" to "5.1.4"/"5.1.6". Modal is not shown on the present() call. Works with dynamic sizing disabled:

enableDynamicSizing={false}
snapPoints={['1%', '70%']}

[sharifhh]

@dispelpowerone https://github.com/gorhom/react-native-bottom-sheet/pull/2387

[pepperav]

The same issue after upgrading from "4.6.4" to "5.1.4"/"5.1.6". Modal is not shown on the present() call. Works with dynamic sizing disabled:

enableDynamicSizing={false}
snapPoints={['1%', '70%']}

setting false the enableDynamicSizing let me to fix it 5.1.8

[Manikanta-duEITC]

any solutions?. App crashing at methodQueue = [(id<RCTBridgeModule>)module methodQueue]; on IOS

[santhosh-umapathi-wikifolio]

animationConfigs={{
        overshootClamping: false,
      }}

This works

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[pranshulantz01]

issue is still there bot.

[devgrapher]

For me, <Portal.Provider> was already set up in my project.

before

<BottomSheet.BottomSheetModalProvider>
  <Portal.Provider>
   ...
  </Portal.Provider>
</BottomSheet.BottomSheetModalProvider>

after

<Portal.Provider>
   <BottomSheet.BottomSheetModalProvider>
   ...
  </BottomSheet.BottomSheetModalProvider>
</Portal.Provider>

Just inverted the order and it worked. This seems related to https://github.com/gorhom/react-native-bottom-sheet/commit/711ea7a5290ef485b9ba5c65eb45e28d6e495b43

[Slobodan-Starcevic]

Hello everyone. I had the same issue now and tried all these options that were supposed to work, but nothing did, I also don't use portals in react native.

The solution stupidly enough turned out to be setting the index to 0, instead of -1 like you are supposed to for BottomSheet. This works for me with snappoint and/or enableDynamicSizing.

I hope this helps someone else finally open up the BottomSheetModal.

For the maintainers, I assume this could be an easy lead to figure out why this is happening? I'd love to resolve the issue, but looking at how many stale PR's there are I'm not sure there is a point.

[YaoHuiJi]

I think this issue is related — everything worked fine with @gorhom/bottom-sheet 5.1.4, but after upgrading to 5.1.5, the following problem appeared.

• If I have the PortalProvider inside the BottomSheetModalProvider, the bottom sheet modals do not present
• If the BottomSheetModalProvider is inside the PortalProvider, the components inside the Portal do not show

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.