Bottom Sheet (Android)
+Bottom Sheet
- On Android, you use the BottomSheet component to avoid cluttering up the main content. The sheet starts off collapsed and the user expands it by dragging. The BottomSheet is 100% native so it must be a child of a CoordinatorLayout. In our example application, when the user opens an email we display the sender's information in a BottomSheet. The peekHeight determines how much of the sender the user sees to start with. We turn on nested scrolling so that expanding the sheet seamlessly scrolls the sender.
+ You use the BottomSheet component to avoid cluttering up the main content. The sheet starts off collapsed and the user expands it by dragging. The BottomSheet is 100% native so it must be a child of a CoordinatorLayout on Android. In our example application, when the user opens an email we display the sender's information in a BottomSheet. The peekHeight determines how much of the sender the user sees to start with. We turn on nested scrolling so that expanding the sheet seamlessly scrolls the sender.
import {BottomSheet} from 'navigation-react-native';
@@ -61,6 +61,10 @@ Bottom Sheet (Android)
<ScrollView nestedScrollEnabled={true} />
</BottomSheet>
</CoordinatorLayout>
+
Note
+ On iOS, the animation isn't completely smooth. Removing the stutter when dragging the sheet quickly 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.
diff --git a/documentation/native/custom-animation.html b/documentation/native/custom-animation.html
index fc8bf16faf..62a2f58885 100644
--- a/documentation/native/custom-animation.html
+++ b/documentation/native/custom-animation.html
@@ -32,7 +32,7 @@