react-navigation-bottom-sheet icon indicating copy to clipboard operation
react-navigation-bottom-sheet copied to clipboard

fix: don't wrap content with `BottomSheetView` when `enableDynamicSizing` is `true`

Open jeanregisser opened this issue 5 months ago • 3 comments

Hey,

This PR is to get the discussion started on the following problem: We're using react-navigation-bottom-sheet with enableDynamicSizing set to true but want to use BottomSheetScrollView (or other Gorhom components: BottomSheetFlatList, BottomSheetSectionList, etc) within the screen to get proper sizing and all features that go with it (scroll down to dismiss, etc).

Currently with the latest version of react-navigation-bottom-sheet (0.3.2), this causes sizing issues and blank renders. I tracked it down to having both BottomSheetView (in this lib) and BottomSheetScrollView (in our own screen) nested. They somehow conflict.

As a workaround I've patched it to remove the BottomSheetView wrapping: https://github.com/valora-inc/wallet/blob/bbd0e39dcc1420a704fa866113994e9a20c3bfa4/patches/%40th3rdwave%2Breact-navigation-bottom-sheet%2B0.3.2.patch

This works pretty well for us, but we must ensure the screens use one of the Gorhom components.

I'm not sure about the "right" solution to avoid this patch. Here are possible options:

  1. force the consumers of this lib to wrap their screens with the Gohrom component they need
  2. iterate over the children to see if one of them is a Gohrom component
    • not sure it would work for all cases, especially if the screen nests another bottom sheet that doesn't need to be a screen
  3. add a new property for devs to set when they don't want the default wrapping with BottomSheetView
  4. other?

Looking forward to finding a solution that will work for all users of this lib.

jeanregisser avatar Sep 10 '24 13:09 jeanregisser