[v5] Bottom sheet is not longer opening

[Chasty]

Bug

Environment info

Library	Version
@gorhom/bottom-sheet	5.0.0-alpha.7
react-native	0.72.10
react-native-reanimated	3.3.0
react-native-gesture-handler	2.12.0

Steps To Reproduce

1. just using this version "@gorhom/bottom-sheet": "4.4.7" it works perfectly.

Describe what you expected to happen:

I expect it to be opened.

Reproducible sample code

That's the code i have and whenever i want to open the bottom sheet it does not even open it.

import { View } from 'react-native'
import { BottomSheetBackdrop, BottomSheetModal } from '@gorhom/bottom-sheet'
import React, { RefObject, useCallback, useMemo } from 'react'
import CheatSheetContent from './CheatSheetContent'
import { styles } from './CheatSheet.styles'

type CheatSheetProps = {
  bottomSheetModalRef: RefObject<BottomSheetModal>
}

const CheatSheet = ({ bottomSheetModalRef }: CheatSheetProps) => {
  const renderBackdrop = useCallback(
    (props: React.ComponentProps<typeof BottomSheetBackdrop>) => (
      <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} />
    ),
    []
  )

  const snapPoints = useMemo(() => ['85%'], [])

  return (
    <View>
      <BottomSheetModal
        ref={bottomSheetModalRef}
        index={0}
        snapPoints={snapPoints}
        backdropComponent={renderBackdrop}
        detached={false}
        handleStyle={styles.bottomSheetHandleStyle}
        handleIndicatorStyle={styles.bottomSheetIndicatorStyle}
        keyboardBlurBehavior="restore"
      >
        <CheatSheetContent />
      </BottomSheetModal>
    </View>
  )
}

And open it like this.

 const bottomSheetModalRef = useRef<BottomSheetModal>(null)

  const openBottomModal = useCallback(() => {
    bottomSheetModalRef.current?.present()
  }, [])
  const closeBottomModal = useCallback(() => {
    bottomSheetModalRef.current?.close()
  }, [bottomSheetModalRef])
  
  
<CheatSheet bottomSheetModalRef={bottomSheetModalRef} />

[Chasty]

UPDATE: this is broken since this version 5.0.0-alpha.5, even the example from here does not open.

[malikzype]

+1..Works fine in alpha 6 but breaks in 7 and 8

[Chasty]

In my case I need to remove the backdropComponent prop and it worked again, but now the bottom sheet opens sometimes. weird.

it is somehow related to this issue as well.

#1627

[TNAJanssen]

Same issue here

[JosueCuberoSanchez]

Same issue here

[MoOx]

Getting the same problem with latest version 5.0.0-alpha.9.

[anton2mihail]

+ 1 here, on 5.0.0-alpha.9

There's also a weird Gesture related bug where even if enablePanDownToClose is false you're still able to close the bottom sheet using a 2 finger gesture across the top of the sheet.

Not sure if it's related but the bug is 100% consistent

[nileshzype]

+1
I am also face same issue with 5.0.0-alpha.9

With 5.0.0-alpha.4 its working fine.

[github-actions]

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]

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

[joarkosberg]

+1
Experiencing same in 5.0.0-alpha.11, on scenarios without the BottomSheetView or the other wrappers. Like this example: https://ui.gorhom.dev/components/bottom-sheet/detach-modal

[Monir-Shembesh]

+1 Experiencing same in 5.0.0-alpha.11 as well.

[gorhom]

I have tested this on 5 alpha.11 , and it works

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-10-13.at.14.20.48.mp4

[Monir-Shembesh]

I have tested this on 5 alpha.11 , and it works

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-10-13.at.14.20.48.mp4

@gorhom can you please show us code example? Is this the Modal or just the bottom sheet? This is my setup:

Custom Bottom Sheet Modal Component

const BottomSheet = forwardRef<BottomSheetModal, BottomSheetModalProps>(
  ({ snapPoints, children, ...rest }, ref) => {
    const renderBackdrop = useCallback(
      (props: BottomSheetBackdropProps) => <Backdrop {...props} />,
      []
    );

    return (
      <BottomSheetModal
        ref={ref}
        snapPoints={snapPoints}
        enablePanDownToClose
        {...rest}
        backdropComponent={renderBackdrop}
      >
        {children}
      </BottomSheetModal>
    );
  }
);

Usage in code

  return (
    <>
      <BottomSheet ref={bottomSheetModalRef} snapPoints={['80%']}>
        <View style={styles.contentContainer}>
          <Text size="lg" type="primary">
            Present Modal
          </Text>
        </View>
      </BottomSheet>
    </>
  );

Like this it doesn't show up but if I use BottomSheetView it only displays the modal to the size of your child content.

Edit: I figured that the prop enableDynamicSizing must be set to false for it to show up @gorhom

[frozencap]

yes just upgraded to latest v5 and the bottom sheet doesn't open given some permutations of enableDynamicSizing,detached, backdropComponent.

[gorhom]

@Monir-Shembesh you need to replace the children of the bottom sheet from View to BottomSheetView, in order to get it working

[Monir-Shembesh]

@Monir-Shembesh you need to replace the children of the bottom sheet from View to BottomSheetView, in order to get it working

It is working correctly if I use a normal View as a child with enableDynamicSizing prop set to false. I believe that BottomSheetView is mainly used for dynamic resizing correct? @gorhom