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