react-native-bottom-sheet: [v4] Initial index -1 not working on Android Only

Bug

When using the -1 index to make sure that the sheet is closed on the initial render, the sheet works fine on IOS but not on android. Instead on android, the sheet renders a small portion at the bottom of the screen, which blocks interaction with contents outside the sheet.

WhatsApp Image 2021-09-15 at 11 08 55 PM

Environment info

Library	Version
@gorhom/bottom-sheet	4.0.3
react-native	0.63
react-native-reanimated	2.2.0
react-native-gesture-handler	1.10.3

Steps To Reproduce

Nothing big here, a simple example. Just set the index to -1.

Describe what you expected to happen:

The sheet should be closed on initial render and only show when a button is pressed

Reproducible sample code

The snack code with the issue

https://snack.expo.dev/@aimensasi/bottom-sheet-v4-reproducible-issue-template

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 7
Comments: 15 (5 by maintainers)

Most upvoted comments

@gorhom - I am experiencing the same issue on a Physical device. Any help is greatly appreciated!

aditya-keri-betterhalf on Sep 22, 2021

@gorhom any updates on this or quick fix you can help with

aimensasi on Sep 21, 2021

I am not sure that would help but will try and let you know.

Currently, my workaround is to do the following

useEffect(() => {
  	sleep(400).then(() => {
		  sheet.current?.close();
	  });
  }, []);

This will cause the sheet to close, but only after a certain amount of mseconds.

aimensasi on Sep 22, 2021

Sorry I think the reproducible example was missing the index

<BottomSheet
        ref={bottomSheetRef}
        snapPoints={snapPoints}
        index={-1} <==== HERE 
        keyboardBehavior="interactive"
        handleComponent={SearchHandle}
        animateOnMount={true}
        android_keyboardInputMode="adjustPan">
        <List type="FlatList" />
      </BottomSheet>

I updated the sample code.

Make sure to test on android.

aimensasi on Sep 18, 2021