Merge pull request #748 from grahammendick/modalsheet-docs

grahammendick · Dec 1, 2023 · 8ce5fa1 · 8ce5fa1
2 parents aeac420 + 1c0ed7a
commit 8ce5fa1
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/documentation/native/bottom-sheet.html b/documentation/native/bottom-sheet.html
@@ -52,19 +52,26 @@ <h3>Web</h3>
         <div id="article">
             <h1>Bottom Sheet</h1>
             <p>
-                You use the <code>BottomSheet</code> component to avoid cluttering up the main content. The sheet starts off collapsed and the user expands it by dragging. The <code>BottomSheet</code> is 100% native so it must be a child of a <code>CoordinatorLayout</code> on Android. In our example application, when the user opens an email we display the sender's information in a <code>BottomSheet</code>. The <code>peekHeight</code> 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 <code>BottomSheet</code> 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 <code>BottomSheet</code>. We turn on nested scrolling so that the sheet's content scrolls seamlessly on Android when the user expands it.
             </p>
             <pre><code class="language-jsx">import {BottomSheet} from 'navigation-react-native';
 
-&lt;CoordinatorLayout>
-  &lt;BottomSheet peekHeight={200}>
-    &lt;ScrollView nestedScrollEnabled={true} />
-  &lt;/BottomSheet>
-&lt;/CoordinatorLayout></code></pre>
+&lt;BottomSheet modal={true}>
+  &lt;ScrollView nestedScrollEnabled={true} />
+&lt;/BottomSheet></code></pre>
             <div class="Note">
                 <h2>Note</h2>
-                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.
             </div>
+            <h2>Non-modal Bottom Sheet (Android)</h2>
+            <p>
+                You can also have a non-modal <code>BottomSheet</code> on Android. The <code>BottomSheet</code> is 100% native so it must be a child of a <code>CoordinatorLayout</code>. In our email example, we make the sheet non-modal so the user can compose a reply while viewing the sender's details.
+            </p>
+            <pre><code class="language-jsx">&lt;CoordinatorLayout>
+  &lt;BottomSheet modal={false}>
+    &lt;ScrollView nestedScrollEnabled={true} />
+  &lt;/BottomSheet>
+&lt;/CoordinatorLayout></code></pre>
             <h2>Controlling the Bottom Sheet</h2>
             <p>
                 The resting states of a <code>BottomSheet</code> are called detents, for example, 'collapsed' or 'expanded'. By default the <code>BottomSheet</code> 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 <code>BottomSheet</code> to reveal the sender's details.