From e7d1ab8189fb8d0e3f52e22405eb8029cd506f94 Mon Sep 17 00:00:00 2001 From: Graham Mendick Date: Fri, 10 Nov 2023 17:17:47 +0000 Subject: [PATCH] Removed android qualification now it works on ios --- documentation/native/bottom-sheet.html | 12 ++++++++---- documentation/native/custom-animation.html | 2 +- documentation/native/deep-links.html | 2 +- documentation/native/drawer.html | 2 +- documentation/native/examples.html | 2 +- documentation/native/floating-action-button.html | 2 +- documentation/native/hello-world.html | 2 +- documentation/native/modal.html | 2 +- documentation/native/navigation-bar.html | 2 +- documentation/native/pop-navigation.html | 2 +- documentation/native/push-navigation.html | 2 +- documentation/native/scene-navigation-lifecycle.html | 2 +- documentation/native/setup.html | 2 +- documentation/native/shared-element-transition.html | 2 +- documentation/native/tab-bar.html | 2 +- documentation/native/typescript.html | 2 +- documentation/native/web/browser-history.html | 2 +- documentation/native/web/custom-animation.html | 2 +- documentation/native/web/examples.html | 2 +- documentation/native/web/hyperlinks.html | 2 +- documentation/native/web/setup.html | 2 +- .../native/web/shared-element-transition.html | 2 +- 22 files changed, 29 insertions(+), 25 deletions(-) diff --git a/documentation/native/bottom-sheet.html b/documentation/native/bottom-sheet.html index 019f0a4cb4..c6ec74c5ea 100644 --- a/documentation/native/bottom-sheet.html +++ b/documentation/native/bottom-sheet.html @@ -1,6 +1,6 @@ - Bottom Sheet (Android) + Bottom Sheet @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) @@ -50,9 +50,9 @@

Web

-

Bottom Sheet (Android)

+

Bottom Sheet

- On Android, 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. 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. 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. 

import {BottomSheet} from 'navigation-react-native';
 
@@ -61,6 +61,10 @@ 
Bottom Sheet (Android)

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

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

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. diff --git a/documentation/native/custom-animation.html b/documentation/native/custom-animation.html index fc8bf16faf..62a2f58885 100644 --- a/documentation/native/custom-animation.html +++ b/documentation/native/custom-animation.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/deep-links.html b/documentation/native/deep-links.html index 6d23c8248b..8ed9f0e086 100644 --- a/documentation/native/deep-links.html +++ b/documentation/native/deep-links.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/drawer.html b/documentation/native/drawer.html index c0087ec5a5..9b6b5ba871 100644 --- a/documentation/native/drawer.html +++ b/documentation/native/drawer.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/examples.html b/documentation/native/examples.html index 6323490579..4523fb1686 100644 --- a/documentation/native/examples.html +++ b/documentation/native/examples.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/floating-action-button.html b/documentation/native/floating-action-button.html index 3d26508d96..859cf9d803 100644 --- a/documentation/native/floating-action-button.html +++ b/documentation/native/floating-action-button.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/hello-world.html b/documentation/native/hello-world.html index c8e6533b47..b6e7ee380b 100644 --- a/documentation/native/hello-world.html +++ b/documentation/native/hello-world.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/modal.html b/documentation/native/modal.html index bff2ccd8b0..d73eadef7f 100644 --- a/documentation/native/modal.html +++ b/documentation/native/modal.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/navigation-bar.html b/documentation/native/navigation-bar.html index 249d007d93..2f92c82a0e 100644 --- a/documentation/native/navigation-bar.html +++ b/documentation/native/navigation-bar.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/pop-navigation.html b/documentation/native/pop-navigation.html index 08f46080d2..08ba867424 100644 --- a/documentation/native/pop-navigation.html +++ b/documentation/native/pop-navigation.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/push-navigation.html b/documentation/native/push-navigation.html index c83dcf8a13..d90fd08363 100644 --- a/documentation/native/push-navigation.html +++ b/documentation/native/push-navigation.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/scene-navigation-lifecycle.html b/documentation/native/scene-navigation-lifecycle.html index 890a61c288..4e6f9c4632 100644 --- a/documentation/native/scene-navigation-lifecycle.html +++ b/documentation/native/scene-navigation-lifecycle.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/setup.html b/documentation/native/setup.html index d9f4611c49..fa7a7415a1 100644 --- a/documentation/native/setup.html +++ b/documentation/native/setup.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/shared-element-transition.html b/documentation/native/shared-element-transition.html index 7fe7532c6a..bcedbcebf0 100644 --- a/documentation/native/shared-element-transition.html +++ b/documentation/native/shared-element-transition.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/tab-bar.html b/documentation/native/tab-bar.html index 4167ad21e8..405d646217 100644 --- a/documentation/native/tab-bar.html +++ b/documentation/native/tab-bar.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/typescript.html b/documentation/native/typescript.html index 7e8f79621d..fda232e51c 100644 --- a/documentation/native/typescript.html +++ b/documentation/native/typescript.html @@ -32,7 +32,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/web/browser-history.html b/documentation/native/web/browser-history.html index 84ba542452..fc91ba84a9 100644 --- a/documentation/native/web/browser-history.html +++ b/documentation/native/web/browser-history.html @@ -33,7 +33,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/web/custom-animation.html b/documentation/native/web/custom-animation.html index e20b225c27..63bfa9b3fe 100644 --- a/documentation/native/web/custom-animation.html +++ b/documentation/native/web/custom-animation.html @@ -33,7 +33,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/web/examples.html b/documentation/native/web/examples.html index 65d9435e2b..7ad56556a3 100644 --- a/documentation/native/web/examples.html +++ b/documentation/native/web/examples.html @@ -33,7 +33,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/web/hyperlinks.html b/documentation/native/web/hyperlinks.html index d7c6087f4d..e560fc71d2 100644 --- a/documentation/native/web/hyperlinks.html +++ b/documentation/native/web/hyperlinks.html @@ -33,7 +33,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/web/setup.html b/documentation/native/web/setup.html index 1d6d9f82f1..43baca5029 100644 --- a/documentation/native/web/setup.html +++ b/documentation/native/web/setup.html @@ -33,7 +33,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android) diff --git a/documentation/native/web/shared-element-transition.html b/documentation/native/web/shared-element-transition.html index 0b5c2eaf85..e097422d0a 100644 --- a/documentation/native/web/shared-element-transition.html +++ b/documentation/native/web/shared-element-transition.html @@ -33,7 +33,7 @@

Tab Bar Modal Drawer - Bottom Sheet (Android) + Bottom Sheet Floating Action Button (Android) Navigation Lifecycle Custom Animation (Android)