Skip to content

Commit

Permalink
Documented modal BottomSheet on Android
Browse files Browse the repository at this point in the history
Introduced the BottomSheet as modal on both platforms. Then explained how to make it non-modal on Android.
  • Loading branch information
grahammendick committed Dec 1, 2023
1 parent 2551178 commit 1c0ed7a
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions documentation/native/bottom-sheet.html
Original file line number Diff line number Diff line change
Expand Up @@ -52,20 +52,20 @@ <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. 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;BottomSheet modal={true} peekHeight={200}>
&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>
The <code>BottomSheet</code> is 100% native so it must be a child of a <code>CoordinatorLayout</code> on Android.
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}>
Expand Down

0 comments on commit 1c0ed7a

Please sign in to comment.