diff --git a/documentation/native/bottom-sheet.html b/documentation/native/bottom-sheet.html index f003dc8bd..f8c2bfa87 100644 --- a/documentation/native/bottom-sheet.html +++ b/documentation/native/bottom-sheet.html @@ -59,19 +59,18 @@

Bottom Sheet

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

Note

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

Non-modal Bottom Sheet (Android)

- You can also have a non-modal BottomSheet on Android. The BottomSheet is 100% native so 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. + 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.