Inline sheets

BottomSheet renders within your screen layout. With the default detents, [0, 'content'], index 1 opens the sheet to its content height and 0 closes it.

import { BottomSheet } from '@swmansion/react-native-bottom-sheet';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const [index, setIndex] = useState(1);
const insets = useSafeAreaInsets();

<BottomSheet
  index={index}
  onIndexChange={setIndex}
  surface={
    <View style={[StyleSheet.absoluteFill, { backgroundColor: 'white' }]} />
  }
>
  <View style={{ padding: 16, paddingBottom: insets.bottom + 16 }}>
    <Text>Sheet content</Text>
  </View>
</BottomSheet>

The sheet’s host view fills its container, so place BottomSheet in the view it should cover. Use style to adjust that host view, for example to set its zIndex.