From c2c50966db2b1be91deb31e9f0369bd05fc5c6f0 Mon Sep 17 00:00:00 2001 From: Graham Mendick Date: Thu, 18 Apr 2024 11:55:32 +0100 Subject: [PATCH] Included ios in custom animations docs --- documentation/native/bottom-sheet.html | 2 +- documentation/native/custom-animation.html | 24 +++++++++---------- documentation/native/deep-links.html | 2 +- documentation/native/drawer.html | 2 +- documentation/native/examples.html | 2 +- .../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 +- .../native/scene-navigation-lifecycle.html | 2 +- documentation/native/setup.html | 2 +- .../native/shared-element-transition.html | 2 +- documentation/native/tab-bar.html | 2 +- documentation/native/typescript.html | 2 +- documentation/native/web/browser-history.html | 2 +- .../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, 33 insertions(+), 33 deletions(-) diff --git a/documentation/native/bottom-sheet.html b/documentation/native/bottom-sheet.html index f8c2bfa87..447e7317c 100644 --- a/documentation/native/bottom-sheet.html +++ b/documentation/native/bottom-sheet.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/custom-animation.html b/documentation/native/custom-animation.html index 958ff08be..34cde002c 100644 --- a/documentation/native/custom-animation.html +++ b/documentation/native/custom-animation.html @@ -1,6 +1,6 @@ - Custom Animation (Android) + Custom Animation @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript @@ -50,26 +50,26 @@

Web

-

Custom Animation (Android)

+

Custom Animation

- You can change the default Android animation that runs when a scene is pushed onto or popped off the stack. You provide the position of the scene when it's off the stack in the unmountStyle prop of the NavigationStack. The Navigation router uses the underlying native transition api to animate it into place. In our email application, we start the 'mail' scene off to the right of the screen. The Navigation router slides it when the user selects a mail and back out again when they return to their inbox. + You can change the default animation that runs when a scene is pushed onto or popped off the stack. You provide the position of the scene when it's off the stack in the unmountStyle prop of the NavigationStack. The Navigation router uses the underlying native transition apis on Android and iOS to animate it into place. In our email application, we start the 'mail' scene off to the right of the screen. The Navigation router slides it in when the user selects a mail and back out again when they return to their inbox. Without the customAnimation prop the animation only runs on Android.

- 
<NavigationStack unmountStyle={{type: 'translate', startX: '100%'}}>
+ 
<NavigationStack customAnimation unmountStyle={{type: 'translate', startX: '100%'}}>

You can also specify the position of the scene when it's hidden in the stack using the crumbStyle prop of the NavigationStack. The Navigation router will animate the current scene to and from that position when a new scene is pushed and then popped. By setting the crumb's start opacity to 0, when the user opens an email the 'inbox' scene fades out as the 'mail' scene slides in from the right.

- 
<NavigationStack crumbStyle={{type: 'alpha', startX: 0}}>
+ 
<NavigationStack customAnimation crumbStyle={{type: 'alpha', start: 0}}>

We can make the 'inbox' scene shrink as well as fade by passing in multiple start styles.The Navigation router runs both animations together when a user opens an email.

-
<NavigationStack crumbStyle={[
-    {type: 'alpha', startX: 0},
-    {type: 'scale', startX: 0.8, startY: 0.8}
-  ]}>
+
<NavigationStack customAnimation crumbStyle={[
+  {type: 'alpha', start: 0},
+  {type: 'scale', startX: 0.8, startY: 0.8}
+]}>

- The Scene component also has unmountStyle and crumbStyle props so you can have different animations for different scenes. In our email application, we want every scene to slide in from the right apart from the 'compose' scene. To make it slide up from the bottom of the screen we configure a special unmountStyle for just the 'compose' scene. + The Scene component also has unmountStyle and crumbStyle props so you can have different animations for different scenes. In our email application, we want every scene to slide in from the right apart from the 'compose' scene. To make it slide up from the bottom right of the screen we configure a special unmountStyle for just the 'compose' scene.

- 
<Scene stateKey="compose" unmountStyle={{type: 'translate', startY: '100%'}}>
+            
<Scene stateKey="compose" unmountStyle={{type: 'translate', startX: '100%', startY: '-100%'}}>
   <Compose />
 </Scene>
diff --git a/documentation/native/deep-links.html b/documentation/native/deep-links.html index 8ed9f0e08..f71f8f560 100644 --- a/documentation/native/deep-links.html +++ b/documentation/native/deep-links.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/drawer.html b/documentation/native/drawer.html index 9b6b5ba87..5e5ff30de 100644 --- a/documentation/native/drawer.html +++ b/documentation/native/drawer.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/examples.html b/documentation/native/examples.html index 4523fb168..ebebdbc85 100644 --- a/documentation/native/examples.html +++ b/documentation/native/examples.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/floating-action-button.html b/documentation/native/floating-action-button.html index 859cf9d80..6472be7f2 100644 --- a/documentation/native/floating-action-button.html +++ b/documentation/native/floating-action-button.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/hello-world.html b/documentation/native/hello-world.html index b6e7ee380..3546edbf7 100644 --- a/documentation/native/hello-world.html +++ b/documentation/native/hello-world.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/modal.html b/documentation/native/modal.html index d73eadef7..29e9aa180 100644 --- a/documentation/native/modal.html +++ b/documentation/native/modal.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/navigation-bar.html b/documentation/native/navigation-bar.html index 2f92c82a0..3f52e81f6 100644 --- a/documentation/native/navigation-bar.html +++ b/documentation/native/navigation-bar.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/pop-navigation.html b/documentation/native/pop-navigation.html index 08ba86742..adc6d56b5 100644 --- a/documentation/native/pop-navigation.html +++ b/documentation/native/pop-navigation.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/push-navigation.html b/documentation/native/push-navigation.html index d90fd0836..35ced245e 100644 --- a/documentation/native/push-navigation.html +++ b/documentation/native/push-navigation.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/scene-navigation-lifecycle.html b/documentation/native/scene-navigation-lifecycle.html index 4e6f9c463..cc7627df5 100644 --- a/documentation/native/scene-navigation-lifecycle.html +++ b/documentation/native/scene-navigation-lifecycle.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/setup.html b/documentation/native/setup.html index cfdfac0c1..6b639b097 100644 --- a/documentation/native/setup.html +++ b/documentation/native/setup.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/shared-element-transition.html b/documentation/native/shared-element-transition.html index e7d78c397..34fcfbf42 100644 --- a/documentation/native/shared-element-transition.html +++ b/documentation/native/shared-element-transition.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/tab-bar.html b/documentation/native/tab-bar.html index 405d64621..dfe10f628 100644 --- a/documentation/native/tab-bar.html +++ b/documentation/native/tab-bar.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/typescript.html b/documentation/native/typescript.html index fda232e51..4217a3c37 100644 --- a/documentation/native/typescript.html +++ b/documentation/native/typescript.html @@ -35,7 +35,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/web/browser-history.html b/documentation/native/web/browser-history.html index fc91ba84a..c725758d9 100644 --- a/documentation/native/web/browser-history.html +++ b/documentation/native/web/browser-history.html @@ -36,7 +36,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/web/custom-animation.html b/documentation/native/web/custom-animation.html index 63bfa9b3f..b59d8adbc 100644 --- a/documentation/native/web/custom-animation.html +++ b/documentation/native/web/custom-animation.html @@ -36,7 +36,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/web/examples.html b/documentation/native/web/examples.html index 7ad56556a..6851adcd0 100644 --- a/documentation/native/web/examples.html +++ b/documentation/native/web/examples.html @@ -36,7 +36,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/web/hyperlinks.html b/documentation/native/web/hyperlinks.html index e560fc71d..d19631e23 100644 --- a/documentation/native/web/hyperlinks.html +++ b/documentation/native/web/hyperlinks.html @@ -36,7 +36,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/web/setup.html b/documentation/native/web/setup.html index 43baca502..cadbe33fd 100644 --- a/documentation/native/web/setup.html +++ b/documentation/native/web/setup.html @@ -36,7 +36,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript diff --git a/documentation/native/web/shared-element-transition.html b/documentation/native/web/shared-element-transition.html index e097422d0..3480d3a9b 100644 --- a/documentation/native/web/shared-element-transition.html +++ b/documentation/native/web/shared-element-transition.html @@ -36,7 +36,7 @@

Bottom Sheet Floating Action Button (Android) Navigation Lifecycle - Custom Animation (Android) + Custom Animation Shared Element Transition (Android) Deep Links TypeScript