[Bug]: BottomSheetModal does not open on mount, breaks when -1 index is provided

[haydencrain]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android(validated by #2126 (comment)) , Web

What happened?

BottomSheetModal is currently quite flaky, and depending on what props you provide it may cause the modal to break and not display

using Expo v52 and the following dependencies:

├─ @gorhom/[email protected]
├─ [email protected]
└─ [email protected]

1. Minimum working example

https://snack.expo.dev/Id-3-P3lv3kICp-QOawgl describes the minimum working example required for the modal to present. (no props specified other than a ref for control)

• Expectation: The modal should open immediately on mount
• Actual: The modal does not open immediately. However, you are able to present and dismiss the modal by hooking into its ref

2. Dynamic sizing example

A few people mentioned in #2035 (comment) that setting enableDynamicSizing={false} would fix the issue for them.

However, this example https://snack.expo.dev/CTsdX7kXPEbA4CGE9QAO shows that setting it to true works as expected

Though as above the modal does not open immediately on mount.

3. Snap points example

https://snack.expo.dev/Gv_7H75wCgzeJfKJRP4CO this time we specify snapPoints and an index:

<BottomSheetModal 
  ref={ref} 
  index={1}
  snapPoints={['50%', '75%']}
>{...}</BottomSheetModal>

Snap points work as expected, however as above the modal does not open immediately on mount.

4. Negative index example

As per docs, setting the index to -1 will initiate the modal in a closed state

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

Lines 32 to 37 in 7bfe7ae

	/**
	* Initial snap point index, provide `-1` to initiate bottom sheet in closed state.
	* @type number
	* @default 0
	*/
	index?: number;

This example sets the index to -1 https://snack.expo.dev/Jk96UeB34dS58J_YkjFQ8

<BottomSheetModal 
  ref={ref} 
  index={-1}
  snapPoints={['50%', '75%']}
>{...}</BottomSheetModal>

• Expected: The modal should not open initially, but can be opened using ref
• Actual: The modal does not open initially. The modal cannot be controlled via ref (it appears to break)

Although initial state of the modal matches expectations, it could be a catalyst to the issues in (1) (2) and (3)

Reproduction steps

1. Create a new snack https://snack.expo.dev/
2. Add the following dependencies to package.json:

├─ @gorhom/[email protected]
├─ [email protected] 
└─ [email protected]

3. Recreate a minimum working example as seen in https://gorhom.dev/react-native-bottom-sheet/modal/usage
4. Observe that the modal does not open on mount
5. Observe that the modal opens when the button is pressed
6. Set snap points and index of -1
7. Attempt to present / dismiss the modal
8. Observe that the modal does not open at all

Reproduction sample

https://snack.expo.dev/Jk96UeB34dS58J_YkjFQ8

Relevant log output

No log output

[alainib]

your code is wrong. no ref are passed to modal

[haydencrain]

your code is wrong. no ref are passed to modal

... 🤦 😂 thank you @alainib

Have just passed ref through, and I can still reproduce the issue. When there is a no index assigned, the Modal should be opening on mount, so at least the existing code was reproducing that

I'll update the expo link with the ref

[haydencrain]

Playing with it more and I've started to see where it begins to break. I'll update the issue to reflect the specific situations where it no longer opens

[haydencrain]

Ok I've completed some additional debugging and have updated the issue description to reflect my findings.

1. The modal does not open immediately on mount
2. My issue was caused due to setting index={-1}, as I assumed this was required to prevent the modal from opening on mount. However this causes the modal to completely break

[haydencrain]

This commit seems sus e4f3fe3

[ScreamZ]

I'm having a related issue i guess, when leaving the navigation and coming back on expo router, using -1 breaks.

[GollyJer]

I think, because it's a modal, it starts offscreen by default. You don't need to add index={-1}.
That being said it probably shouldn't break if index is provided.

I landed here searching on a similar problem after I realized index isn't allowed in the modal...

What I can't seem to figure out is how to get it to go to the first snappoint when .present() is called.
Are the snappoints working for you guys? The code below presents the modal only up to the internal content size and I have to swipe the modal up with my finger to get it to go to the first snappoint.

    useImperativeHandle(ref, () => ({
      present: () => {
        BottomSheetRef.current?.present();
        BottomSheetRef.current?.snapToIndex(1);
      },
    }));

    return (
      <BottomSheetModal ref={BottomSheetRef} enablePanDownToClose snapPoints={['80%']}>

...

[DogAndHerDude]

Yeah, no. Can confirm that .current?.present() does not in fact work on BottomSheetModal. However, it's only an issue with iOS for me. Android works fine.

I wouldn't be surprised if it's due to animations. But none of the settings I tried worked.

[gorhom]

@haydencrain, may i know why are you setting -1 as the initial index ?

The bottom sheet modal will only mount if you call the method present, so there is no need to set the initial index as -1, the code provided worked as expected and it presented the modal in its initial index -1

[haydencrain]

@haydencrain, may i know why are you setting -1 as the initial index ?

I'm newly using this package, so I was having a go at both BottomSheet and BottomSheetModal.

The documentation mentions the following:

"inherits all Bottom Sheet props except for animateOnMount & containerHeight and also it introduces its own props:"

Due to this I was simply just switching out the components without modifying the props, and that's when I discovered the issue with index={-1}.

If index={-1} isn't required for BottomSheetModal then perhaps we should make that clear in the documentation within this page for example? https://gorhom.dev/react-native-bottom-sheet/modal/props, as the docs currently imply that behavior is matched across components.

the code provided worked as expected and it presented the modal in its initial index -1

Do you mind providing a video example of this? I am still able to reproduce it on the snack https://snack.expo.dev/Jk96UeB34dS58J_YkjFQ8. As soon as I change the index to one of the other snap points it works as expected

Kapture.2025-02-04.at.10.34.47.mp4