Bottom Sheet Always Shows Up On Mount

1. Initial index should be -1

Make sure the index prop is set to -1 so it stays hidden initially.

const bottomSheetRef = useRef<BottomSheet>(null);

<BottomSheet
  ref={bottomSheetRef}
  index={-1} // HIDDEN on mount
  snapPoints={['25%', '50%']}
  enablePanDownToClose={true}
>
  {/* Content */}
</BottomSheet>

2. Only show when user interacts

Trigger it explicitly from your button press:

const handleOpenSheet = () => {
  bottomSheetRef.current?.snapToIndex(0); // Or use .expand() if you want full height
};

const handleOpenSheet = () => {
  bottomSheetRef.current?.snapToIndex(0); // Or use .expand() if you want full height
};

Common Mistakes to Avoid

• Setting index={0} on mount – this will auto-open the sheet.
• Calling expand() in useEffect() without a condition.
• Forgetting to use ref or calling snapToIndex() before the sheet is mounted.

Also Read:

React Native State Management