diff --git a/static/assets/7.x/native-stack/headerBackground.png b/static/assets/7.x/native-stack/headerBackground.png new file mode 100644 index 0000000000..bd601236d1 Binary files /dev/null and b/static/assets/7.x/native-stack/headerBackground.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-dark.png b/static/assets/7.x/native-stack/headerBlurEffect-dark.png new file mode 100644 index 0000000000..88da21ccbe Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-dark.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-light.png b/static/assets/7.x/native-stack/headerBlurEffect-light.png new file mode 100644 index 0000000000..05293d0a79 Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-light.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-prominent.png b/static/assets/7.x/native-stack/headerBlurEffect-prominent.png new file mode 100644 index 0000000000..c6049585f9 Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-prominent.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-regular.png b/static/assets/7.x/native-stack/headerBlurEffect-regular.png new file mode 100644 index 0000000000..8c1891ec75 Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-regular.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemChromeMaterial.png b/static/assets/7.x/native-stack/headerBlurEffect-systemChromeMaterial.png new file mode 100644 index 0000000000..3da2f20198 Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemChromeMaterial.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemChromeMaterialDark.png b/static/assets/7.x/native-stack/headerBlurEffect-systemChromeMaterialDark.png new file mode 100644 index 0000000000..624ab4660b Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemChromeMaterialDark.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemChromeMaterialLight.png b/static/assets/7.x/native-stack/headerBlurEffect-systemChromeMaterialLight.png new file mode 100644 index 0000000000..1ecca6cba5 Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemChromeMaterialLight.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemMaterial.png b/static/assets/7.x/native-stack/headerBlurEffect-systemMaterial.png new file mode 100644 index 0000000000..08dcb1a85b Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemMaterial.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemMaterialDark.png b/static/assets/7.x/native-stack/headerBlurEffect-systemMaterialDark.png new file mode 100644 index 0000000000..ea4bde41fc Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemMaterialDark.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemMaterialLight.png b/static/assets/7.x/native-stack/headerBlurEffect-systemMaterialLight.png new file mode 100644 index 0000000000..1210fce73d Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemMaterialLight.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemThickMaterial.png b/static/assets/7.x/native-stack/headerBlurEffect-systemThickMaterial.png new file mode 100644 index 0000000000..e22a48720c Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemThickMaterial.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemThickMaterialDark.png b/static/assets/7.x/native-stack/headerBlurEffect-systemThickMaterialDark.png new file mode 100644 index 0000000000..71f4ffc18b Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemThickMaterialDark.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemThickMaterialLight.png b/static/assets/7.x/native-stack/headerBlurEffect-systemThickMaterialLight.png new file mode 100644 index 0000000000..47dcdcdee5 Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemThickMaterialLight.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemThinMaterial.png b/static/assets/7.x/native-stack/headerBlurEffect-systemThinMaterial.png new file mode 100644 index 0000000000..e43196b4f8 Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemThinMaterial.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemThinMaterialDark.png b/static/assets/7.x/native-stack/headerBlurEffect-systemThinMaterialDark.png new file mode 100644 index 0000000000..e041329c81 Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemThinMaterialDark.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemThinMaterialLight.png b/static/assets/7.x/native-stack/headerBlurEffect-systemThinMaterialLight.png new file mode 100644 index 0000000000..a935bca521 Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemThinMaterialLight.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemUltraThinMaterial.png b/static/assets/7.x/native-stack/headerBlurEffect-systemUltraThinMaterial.png new file mode 100644 index 0000000000..b525154609 Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemUltraThinMaterial.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemUltraThinMaterialDark.png b/static/assets/7.x/native-stack/headerBlurEffect-systemUltraThinMaterialDark.png new file mode 100644 index 0000000000..5960598b81 Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemUltraThinMaterialDark.png differ diff --git a/static/assets/7.x/native-stack/headerBlurEffect-systemUltraThinMaterialLight.png b/static/assets/7.x/native-stack/headerBlurEffect-systemUltraThinMaterialLight.png new file mode 100644 index 0000000000..bfe19277db Binary files /dev/null and b/static/assets/7.x/native-stack/headerBlurEffect-systemUltraThinMaterialLight.png differ diff --git a/static/assets/7.x/native-stack/headerLargeStyle.mp4 b/static/assets/7.x/native-stack/headerLargeStyle.mp4 new file mode 100644 index 0000000000..9ff3978822 Binary files /dev/null and b/static/assets/7.x/native-stack/headerLargeStyle.mp4 differ diff --git a/static/assets/7.x/native-stack/headerLargeTitle.mp4 b/static/assets/7.x/native-stack/headerLargeTitle.mp4 new file mode 100644 index 0000000000..a33e31cc5d Binary files /dev/null and b/static/assets/7.x/native-stack/headerLargeTitle.mp4 differ diff --git a/static/assets/7.x/native-stack/headerLargeTitleStyle.png b/static/assets/7.x/native-stack/headerLargeTitleStyle.png new file mode 100644 index 0000000000..4722cb6c71 Binary files /dev/null and b/static/assets/7.x/native-stack/headerLargeTitleStyle.png differ diff --git a/static/assets/7.x/native-stack/headerLeft.png b/static/assets/7.x/native-stack/headerLeft.png new file mode 100644 index 0000000000..d46e1cc63c Binary files /dev/null and b/static/assets/7.x/native-stack/headerLeft.png differ diff --git a/static/assets/7.x/native-stack/headerRight.png b/static/assets/7.x/native-stack/headerRight.png new file mode 100644 index 0000000000..49af6766bd Binary files /dev/null and b/static/assets/7.x/native-stack/headerRight.png differ diff --git a/static/assets/7.x/native-stack/headerShadowVisible-Android.png b/static/assets/7.x/native-stack/headerShadowVisible-Android.png new file mode 100644 index 0000000000..c2c9429f28 Binary files /dev/null and b/static/assets/7.x/native-stack/headerShadowVisible-Android.png differ diff --git a/static/assets/7.x/native-stack/headerShadowVisible-iOS.png b/static/assets/7.x/native-stack/headerShadowVisible-iOS.png new file mode 100644 index 0000000000..ebbfe7c866 Binary files /dev/null and b/static/assets/7.x/native-stack/headerShadowVisible-iOS.png differ diff --git a/static/assets/7.x/native-stack/headerStyle.mp4 b/static/assets/7.x/native-stack/headerStyle.mp4 new file mode 100644 index 0000000000..1723abc731 Binary files /dev/null and b/static/assets/7.x/native-stack/headerStyle.mp4 differ diff --git a/static/assets/7.x/native-stack/headerTintColor.png b/static/assets/7.x/native-stack/headerTintColor.png new file mode 100644 index 0000000000..7044179f71 Binary files /dev/null and b/static/assets/7.x/native-stack/headerTintColor.png differ diff --git a/static/assets/7.x/native-stack/headerTitleAlign-center.png b/static/assets/7.x/native-stack/headerTitleAlign-center.png new file mode 100644 index 0000000000..36da4a8204 Binary files /dev/null and b/static/assets/7.x/native-stack/headerTitleAlign-center.png differ diff --git a/static/assets/7.x/native-stack/headerTitleAlign-left.png b/static/assets/7.x/native-stack/headerTitleAlign-left.png new file mode 100644 index 0000000000..50d4e6c7ab Binary files /dev/null and b/static/assets/7.x/native-stack/headerTitleAlign-left.png differ diff --git a/static/assets/7.x/native-stack/headerTitleStyle.png b/static/assets/7.x/native-stack/headerTitleStyle.png new file mode 100644 index 0000000000..edf0ceb27c Binary files /dev/null and b/static/assets/7.x/native-stack/headerTitleStyle.png differ diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md index 3465fbf2da..e380ada1e8 100755 --- a/versioned_docs/version-7.x/native-stack-navigator.md +++ b/versioned_docs/version-7.x/native-stack-navigator.md @@ -210,14 +210,25 @@ Supported properties: Only supported on iOS. + + #### `headerLargeTitle` Whether to enable header with large title which collapses to regular header on scroll. +Defaults to `false`. For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as `ScrollView` or `FlatList`. If the scrollable area doesn't fill the screen, the large title won't collapse on scroll. You also need to specify `contentInsetAdjustmentBehavior="automatic"` in your `ScrollView`, `FlatList` etc. Only supported on iOS. + + #### `headerLargeTitleShadowVisible` Whether drop shadow of header is visible when a large title is shown. @@ -233,6 +244,19 @@ Style object for large title in header. Supported properties: Only supported on iOS. +Header large title style + +Example: + +```js + headerLargeTitleStyle: { + fontFamily: 'Georgia', + fontSize: 22, + fontWeight: '500', + color: 'blue', + }, +``` + #### `headerShown` Whether to show the header. The header is shown by default. Setting this to `false` hides the header. @@ -243,10 +267,21 @@ Style object for header. Supported properties: - `backgroundColor` + + #### `headerShadowVisible` Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header. +Android: +Header shadow visible Android + +iOS: +Header shadow visible iOS + #### `headerTransparent` Boolean indicating whether the navigation bar is translucent. @@ -266,25 +301,61 @@ Blur effect for the translucent header. The `headerTransparent` option needs to Supported values: - `extraLight` + - `light` + Header blur effect light + - `dark` + Header blur effect dark + - `regular` + Header blur effect regular + - `prominent` + Header blur effect systemUltraThinMaterial + - `systemUltraThinMaterial` + Header blur effect systemUltraThinMaterial + - `systemThinMaterial` + Header blur effect systemThinMaterial + - `systemMaterial` + Header blur effect systemMaterial + - `systemThickMaterial` + Header blur effect systemThickMaterial + - `systemChromeMaterial` + Header blur effect systemChromeMaterial + - `systemUltraThinMaterialLight` + Header blur effect systemUltraThinMaterialLight + - `systemThinMaterialLight` + Header blur effect systemThinMaterialLight + - `systemMaterialLight` + Header blur effect systemMaterialLight + - `systemThickMaterialLight` + Header blur effect systemThickMaterialLight + - `systemChromeMaterialLight` + Header blur effect systemChromeMaterialLight + - `systemUltraThinMaterialDark` + Header blur effect systemUltraThinMaterialDark - `systemThinMaterialDark` + Header blur effect systemThinMaterialDark + - `systemMaterialDark` + Header blur effect systemMaterialDark - `systemThickMaterialDark` + Header blur effect systemThickMaterialDark + - `systemChromeMaterialDark` + Header blur effect systemChromeMaterialDark Only supported on iOS. @@ -292,18 +363,55 @@ Only supported on iOS. Function which returns a React Element to render as the background of the header. This is useful for using backgrounds such as an image or a gradient. + Header background + +Example: + +```js + headerBackground: () => ( + + ), +``` + #### `headerTintColor` Tint color for the header. Changes the color of back button and title. + Header tint color + #### `headerLeft` Function which returns a React Element to display on the left side of the header. This replaces the back button. See `headerBackVisible` to show the back button along side left element. +Header right + +Example: + +```js + headerLeft: () => ( + + ), + headerBackVisible: true, + headerBackTitle: 'Back', +``` + #### `headerRight` Function which returns a React Element to display on the right side of the header. + Header right + +Example: + +```js +headerRight: () => ; +``` + #### `headerTitle` String or a function that returns a React Element to be used by the header. Defaults to `title` or name of the screen. @@ -317,7 +425,10 @@ Note that if you render a custom element by passing a function, animations for t How to align the header title. Possible values: - `left` + Header title align left + - `center` + Header title align center Defaults to `left` on platforms other than iOS. @@ -332,6 +443,19 @@ Style object for header title. Supported properties: - `fontWeight` - `color` + Header title style + +Example: + +```js + headerTitleStyle: { + color: 'blue', + fontSize: 22, + fontFamily: 'Georgia', + fontWeight: 300, + }, +``` + #### `headerSearchBarOptions` Options to render a native search bar on iOS. Search bars are rarely static so normally it is controlled by passing an object to `headerSearchBarOptions` navigation option in the component's body. You also need to specify `contentInsetAdjustmentBehavior="automatic"` in your `ScrollView`, `FlatList` etc. If you don't have a `ScrollView`, specify `headerTransparent: false`. @@ -589,13 +713,22 @@ Whether you can use gestures to dismiss this screen. Defaults to `true`. Only su #### `animationTypeForReplace` -The type of animation to use when this screen replaces another screen. Defaults to `pop`. +The type of animation to use when this screen replaces another screen. Defaults to `push`. Supported values: - `push`: the new screen will perform push animation. + + + - `pop`: the new screen will perform pop animation. + + #### `animation` How the screen should animate when pushed or popped.