BottomSheetBackdrop component doesn't show up at all when setting the `appearsOnIndex` prop

[ramirezabel]

Bug

The BottomSheetBackdrop component wont show up when setting the appearsOnIndex={0} for example. As I understand the prop is to tell the backdrop to show up when the snap point in on the index provided. If thats not the case then can someone provide a way of doing that. In my case the backdrop doesn't show when the index is at 0 only when dragging the component up to the other snap points does it show, however like mentioned above, if I set the property of the backdrop appearsOnIndex={0} it doesn't show at all.

Environment info

Library	Version
@gorhom/bottom-sheet	4.0.0-alpha.19
react-native	^0.64.1
react-native-reanimated	^2.1.0
react-native-gesture-handler	^1.10.3

Steps To Reproduce

1. Set the BottomSheetBackdrop prop appearsOnIndex={0}
2. Open the bottom sheet modal and the backdrop doesn't show

Describe what you expected to happen:

1. Set the BottomSheetBackdrop prop appearsOnIndex={0}
2. Backdrop should show up as soon as the modal opens to the first snap point

Reproducible sample code

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

[gorhom]

@ramirezabel you need to provide disappearsOnIndex with -1 , the default value is 0

react-native-bottom-sheet/src/components/bottomSheetBackdrop/types.d.ts

Lines 24 to 29 in 73decd3

	/**
	* Snap point index when backdrop will disappears on.
	* @type number
	* @default 0
	*/
	disappearsOnIndex?: number;

[pfcodes]

@ramirezabel you need to provide disappearsOnIndex with -1 , the default value is 0

react-native-bottom-sheet/src/components/bottomSheetBackdrop/types.d.ts

Lines 24 to 29 in 73decd3

	/**
	* Snap point index when backdrop will disappears on.
	* @type number
	* @default 0
	*/
	disappearsOnIndex?: number;

Feel like this should be the default behavior. Thanks though

[aymather]

This should definitely be the default behavior, can't really think of a situation where I would even use other options.

[Alaa-Ben]

@gorhom A bit weird: on some phones (Honor, Android 12 for example), setting disappearsOnIndex={-1} "freezes" the UI when navigating to the concerned screen. After some investigation, it seems it's the backdrop not unmounting correctly: bottomsheet is closed but backdrop still mounted.

[fubd]

This should definitely be the default behavior, can't really think of a situation where I would even use other options.

i think so.

backdropComponent={(props) => (
<BottomSheetBackdrop
{...props}
onPress={() => ref.current?.close()}
disappearsOnIndex={-1}
/>
)}