Skip to content

Commit

Permalink
Merge pull request #745 from grahammendick/iossheet-docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@grahammendick
grahammendick committed Nov 10, 2023
2 parents 5f5603d + e7d1ab8 commit aeac420
Show file tree
Hide file tree
Showing 22 changed files with 29 additions and 25 deletions.
12 changes: 8 additions & 4 deletions documentation/native/bottom-sheet.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<html>
<head>
<title>Bottom Sheet (Android)</title>
<title>Bottom Sheet</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../../css/prism.css">
<link rel="stylesheet" href="../../css/navigation.css">
Expand Down Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html" class="selected">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html" class="selected">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand All @@ -50,9 +50,9 @@ <h3>Web</h3>
</div>
</div>
<div id="article">
<h1>Bottom Sheet (Android)</h1>
<h1>Bottom Sheet</h1>
<p>
On Android, 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>. 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. 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.
</p>
<pre><code class="language-jsx">import {BottomSheet} from 'navigation-react-native';

Expand All @@ -61,6 +61,10 @@ <h1>Bottom Sheet (Android)</h1>
&lt;ScrollView nestedScrollEnabled={true} />
&lt;/BottomSheet>
&lt;/CoordinatorLayout></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.
</div>
<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.
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/custom-animation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html" class="selected">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/deep-links.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/drawer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html" class="selected">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/examples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/floating-action-button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html" class="selected">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/hello-world.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html" class="selected">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/navigation-bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/pop-navigation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/push-navigation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/scene-navigation-lifecycle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html" class="selected">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/setup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/shared-element-transition.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/tab-bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html" class="selected">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/typescript.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>
<a href="tab-bar.html">Tab Bar</a>
<a href="modal.html">Modal</a>
<a href="drawer.html">Drawer</a>
<a href="bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/web/browser-history.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h2>
<a href="../tab-bar.html">Tab Bar</a>
<a href="../modal.html">Modal</a>
<a href="../drawer.html">Drawer</a>
<a href="../bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="../bottom-sheet.html">Bottom Sheet</a>
<a href="../floating-action-button.html">Floating Action Button (Android)</a>
<a href="../scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="../custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/web/custom-animation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h2>
<a href="../tab-bar.html">Tab Bar</a>
<a href="../modal.html">Modal</a>
<a href="../drawer.html">Drawer</a>
<a href="../bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="../bottom-sheet.html">Bottom Sheet</a>
<a href="../floating-action-button.html">Floating Action Button (Android)</a>
<a href="../scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="../custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/web/examples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h2>
<a href="../tab-bar.html">Tab Bar</a>
<a href="../modal.html">Modal</a>
<a href="../drawer.html">Drawer</a>
<a href="../bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="../bottom-sheet.html">Bottom Sheet</a>
<a href="../floating-action-button.html">Floating Action Button (Android)</a>
<a href="../scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="../custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/web/hyperlinks.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h2>
<a href="../tab-bar.html">Tab Bar</a>
<a href="../modal.html">Modal</a>
<a href="../drawer.html">Drawer</a>
<a href="../bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="../bottom-sheet.html">Bottom Sheet</a>
<a href="../floating-action-button.html">Floating Action Button (Android)</a>
<a href="../scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="../custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/web/setup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h2>
<a href="../tab-bar.html">Tab Bar</a>
<a href="../modal.html">Modal</a>
<a href="../drawer.html">Drawer</a>
<a href="../bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="../bottom-sheet.html">Bottom Sheet</a>
<a href="../floating-action-button.html">Floating Action Button (Android)</a>
<a href="../scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="../custom-animation.html">Custom Animation (Android)</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/web/shared-element-transition.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h2>
<a href="../tab-bar.html">Tab Bar</a>
<a href="../modal.html">Modal</a>
<a href="../drawer.html">Drawer</a>
<a href="../bottom-sheet.html">Bottom Sheet (Android)</a>
<a href="../bottom-sheet.html">Bottom Sheet</a>
<a href="../floating-action-button.html">Floating Action Button (Android)</a>
<a href="../scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="../custom-animation.html">Custom Animation (Android)</a>
Expand Down

0 comments on commit aeac420

Please sign in to comment.