diff --git a/static/assets/7.x/native-stack/presentation-transparentModal.mp4 b/static/assets/7.x/native-stack/presentation-transparentModal.mp4 index 49ee088dac..b8067c8dcb 100644 Binary files a/static/assets/7.x/native-stack/presentation-transparentModal.mp4 and b/static/assets/7.x/native-stack/presentation-transparentModal.mp4 differ diff --git a/static/assets/7.x/stack/animation-default.mp4 b/static/assets/7.x/stack/animation-default.mp4 new file mode 100644 index 0000000000..0390f11a20 Binary files /dev/null and b/static/assets/7.x/stack/animation-default.mp4 differ diff --git a/static/assets/7.x/stack/animation-fade.mp4 b/static/assets/7.x/stack/animation-fade.mp4 new file mode 100644 index 0000000000..27a0835c61 Binary files /dev/null and b/static/assets/7.x/stack/animation-fade.mp4 differ diff --git a/static/assets/7.x/stack/animation-fade_from_bottom.mp4 b/static/assets/7.x/stack/animation-fade_from_bottom.mp4 new file mode 100644 index 0000000000..5e7659fbad Binary files /dev/null and b/static/assets/7.x/stack/animation-fade_from_bottom.mp4 differ diff --git a/static/assets/7.x/stack/animation-fade_from_right.mp4 b/static/assets/7.x/stack/animation-fade_from_right.mp4 new file mode 100644 index 0000000000..83eb6fa230 Binary files /dev/null and b/static/assets/7.x/stack/animation-fade_from_right.mp4 differ diff --git a/static/assets/7.x/stack/animation-none.mp4 b/static/assets/7.x/stack/animation-none.mp4 new file mode 100644 index 0000000000..9c59892de1 Binary files /dev/null and b/static/assets/7.x/stack/animation-none.mp4 differ diff --git a/static/assets/7.x/stack/animation-reveal_from_bottom.mp4 b/static/assets/7.x/stack/animation-reveal_from_bottom.mp4 new file mode 100644 index 0000000000..c4d8501c0b Binary files /dev/null and b/static/assets/7.x/stack/animation-reveal_from_bottom.mp4 differ diff --git a/static/assets/7.x/stack/animation-scale_from_center.mp4 b/static/assets/7.x/stack/animation-scale_from_center.mp4 new file mode 100644 index 0000000000..b92eabd0a8 Binary files /dev/null and b/static/assets/7.x/stack/animation-scale_from_center.mp4 differ diff --git a/static/assets/7.x/stack/animation-slide_from_bottom.mp4 b/static/assets/7.x/stack/animation-slide_from_bottom.mp4 new file mode 100644 index 0000000000..74dcee3ab2 Binary files /dev/null and b/static/assets/7.x/stack/animation-slide_from_bottom.mp4 differ diff --git a/static/assets/7.x/stack/animation-slide_from_left.mp4 b/static/assets/7.x/stack/animation-slide_from_left.mp4 new file mode 100644 index 0000000000..f22be6c822 Binary files /dev/null and b/static/assets/7.x/stack/animation-slide_from_left.mp4 differ diff --git a/static/assets/7.x/stack/animation-slide_from_right.mp4 b/static/assets/7.x/stack/animation-slide_from_right.mp4 new file mode 100644 index 0000000000..b594d19be4 Binary files /dev/null and b/static/assets/7.x/stack/animation-slide_from_right.mp4 differ diff --git a/static/assets/7.x/stack/animationTypeForReplace-pop.mp4 b/static/assets/7.x/stack/animationTypeForReplace-pop.mp4 new file mode 100644 index 0000000000..6491808d40 Binary files /dev/null and b/static/assets/7.x/stack/animationTypeForReplace-pop.mp4 differ diff --git a/static/assets/7.x/stack/animationTypeForReplace-push.mp4 b/static/assets/7.x/stack/animationTypeForReplace-push.mp4 new file mode 100644 index 0000000000..2d4c6f8ced Binary files /dev/null and b/static/assets/7.x/stack/animationTypeForReplace-push.mp4 differ diff --git a/static/assets/7.x/stack/cardOverlay.mp4 b/static/assets/7.x/stack/cardOverlay.mp4 new file mode 100644 index 0000000000..6c8e6a1099 Binary files /dev/null and b/static/assets/7.x/stack/cardOverlay.mp4 differ diff --git a/static/assets/7.x/stack/headerBackButtonDisplayMode-default.png b/static/assets/7.x/stack/headerBackButtonDisplayMode-default.png new file mode 100644 index 0000000000..1e7bf1f485 Binary files /dev/null and b/static/assets/7.x/stack/headerBackButtonDisplayMode-default.png differ diff --git a/static/assets/7.x/stack/headerBackButtonDisplayMode-generic.png b/static/assets/7.x/stack/headerBackButtonDisplayMode-generic.png new file mode 100644 index 0000000000..54663961a1 Binary files /dev/null and b/static/assets/7.x/stack/headerBackButtonDisplayMode-generic.png differ diff --git a/static/assets/7.x/stack/headerBackButtonDisplayMode-minimal.png b/static/assets/7.x/stack/headerBackButtonDisplayMode-minimal.png new file mode 100644 index 0000000000..f5bf6cff5d Binary files /dev/null and b/static/assets/7.x/stack/headerBackButtonDisplayMode-minimal.png differ diff --git a/static/assets/7.x/stack/headerBackImage.png b/static/assets/7.x/stack/headerBackImage.png new file mode 100644 index 0000000000..778c48798a Binary files /dev/null and b/static/assets/7.x/stack/headerBackImage.png differ diff --git a/static/assets/7.x/stack/headerBackTitleStyle.png b/static/assets/7.x/stack/headerBackTitleStyle.png new file mode 100644 index 0000000000..629e59773b Binary files /dev/null and b/static/assets/7.x/stack/headerBackTitleStyle.png differ diff --git a/static/assets/7.x/stack/headerMode-float.mp4 b/static/assets/7.x/stack/headerMode-float.mp4 new file mode 100644 index 0000000000..120686eb1e Binary files /dev/null and b/static/assets/7.x/stack/headerMode-float.mp4 differ diff --git a/static/assets/7.x/stack/headerMode-screen.mp4 b/static/assets/7.x/stack/headerMode-screen.mp4 new file mode 100644 index 0000000000..d6d3043a18 Binary files /dev/null and b/static/assets/7.x/stack/headerMode-screen.mp4 differ diff --git a/static/assets/7.x/stack/presentation-card.mp4 b/static/assets/7.x/stack/presentation-card.mp4 new file mode 100644 index 0000000000..397791d265 Binary files /dev/null and b/static/assets/7.x/stack/presentation-card.mp4 differ diff --git a/static/assets/7.x/stack/presentation-modal.mp4 b/static/assets/7.x/stack/presentation-modal.mp4 new file mode 100644 index 0000000000..ec8724a0d5 Binary files /dev/null and b/static/assets/7.x/stack/presentation-modal.mp4 differ diff --git a/static/assets/7.x/stack/presentation-transparentModal.mp4 b/static/assets/7.x/stack/presentation-transparentModal.mp4 new file mode 100644 index 0000000000..a79ca52a66 Binary files /dev/null and b/static/assets/7.x/stack/presentation-transparentModal.mp4 differ diff --git a/versioned_docs/version-7.x/stack-navigator.md b/versioned_docs/version-7.x/stack-navigator.md index 51995bbd39..6dffc2fab5 100755 --- a/versioned_docs/version-7.x/stack-navigator.md +++ b/versioned_docs/version-7.x/stack-navigator.md @@ -4,6 +4,9 @@ title: Stack Navigator sidebar_label: Stack --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack. By default the stack navigator is configured to have the familiar iOS and Android look & feel: new screens slide in from the right on iOS, use OS default animation on Android. But the [animations can be customized](#animation-related-options) to match your needs. @@ -213,7 +216,101 @@ If you need to disable this optimization for specific screens (e.g. you want to ### Options -The following [options](screen-options.md) can be used to configure the screens in the navigator. These can be specified under `screenOptions` prop of `Stack.navigator` or `options` prop of `Stack.Screen`. +The following [options](screen-options.md) can be used to configure the screens in the navigator. These can be specified under: + +- [`screenOptions`](screen-options.md#options-prop-on-screen) prop of `Stack.navigator` + + Example: + + + + + ```js + const Stack = createNativeStackNavigator({ + // highlight-start + screenOptions: { + headerStyle: { + backgroundColor: 'papayawhip', + }, + }, + // highlight-end + screens: { + Home: HomeScreen, + Profile: ProfileScreen, + }, + }); + ``` + + + + + ```js + + + + + ``` + + + + +- [`options`](screen-options.md#screenoptions-prop-on-the-navigator) prop of `Stack.Screen`. + + Example: + + + + ```js name="Screen title option" + const Stack = createNativeStackNavigator({ + screens: { + Home: { + screen: HomeScreen, + // highlight-start + options: { + title: 'Awesome app', + }, + // highlight-end + }, + Profile: { + screen: ProfileScreen, + // highlight-start + options: { + title: 'My profile', + }, + // highlight-end + }, + }, + }); + ``` + + + + + ```js name="Screen title option" + + + + + ``` + + + #### `title` @@ -231,6 +328,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. + + +Example: + +```js + screenOptions={{ + cardOverlayEnabled: true, + cardOverlay: () => ( + + ), + }} +``` + #### `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 +356,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. + + - `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. + + - `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`. + + #### `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 + + - `pop` - The animation of a screen being popped will be used + When `pop` is used, the `pop` animation is applied to the screen being replaced. @@ -415,7 +548,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. + + - `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. + #### `headerShown` @@ -433,6 +575,24 @@ 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). +Header back image + +```js + ( + + ), + }} +/> +``` + #### `headerBackTitle` Title string used by the back button on iOS. Defaults to the previous scene's title. Use `headerBackButtonDisplayMode` to customize the behavior. @@ -448,8 +608,11 @@ 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). + 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). + Header back button dispaly mode - generic - `minimal`: Always displays only the icon without a title. + Header back button dispaly mode - minimal Defaults to `default` on iOS, and `minimal` on Android. @@ -457,6 +620,23 @@ Defaults to `default` on iOS, and `minimal` on Android. Style object for the back title. +Header back title style + +Example: + +```js + +``` + ### Events The navigator can [emit events](navigation-events.md) on certain actions. Supported events are: @@ -633,15 +813,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. + + - `fade` - Simple fade animation for dialogs. + + - `fade_from_bottom` - Standard Android-style fade-in from the bottom for Android Oreo. + + - `fade_from_right` - Standard Android-style fade-in from the right for Android 14. + + - `reveal_from_bottom` - Standard Android-style reveal from the bottom for Android Pie. + + - `scale_from_center` - Scale animation from the center. + + - `slide_from_right` - Standard iOS-style slide in from the right. + + - `slide_from_left` - Similar to `slide_from_right`, but the screen will slide in from the left. + + - `slide_from_bottom` - Slide animation from the bottom for modals and bottom sheets. + + - `none` - The screens are pushed or popped immediately without any animation. + By default, Android and iOS use the `default` animation and other platforms use `none`.