React Native - Bottom Sheet always shows up on mount - reactjs

Question

I am using React Native with Expo and i am attempting to use Gorhom's Bottom Sheet component to display a bottom sheet when a user clicks on a button. Everything works fine except the bottom sheet insists to always pop up on screen mount, which is obviously bad, it should only pop up when user clicks on a trigger like a button.
Here's my component:
import BottomSheet, { BottomSheetScrollView } from '#gorhom/bottom-sheet'
<BottomSheet
ref={sheetRef}
enableOverDrag
handleIndicatorStyle={styles.handleIndicator}
snapPoints={snapPoints}
enablePanDownToClose
>
<BottomSheetScrollView>
{children}
</BottomSheetScrollView>
</BottomSheet>
I've tried to toggle a display none/flex but that makes the popup not smooth and very sudden:
containerStyle={[styles.container, {display: showSheet ? 'flex' : 'none'}]}
I've went through the entire docs twice but found nothing that can help me.

Answer 1

If the expected behavior is to only show the bottom sheet when the user clicks a button, then it's looking more like a modal. There's the BottomSheetModal wrapper/decorator for that.
Instead of importing BottomSheet, import BottomSheetModal. Then get its reference and call the methods bottomSheetRef.current.present() and bottomSheetRef.current.close(). Doing it this way, all the show/hide up/down animations will work right off the bet.
Take a look at the documentation for a full example.