From 25511785aad4c5611ef18e8c84927a91bc63bf8b Mon Sep 17 00:00:00 2001 From: Graham Mendick Date: Fri, 1 Dec 2023 17:46:00 +0000 Subject: [PATCH 1/2] Sketched in non-modal section and code --- documentation/native/bottom-sheet.html | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/documentation/native/bottom-sheet.html b/documentation/native/bottom-sheet.html index c6ec74c5e..4837857c5 100644 --- a/documentation/native/bottom-sheet.html +++ b/documentation/native/bottom-sheet.html @@ -52,19 +52,26 @@

Web

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. 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. + 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. 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';
 
-<CoordinatorLayout>
-  <BottomSheet peekHeight={200}>
-    <ScrollView nestedScrollEnabled={true} />
-  </BottomSheet>
-</CoordinatorLayout>
+<BottomSheet modal={true} peekHeight={200}> + <ScrollView nestedScrollEnabled={true} /> +</BottomSheet>

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.
+

Non-modal Bottom Sheet (Android)

+

+ The BottomSheet is 100% native so it must be a child of a CoordinatorLayout on Android. +

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

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. From 1c0ed7ab899fd5974fb5f59581954e9d865c20e9 Mon Sep 17 00:00:00 2001 From: Graham Mendick Date: Fri, 1 Dec 2023 20:39:34 +0000 Subject: [PATCH 2/2] Documented modal BottomSheet on Android Introduced the BottomSheet as modal on both platforms. Then explained how to make it non-modal on Android. --- documentation/native/bottom-sheet.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/documentation/native/bottom-sheet.html b/documentation/native/bottom-sheet.html index 4837857c5..f003dc8bd 100644 --- a/documentation/native/bottom-sheet.html +++ b/documentation/native/bottom-sheet.html @@ -52,20 +52,20 @@

Web

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. 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. 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} peekHeight={200}>
+<BottomSheet modal={true}>
   <ScrollView nestedScrollEnabled={true} />
 </BottomSheet>

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. + 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)

- The BottomSheet is 100% native so it must be a child of a CoordinatorLayout on 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. 

<CoordinatorLayout>
   <BottomSheet modal={false}>