docs: Stack v7

versioned_docs/version-7.x/stack-navigator.md

@@ -231,6 +231,21 @@ Use this prop to have a semi-transparent dark overlay visible under the card dur
 
 Function which returns a React Element to display as the overlay for the card. Make sure to set `cardOverlayEnabled` to `true` when using this.
 
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/cardOverlay.mp4" />
+</video>
+
+Example:
+
+```js
+    screenOptions={{
+      cardOverlayEnabled: true,
+      cardOverlay: () => (
+        <View style={{ flex: 1, backgroundColor: 'gray', opacity: 0.5 }} />
+      ),
+    }}
+```
+
 #### `cardStyle`
 
 Style object for the card in stack. You can provide a custom background color to use instead of the default background here.
@@ -244,26 +259,47 @@ On Web, the height of the screen isn't limited to the height of the viewport. Th
 This is shortcut option which configures several options to configure the style for rendering and transitions:
 
 - `card`: Use the default OS animations for iOS and Android screen transitions.
+  <video playsInline autoPlay muted loop>
+    <source src="/assets/7.x/stack/presentation-card.mp4" />
+  </video>
+
 - `modal`: Use Modal animations. This changes a few things:
+
   - Sets `headerMode` to `screen` for the screen unless specified otherwise.
   - Changes the screen animation to match the platform behavior for modals.
+  <video playsInline autoPlay muted loop>
+    <source src="/assets/7.x/stack/presentation-modal.mp4" />
+  </video>
+
 - `transparentModal`: Similar to `modal`. This changes following things:
+
   - Sets `headerMode` to `screen` for the screen unless specified otherwise.
   - Sets background color of the screen to transparent, so previous screen is visible
   - Adjusts the `detachPreviousScreen` option so that the previous screen stays rendered.
   - Prevents the previous screen from animating from its last position.
   - Changes the screen animation to a vertical slide animation.
 
-See [Transparent modals](#transparent-modals) for more details on how to customize `transparentModal`.
+  See [Transparent modals](#transparent-modals) for more details on how to customize `transparentModal`.
+
+  <video playsInline autoPlay muted loop>
+    <source src="/assets/7.x/stack/presentation-transparentModal.mp4" />
+  </video>
 
 #### `animationTypeForReplace`
 
 The type of animation to use when this screen replaces another screen. It takes the following values:
 
-- `push` - The animation of a new screen being pushed will be used
+- `push` - (default) The animation of a new screen being pushed will be used
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/animationTypeForReplace-push.mp4" />
+
+</video>
+
 - `pop` - The animation of a screen being popped will be used
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/animationTypeForReplace-pop.mp4" />
 
-Defaults to `push`.
+</video>
 
 When `pop` is used, the `pop` animation is applied to the screen being replaced.
 
@@ -415,7 +451,16 @@ return (
 Specifies how the header should be rendered:
 
 - `float` - Render a single header that stays at the top and animates as screens are changed. This is default on iOS.
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/headerMode-float.mp4" />
+
+</video>
+
 - `screen` - Each screen has a header attached to it and the header fades in and out together with the screen. This is default on other platforms.
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/headerMode-screen.mp4" />
+
+</video>
 
 #### `headerShown`
 
@@ -433,6 +478,18 @@ Accessibility label for the header back button.
 
 Function which returns a React Element to display custom image in header's back button. When a function is used, it receives the `tintColor` in it's argument object. Defaults to Image component with back image source, which is the default back icon image for the platform (a chevron on iOS and an arrow on Android).
 
+<img src="/assets/7.x/stack/headerBackImage.png" width="500" alt="Header back image" />
+
+```js
+      headerBackImage: ({ tintColor }) => (
+       <Ionicons
+          tyle={{ color: tintColor }}
+          size={26}
+          name="arrow-back-circle"
+        />
+      ),
+```
+
 #### `headerBackTitle`
 
 Title string used by the back button on iOS. Defaults to the previous scene's title. Use `headerBackButtonDisplayMode` to customize the behavior.
@@ -448,15 +505,29 @@ How the back button displays icon and title.
 Supported values:
 
 - `default`: Displays one of the following depending on the available space: previous screen's title, generic title (e.g. 'Back') or no title (only icon).
+  <img src="/assets/7.x/stack/headerBackButtonDisplayMode-default.png" width="500" alt="Header back button dispaly mode - default" />
 - `generic`: Displays one of the following depending on the available space: generic title (e.g. 'Back') or no title (only icon).
+  <img src="/assets/7.x/stack/headerBackButtonDisplayMode-generic.png" width="500" alt="Header back button dispaly mode - generic" />
 - `minimal`: Always displays only the icon without a title.
+  <img src="/assets/7.x/stack/headerBackButtonDisplayMode-minimal.png" width="500" alt="Header back button dispaly mode - minimal" />
 
 Defaults to `default` on iOS, and `minimal` on Android.
 
 #### `headerBackTitleStyle`
 
 Style object for the back title.
 
+<img src="/assets/7.x/stack/headerBackTitleStyle.png" width="500" alt="Header back title style" />
+
+Example:
+
+```js
+  headerBackTitleStyle: {
+      fontSize: 14,
+      fontFamily: 'Georgia',
+  },
+```
+
 ### Events
 
 The navigator can [emit events](navigation-events.md) on certain actions. Supported events are:
@@ -633,15 +704,64 @@ You can specify the `animation` option to customize the transition animation for
 Supported values for `animation` are:
 
 - `default` - Default animation based on the platform and OS version.
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/animation-default.mp4" />
+
+</video>
+
 - `fade` - Simple fade animation for dialogs.
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/animation-fade.mp4" />
+
+</video>
+
 - `fade_from_bottom` - Standard Android-style fade-in from the bottom for Android Oreo.
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/animation-fade_from_bottom.mp4" />
+
+</video>
+
 - `fade_from_right` - Standard Android-style fade-in from the right for Android 14.
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/animation-fade_from_right.mp4" />
+
+</video>
+
 - `reveal_from_bottom` - Standard Android-style reveal from the bottom for Android Pie.
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/animation-reveal_from_bottom.mp4" />
+
+</video>
+
 - `scale_from_center` - Scale animation from the center.
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/animation-scale_from_center.mp4" />
+
+</video>
+
 - `slide_from_right` - Standard iOS-style slide in from the right.
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/animation-slide_from_right.mp4" />
+
+</video>
+
 - `slide_from_left` - Similar to `slide_from_right`, but the screen will slide in from the left.
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/animation-slide_from_left.mp4" />
+
+</video>
+
 - `slide_from_bottom` - Slide animation from the bottom for modals and bottom sheets.
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/animation-slide_from_bottom.mp4" />
+
+</video>
+
 - `none` - The screens are pushed or popped immediately without any animation.
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/stack/animation-none.mp4" />
+
+</video>
 
 By default, Android and iOS use the `default` animation and other platforms use `none`.