Bottom Sheet

You use the BottomSheet component to avoid cluttering up the main content. The sheet starts off collapsed and the user expands it by dragging. In our example application, when the user opens an email we display the sender's information in a BottomSheet. We turn on nested scrolling so that the sheet's content scrolls seamlessly on Android when the user expands it. 

import {BottomSheet} from 'navigation-react-native';

<BottomSheet modal={true}>
  <ScrollView nestedScrollEnabled={true} />
</BottomSheet>

You can also have a non-modal BottomSheet. The BottomSheet is 100% native so, on Android, it must be a child of a CoordinatorLayout. In our email example, we make the sheet non-modal so the user can compose a reply while viewing the sender's details. 

<CoordinatorLayout>
  <BottomSheet modal={false}>
    <ScrollView nestedScrollEnabled={true} />
  </BottomSheet>
</CoordinatorLayout>

Note

On iOS, dragging the sheet isn't completely smooth. Removing the slight stutter will have to wait until React Native introduces synchronous view resizing.

Controlling the Bottom Sheet

The resting states of a BottomSheet are called detents, for example, 'collapsed' or 'expanded'. By default the BottomSheet is uncontrolled, where only the user can change the detent (by dragging). But it can also be controlled so you can programmatically change the detent. In our email example, when the user presses the sender's icon button we expand the BottomSheet to reveal the sender's details. 

const [detent, setDetent] = useState('collapsed');

<Button onPress={() => setDetent('expanded')} />
<BottomSheet detent={detent} onChangeDetent={setDetent}>
  <ScrollView nestedScrollEnabled={true} />
</BottomSheet>