docs: Native Stack - presentation

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

@@ -166,6 +166,8 @@ Requires `react-native-screens` version >=3.3.0.
 
 Only supported on iOS.
 
+<img src="/assets/7.x/native-stack/headerBackButtonMenuEnabled.png" width="500" alt="Header back button menu enabled" />
+
 #### `headerBackVisible`
 
 Whether the back button is visible in the header. You can use it to show a back button alongside `headerLeft` if you have specified it.
@@ -178,6 +180,8 @@ Title string used by the back button on iOS. Defaults to the previous scene's ti
 
 Only supported on iOS.
 
+<img src="/assets/7.x/native-stack/headerBackTitle.jpeg" width="500" alt="Header back title" />
+
 #### `headerBackTitleVisible`
 
 Whether the back button title should be visible or not.
@@ -193,6 +197,17 @@ Style object for header back title. Supported properties:
 
 Only supported on iOS.
 
+<img src="/assets/7.x/native-stack/headerBackTitleStyle.png" width="500" alt="Header back title style" />
+
+Example:
+
+```js
+  headerBackTitleStyle: {
+      fontSize: 14,
+      fontFamily: 'Georgia',
+  },
+```
+
 #### `headerBackImageSource`
 
 Image to display in the header as the icon in the back button. Defaults to back icon image for the platform
@@ -662,17 +677,43 @@ Supported values:
 
 How should the screen be presented.
 
+Only supported on Android and iOS.
+
 Supported values:
 
 - `card`: the new screen will be pushed onto a stack, which means the default animation will be slide from the side on iOS, the animation on Android will vary depending on the OS version and theme.
+  <video playsInline autoPlay muted loop>
+   <source src="/assets/7.x/native-stack/presentation-card.mp4" />
+  </video>
+
 - `modal`: the new screen will be presented modally. this also allows for a nested stack to be rendered inside the screen.
+  <video playsInline autoPlay muted loop>
+   <source src="/assets/7.x/native-stack/presentation-modal.mp4" />
+  </video>
+
 - `transparentModal`: the new screen will be presented modally, but in addition, the previous screen will stay so that the content below can still be seen if the screen has translucent background.
+  <video playsInline autoPlay muted loop>
+   <source src="/assets/7.x/native-stack/presentation-transparentModal.mp4" />
+  </video>
+
 - `containedModal`: will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android.
+  <video playsInline autoPlay muted loop>
+   <source src="/assets/7.x/native-stack/presentation-containedModal.mp4" />
+  </video>
+
 - `containedTransparentModal`: will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android.
+  <video playsInline autoPlay muted loop>
+   <source src="/assets/7.x/native-stack/presentation-containedTransparentModal.mp4" />
+  </video>
+
 - `fullScreenModal`: will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android. A screen using this presentation style can't be dismissed by gesture.
+  <video playsInline autoPlay muted loop>
+   <source src="/assets/7.x/native-stack/presentation-fullScreenModal.mp4" />
+  </video>
 - `formSheet`: will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.
-
-Only supported on Android and iOS.
+  <video playsInline autoPlay muted loop>
+   <source src="/assets/7.x/native-stack/presentation-formSheet.mp4" />
+  </video>
 
 #### `orientation`