From 435119c3bed91c10737a574e072d7482e7e5c6bb Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Tue, 7 Sep 2021 08:56:36 -0700
Subject: [PATCH] [Mobile] Update the bottom sheet header (#34309)

* Add new Header bottomSheet component

* Include the new Header component in buttomSheet

* Update NavigationHeader to use the new Header component for backwards compatibility

* Update all instances of NavigationHeader with Header

* Update BottomSheet Header documentation to reduce its size (#34339)

Leverage short, declarative statements when possible.

* Move Header to NavBar

* Update usage from Header to NavBar

* Remove the NavigationHeader component

* Fix space in the styles

Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
---
 .../src/font-size-picker/index.native.js      |  10 +-
 .../index.native.js                           |  10 +-
 .../bottom-sheet-text-control/index.native.js |  10 +-
 .../src/mobile/bottom-sheet/index.native.js   |   4 +-
 .../src/mobile/bottom-sheet/nav-bar/README.md |  61 ++++++++
 .../nav-bar/action-button.native.js           |  30 ++++
 .../nav-bar/apply-button.native.js            |  53 +++++++
 .../nav-bar/back-button.native.js             |  94 +++++++++++
 .../bottom-sheet/nav-bar/heading.native.js    |  33 ++++
 .../bottom-sheet/nav-bar/index.native.js      |  23 +++
 .../bottom-sheet/nav-bar/styles.native.scss   |  69 ++++++++
 .../bottom-sheet/navigation-header.native.js  | 147 ------------------
 .../mobile/bottom-sheet/sub-sheet/README.md   |   8 +-
 .../gradient-picker-screen.native.js          |  10 +-
 .../color-settings/palette.screen.native.js   |  10 +-
 .../index.native.js                           |  19 ++-
 .../src/mobile/link-picker/index.native.js    |  13 +-
 .../help-detail-navigation-screen.native.js   |  12 +-
 .../components/editor-help/index.native.js    |  24 +--
 19 files changed, 437 insertions(+), 203 deletions(-)
 create mode 100644 packages/components/src/mobile/bottom-sheet/nav-bar/README.md
 create mode 100644 packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js
 create mode 100644 packages/components/src/mobile/bottom-sheet/nav-bar/apply-button.native.js
 create mode 100644 packages/components/src/mobile/bottom-sheet/nav-bar/back-button.native.js
 create mode 100644 packages/components/src/mobile/bottom-sheet/nav-bar/heading.native.js
 create mode 100644 packages/components/src/mobile/bottom-sheet/nav-bar/index.native.js
 create mode 100644 packages/components/src/mobile/bottom-sheet/nav-bar/styles.native.scss
 delete mode 100644 packages/components/src/mobile/bottom-sheet/navigation-header.native.js

diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js
index 2be833c450a82..1da82363c4789 100644
--- a/packages/components/src/font-size-picker/index.native.js
+++ b/packages/components/src/font-size-picker/index.native.js
@@ -84,10 +84,12 @@ function FontSizePicker( {
 			showSheet={ showSubSheet }
 		>
 			<>
-				<BottomSheet.NavigationHeader
-					screen={ label }
-					leftButtonOnPress={ goBack }
-				/>
+				<BottomSheet.NavBar>
+					<BottomSheet.NavBar.BackButton onPress={ goBack } />
+					<BottomSheet.NavBar.Heading>
+						{ label }
+					</BottomSheet.NavBar.Heading>
+				</BottomSheet.NavBar>
 				<View style={ styles[ 'components-font-size-picker' ] }>
 					<BottomSheet.Cell
 						customActionButton
diff --git a/packages/components/src/mobile/bottom-sheet-select-control/index.native.js b/packages/components/src/mobile/bottom-sheet-select-control/index.native.js
index 5f2ec0aee7997..bc4a828dd9bdf 100644
--- a/packages/components/src/mobile/bottom-sheet-select-control/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet-select-control/index.native.js
@@ -70,10 +70,12 @@ const BottomSheetSelectControl = ( {
 			showSheet={ showSubSheet }
 		>
 			<>
-				<BottomSheet.NavigationHeader
-					screen={ label }
-					leftButtonOnPress={ goBack }
-				/>
+				<BottomSheet.NavBar>
+					<BottomSheet.NavBar.BackButton onPress={ goBack } />
+					<BottomSheet.NavBar.Heading>
+						{ label }
+					</BottomSheet.NavBar.Heading>
+				</BottomSheet.NavBar>
 				<View style={ styles.selectControl }>
 					{ items.map( ( item, index ) => (
 						<BottomSheet.Cell
diff --git a/packages/components/src/mobile/bottom-sheet-text-control/index.native.js b/packages/components/src/mobile/bottom-sheet-text-control/index.native.js
index 1244e2b686aa0..820f8e16da296 100644
--- a/packages/components/src/mobile/bottom-sheet-text-control/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet-text-control/index.native.js
@@ -68,10 +68,12 @@ const BottomSheetTextControl = ( {
 			showSheet={ showSubSheet }
 		>
 			<>
-				<BottomSheet.NavigationHeader
-					screen={ label }
-					leftButtonOnPress={ goBack }
-				/>
+				<BottomSheet.NavBar>
+					<BottomSheet.NavBar.BackButton onPress={ goBack } />
+					<BottomSheet.NavBar.Heading>
+						{ label }
+					</BottomSheet.NavBar.Heading>
+				</BottomSheet.NavBar>
 				<PanelBody style={ horizontalBorderStyle }>
 					<TextInput
 						label={ label }
diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js
index 27e16192705e7..777a17ecb2592 100644
--- a/packages/components/src/mobile/bottom-sheet/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet/index.native.js
@@ -42,7 +42,7 @@ import NavigationScreen from './bottom-sheet-navigation/navigation-screen';
 import NavigationContainer from './bottom-sheet-navigation/navigation-container';
 import KeyboardAvoidingView from './keyboard-avoiding-view';
 import BottomSheetSubSheet from './sub-sheet';
-import NavigationHeader from './navigation-header';
+import NavBar from './nav-bar';
 import { BottomSheetProvider } from './bottom-sheet-context';
 
 const DEFAULT_LAYOUT_ANIMATION = LayoutAnimation.Presets.easeInEaseOut;
@@ -609,7 +609,7 @@ ThemedBottomSheet.getWidth = getWidth;
 ThemedBottomSheet.Button = Button;
 ThemedBottomSheet.Cell = Cell;
 ThemedBottomSheet.SubSheet = BottomSheetSubSheet;
-ThemedBottomSheet.NavigationHeader = NavigationHeader;
+ThemedBottomSheet.NavBar = NavBar;
 ThemedBottomSheet.CyclePickerCell = CyclePickerCell;
 ThemedBottomSheet.PickerCell = PickerCell;
 ThemedBottomSheet.SwitchCell = SwitchCell;
diff --git a/packages/components/src/mobile/bottom-sheet/nav-bar/README.md b/packages/components/src/mobile/bottom-sheet/nav-bar/README.md
new file mode 100644
index 0000000000000..76f1c19b14501
--- /dev/null
+++ b/packages/components/src/mobile/bottom-sheet/nav-bar/README.md
@@ -0,0 +1,61 @@
+# BottomSheet Header
+
+BottomSheet Header components provide styled elements for composing header UI within a `BottomSheet`.
+
+## Usage
+
+```jsx
+import { BottomSheet } from '@wordpress/components';
+
+export default = () => (
+	<BottomSheet>
+		<BottomSheet.NavBar>
+			<BottomSheet.NavBar.BackButton onPress={ () => {} } />
+			<BottomSheet.NavBar.Title>A Sheet Title</BottomSheet.NavBar.Title>
+			<BottomSheet.NavBar.ApplyButton onPress={ () => {} } />
+		</BottomSheet.NavBar>
+	</BottomSheet>
+);
+```
+
+## BottomSheet.NavBar
+
+Provides structural styles for left-center-right layout for header UI.
+
+## BottomSheet.NavBar.Title
+
+Displays a styled title for a bottom sheet.
+
+## BottomSheet.NavBar.ApplyButton
+
+Displays a styled button to apply settings of bottom sheet controls.
+
+### Props
+
+#### onPress
+
+Callback invoked once the button is pressed.
+
+## BottomSheet.NavBar.BackButton
+
+Displays a styled button to navigate backwards from a bottom sheet.
+
+### Props
+
+#### onPress
+
+Callback invoked once the button is pressed.
+
+## BottomSheet.NavBar.DismissButton
+
+Displays a styled button to dismiss a full screen bottom sheet.
+
+### Props
+
+#### onPress
+
+Callback invoked once the button is pressed.
+
+#### iosText 
+
+Used to display iOS text if different from "Cancel". 
\ No newline at end of file
diff --git a/packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js b/packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js
new file mode 100644
index 0000000000000..6b11f30959fe5
--- /dev/null
+++ b/packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { View, TouchableWithoutFeedback } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+// Action button component is used by both Back and Apply Button componenets.
+function ActionButton( {
+	onPress,
+	accessibilityLabel,
+	accessibilityHint,
+	children,
+} ) {
+	return (
+		<TouchableWithoutFeedback
+			onPress={ onPress }
+			accessibilityRole={ 'button' }
+			accessibilityLabel={ accessibilityLabel }
+			accessibilityHint={ accessibilityHint }
+		>
+			<View style={ styles[ 'action-button' ] }>{ children }</View>
+		</TouchableWithoutFeedback>
+	);
+}
+
+export default ActionButton;
diff --git a/packages/components/src/mobile/bottom-sheet/nav-bar/apply-button.native.js b/packages/components/src/mobile/bottom-sheet/nav-bar/apply-button.native.js
new file mode 100644
index 0000000000000..a5362f1a67a09
--- /dev/null
+++ b/packages/components/src/mobile/bottom-sheet/nav-bar/apply-button.native.js
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { View, Text, Platform } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, check } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+import ActionButton from './action-button';
+
+function ApplyButton( { onPress } ) {
+	const buttonTextStyle = usePreferredColorSchemeStyle(
+		styles[ 'button-text' ],
+		styles[ 'button-text-dark' ]
+	);
+
+	const applyButtonStyle = usePreferredColorSchemeStyle(
+		styles[ 'apply-button-icon' ],
+		styles[ 'apply-button-icon-dark' ]
+	);
+
+	return (
+		<View style={ styles[ 'apply-button' ] }>
+			<ActionButton
+				onPress={ onPress }
+				accessibilityLabel={ __( 'Apply' ) }
+				accessibilityHint={ __( 'Applies the setting' ) }
+			>
+				{ Platform.OS === 'ios' ? (
+					<Text style={ buttonTextStyle } maxFontSizeMultiplier={ 2 }>
+						{ __( 'Apply' ) }
+					</Text>
+				) : (
+					<Icon
+						icon={ check }
+						size={ 24 }
+						style={ applyButtonStyle }
+					/>
+				) }
+			</ActionButton>
+		</View>
+	);
+}
+
+export default ApplyButton;
diff --git a/packages/components/src/mobile/bottom-sheet/nav-bar/back-button.native.js b/packages/components/src/mobile/bottom-sheet/nav-bar/back-button.native.js
new file mode 100644
index 0000000000000..859eba98b9604
--- /dev/null
+++ b/packages/components/src/mobile/bottom-sheet/nav-bar/back-button.native.js
@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { View, Platform, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, arrowLeft, close } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+import ActionButton from './action-button';
+import chevronBack from './../chevron-back';
+
+function Button( { onPress, icon, text } ) {
+	const buttonTextStyle = usePreferredColorSchemeStyle(
+		styles[ 'button-text' ],
+		styles[ 'button-text-dark' ]
+	);
+
+	return (
+		<View style={ styles[ 'back-button' ] }>
+			<ActionButton
+				onPress={ onPress }
+				accessibilityLabel={ __( 'Go back' ) }
+				accessibilityHint={ __(
+					'Navigates to the previous content sheet'
+				) }
+			>
+				{ icon }
+				{ text && (
+					<Text style={ buttonTextStyle } maxFontSizeMultiplier={ 2 }>
+						{ text }
+					</Text>
+				) }
+			</ActionButton>
+		</View>
+	);
+}
+
+function BackButton( { onPress } ) {
+	const chevronLeftStyle = usePreferredColorSchemeStyle(
+		styles[ 'chevron-left-icon' ],
+		styles[ 'chevron-left-icon-dark' ]
+	);
+	const arrowLeftStyle = usePreferredColorSchemeStyle(
+		styles[ 'arrow-left-icon' ],
+		styles[ 'arrow-right-icon-dark' ]
+	);
+
+	let backIcon;
+	let backText;
+
+	if ( Platform.OS === 'ios' ) {
+		backIcon = (
+			<Icon icon={ chevronBack } size={ 21 } style={ chevronLeftStyle } />
+		);
+		backText = __( 'Back' );
+	} else {
+		backIcon = (
+			<Icon icon={ arrowLeft } size={ 24 } style={ arrowLeftStyle } />
+		);
+	}
+
+	return <Button onPress={ onPress } icon={ backIcon } text={ backText } />;
+}
+
+function DismissButton( { onPress, iosText } ) {
+	const arrowLeftStyle = usePreferredColorSchemeStyle(
+		styles[ 'arrow-left-icon' ],
+		styles[ 'arrow-right-icon-dark' ]
+	);
+
+	let backIcon;
+	let backText;
+
+	if ( Platform.OS === 'ios' ) {
+		backText = iosText ? iosText : __( 'Cancel' );
+	} else {
+		backIcon = <Icon icon={ close } size={ 24 } style={ arrowLeftStyle } />;
+	}
+
+	return <Button onPress={ onPress } icon={ backIcon } text={ backText } />;
+}
+
+Button.Back = BackButton;
+Button.Dismiss = DismissButton; // Cancel or Close Button
+
+export default Button;
diff --git a/packages/components/src/mobile/bottom-sheet/nav-bar/heading.native.js b/packages/components/src/mobile/bottom-sheet/nav-bar/heading.native.js
new file mode 100644
index 0000000000000..9bbae77dbde5e
--- /dev/null
+++ b/packages/components/src/mobile/bottom-sheet/nav-bar/heading.native.js
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+function Heading( { children } ) {
+	const headingStyle = usePreferredColorSchemeStyle(
+		styles.heading,
+		styles[ 'heading-dark' ]
+	);
+
+	return (
+		<Text
+			accessibilityRole="header"
+			style={ headingStyle }
+			maxFontSizeMultiplier={ 3 }
+		>
+			{ children }
+		</Text>
+	);
+}
+
+export default Heading;
diff --git a/packages/components/src/mobile/bottom-sheet/nav-bar/index.native.js b/packages/components/src/mobile/bottom-sheet/nav-bar/index.native.js
new file mode 100644
index 0000000000000..57b4c23d4b49a
--- /dev/null
+++ b/packages/components/src/mobile/bottom-sheet/nav-bar/index.native.js
@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import ApplyButton from './apply-button';
+import Button from './back-button';
+import Heading from './heading';
+import styles from './styles.scss';
+function NavBar( { children } ) {
+	return <View style={ styles[ 'nav-bar' ] }>{ children }</View>;
+}
+
+NavBar.ApplyButton = ApplyButton;
+NavBar.BackButton = Button.Back;
+NavBar.DismissButton = Button.Dismiss;
+
+NavBar.Heading = Heading;
+
+export default NavBar;
diff --git a/packages/components/src/mobile/bottom-sheet/nav-bar/styles.native.scss b/packages/components/src/mobile/bottom-sheet/nav-bar/styles.native.scss
new file mode 100644
index 0000000000000..a6fe92ea37626
--- /dev/null
+++ b/packages/components/src/mobile/bottom-sheet/nav-bar/styles.native.scss
@@ -0,0 +1,69 @@
+.nav-bar {
+	align-items: center;
+	flex-direction: row;
+	height: 44px;
+	justify-content: center;
+}
+
+.heading {
+	color: $light-primary;
+	text-align: center;
+	font-weight: 600;
+	font-size: 16px;
+	position: absolute;
+	width: 100%;
+}
+
+.heading-dark {
+	color: $dark-primary;
+}
+
+.action-button {
+	align-items: center;
+	flex-direction: row;
+	height: 100%;
+	justify-content: center;
+	min-width: 44px;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
+}
+
+.back-button {
+	align-items: flex-start;
+	flex: 1;
+	justify-content: center;
+	z-index: 2;
+}
+
+.apply-button {
+	align-items: flex-end;
+	flex: 1;
+	justify-content: center;
+	z-index: 2;
+}
+
+.button-text {
+	color: $blue-50;
+	font-size: 16px;
+}
+
+.button-text-dark {
+	color: $blue-30;
+}
+
+.chevron-left-icon {
+	color: $blue-50;
+	margin-left: -11px;
+}
+
+.chevron-left-icon-dark {
+	color: $blue-30;
+}
+
+.arrow-left-icon {
+	color: $gray-60;
+}
+
+.arrow-left-icon-dark {
+	color: $dark-secondary;
+}
diff --git a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js
deleted file mode 100644
index d0a28e2482c40..0000000000000
--- a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * External dependencies
- */
-import { View, TouchableWithoutFeedback, Text, Platform } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { check, Icon, arrowLeft, close } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import chevronBack from './chevron-back';
-
-function BottomSheetNavigationHeader( {
-	leftButtonText,
-	leftButtonOnPress,
-	screen,
-	applyButtonOnPress,
-	isFullscreen,
-} ) {
-	const isIOS = Platform.OS === 'ios';
-
-	const bottomSheetHeaderTitleStyle = usePreferredColorSchemeStyle(
-		styles.bottomSheetHeaderTitle,
-		styles.bottomSheetHeaderTitleDark
-	);
-	const bottomSheetButtonTextStyle = usePreferredColorSchemeStyle(
-		styles.bottomSheetButtonText,
-		styles.bottomSheetButtonTextDark
-	);
-	const chevronLeftStyle = usePreferredColorSchemeStyle(
-		styles.chevronLeftIcon,
-		styles.chevronLeftIconDark
-	);
-	const arrowLeftStyle = usePreferredColorSchemeStyle(
-		styles.arrowLeftIcon,
-		styles.arrowLeftIconDark
-	);
-	const applyButtonStyle = usePreferredColorSchemeStyle(
-		styles.applyButton,
-		styles.applyButtonDark
-	);
-
-	const renderBackButton = () => {
-		let backIcon;
-		let backText;
-
-		if ( isIOS ) {
-			backIcon = isFullscreen ? undefined : (
-				<Icon
-					icon={ chevronBack }
-					size={ 21 }
-					style={ chevronLeftStyle }
-				/>
-			);
-			if ( leftButtonText ) {
-				backText = leftButtonText;
-			} else if ( isFullscreen ) {
-				backText = __( 'Cancel' );
-			} else {
-				backText = __( 'Back' );
-			}
-		} else {
-			backIcon = (
-				<Icon
-					icon={ isFullscreen ? close : arrowLeft }
-					size={ 24 }
-					style={ arrowLeftStyle }
-				/>
-			);
-		}
-
-		return (
-			<TouchableWithoutFeedback
-				onPress={ leftButtonOnPress }
-				accessibilityRole={ 'button' }
-				accessibilityLabel={ __( 'Go back' ) }
-				accessibilityHint={ __(
-					'Navigates to the previous content sheet'
-				) }
-			>
-				<View style={ styles.bottomSheetActionButton }>
-					<>
-						{ backIcon }
-						{ backText && (
-							<Text
-								style={ bottomSheetButtonTextStyle }
-								maxFontSizeMultiplier={ 2 }
-							>
-								{ backText }
-							</Text>
-						) }
-					</>
-				</View>
-			</TouchableWithoutFeedback>
-		);
-	};
-
-	return (
-		<View style={ styles.bottomSheetHeader }>
-			<View style={ styles.bottomSheetHeaderLeft }>
-				{ renderBackButton() }
-			</View>
-			<Text
-				accessibilityRole="header"
-				style={ bottomSheetHeaderTitleStyle }
-				maxFontSizeMultiplier={ 3 }
-			>
-				{ screen }
-			</Text>
-			<View style={ styles.bottomSheetHeaderRight }>
-				{ !! applyButtonOnPress && (
-					<TouchableWithoutFeedback
-						onPress={ applyButtonOnPress }
-						accessibilityRole={ 'button' }
-						accessibilityLabel={ __( 'Apply' ) }
-						accessibilityHint={ __( 'Applies the setting' ) }
-					>
-						<View style={ styles.bottomSheetActionButton }>
-							{ isIOS ? (
-								<Text
-									style={ bottomSheetButtonTextStyle }
-									maxFontSizeMultiplier={ 2 }
-								>
-									{ __( 'Apply' ) }
-								</Text>
-							) : (
-								<Icon
-									icon={ check }
-									size={ 24 }
-									style={ applyButtonStyle }
-								/>
-							) }
-						</View>
-					</TouchableWithoutFeedback>
-				) }
-			</View>
-		</View>
-	);
-}
-
-export default BottomSheetNavigationHeader;
diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md b/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md
index 592039a8a5b14..1e60bb74ac534 100644
--- a/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md
+++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md
@@ -49,10 +49,10 @@ const ExampleControl = () => {
 			showSheet={ showSubSheet }
 		>
 			<>
-				<BottomSheet.NavigationHeader
-					screen={ 'Howdy' }
-					leftButtonOnPress={ goBack }
-				/>
+				<BottomSheet.NavBar>
+					<BottomSheet.NavBar.BackButton onPress={ goBack } />
+					<BottomSheet.NavBar.Heading>{ 'Howdy' }</BottomSheet.NavBar.Heading>
+				</BottomSheet.NavBar>
 				<View paddingHorizontal={ 16 }>
 					<Text>{ 'World' }</Text>
 				</View>
diff --git a/packages/components/src/mobile/color-settings/gradient-picker-screen.native.js b/packages/components/src/mobile/color-settings/gradient-picker-screen.native.js
index 74d4e9d30bda5..c94d9e37a17ec 100644
--- a/packages/components/src/mobile/color-settings/gradient-picker-screen.native.js
+++ b/packages/components/src/mobile/color-settings/gradient-picker-screen.native.js
@@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import CustomGradientPicker from '../../custom-gradient-picker';
-import NavigationHeader from '../bottom-sheet/navigation-header';
+import NavBar from '../bottom-sheet/nav-bar';
 
 const GradientPickerScreen = () => {
 	const navigation = useNavigation();
@@ -21,10 +21,10 @@ const GradientPickerScreen = () => {
 	const { setColor, currentValue, isGradientColor } = route.params;
 	return (
 		<View>
-			<NavigationHeader
-				screen={ __( 'Customize Gradient' ) }
-				leftButtonOnPress={ navigation.goBack }
-			/>
+			<NavBar>
+				<NavBar.BackButton onPress={ navigation.goBack } />
+				<NavBar.Heading>{ __( 'Customize Gradient' ) }</NavBar.Heading>
+			</NavBar>
 			<CustomGradientPicker
 				setColor={ setColor }
 				currentValue={ currentValue }
diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js
index 33456ee03a4fd..f606b407b8832 100644
--- a/packages/components/src/mobile/color-settings/palette.screen.native.js
+++ b/packages/components/src/mobile/color-settings/palette.screen.native.js
@@ -20,7 +20,7 @@ import { useRoute, useNavigation } from '@react-navigation/native';
  */
 import ColorPalette from '../../color-palette';
 import ColorIndicator from '../../color-indicator';
-import NavigationHeader from '../bottom-sheet/navigation-header';
+import NavBar from '../bottom-sheet/nav-bar';
 import SegmentedControls from '../segmented-control';
 import { colorsUtils } from './utils';
 
@@ -164,10 +164,10 @@ const PaletteScreen = () => {
 	}
 	return (
 		<View>
-			<NavigationHeader
-				screen={ label }
-				leftButtonOnPress={ navigation.goBack }
-			/>
+			<NavBar>
+				<NavBar.BackButton onPress={ navigation.goBack } />
+				<NavBar.Heading>{ label } </NavBar.Heading>
+			</NavBar>
 			<ColorPalette
 				setColor={ setColor }
 				activeColor={ currentValue }
diff --git a/packages/components/src/mobile/focal-point-settings-panel/index.native.js b/packages/components/src/mobile/focal-point-settings-panel/index.native.js
index 6b294526f1b0d..879f6c2c4e7d6 100644
--- a/packages/components/src/mobile/focal-point-settings-panel/index.native.js
+++ b/packages/components/src/mobile/focal-point-settings-panel/index.native.js
@@ -14,7 +14,7 @@ import { BottomSheetContext, FocalPointPicker } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import NavigationHeader from '../bottom-sheet/navigation-header';
+import NavBar from '../bottom-sheet/nav-bar';
 import styles from './styles.scss';
 
 const FocalPointSettingsPanelMemo = memo(
@@ -43,12 +43,17 @@ const FocalPointSettingsPanelMemo = memo(
 
 		return (
 			<SafeAreaView style={ styles.safearea }>
-				<NavigationHeader
-					screen={ __( 'Edit focal point' ) }
-					leftButtonOnPress={ () => onButtonPress( 'cancel' ) }
-					applyButtonOnPress={ () => onButtonPress( 'apply' ) }
-					isFullscreen
-				/>
+				<NavBar>
+					<NavBar.DismissButton
+						onPress={ () => onButtonPress( 'cancel' ) }
+					/>
+					<NavBar.Heading>
+						{ __( 'Edit focal point' ) }
+					</NavBar.Heading>
+					<NavBar.ApplyButton
+						onPress={ () => onButtonPress( 'apply' ) }
+					/>
+				</NavBar>
 				<FocalPointPicker
 					focalPoint={ draftFocalPoint }
 					onChange={ setPosition }
diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js
index a007795a37450..76797bbd26ef2 100644
--- a/packages/components/src/mobile/link-picker/index.native.js
+++ b/packages/components/src/mobile/link-picker/index.native.js
@@ -18,7 +18,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  * Internal dependencies
  */
 import LinkPickerResults from './link-picker-results';
-import NavigationHeader from '../bottom-sheet/navigation-header';
+import NavBar from '../bottom-sheet/nav-bar';
 import styles from './styles.scss';
 
 // this creates a search suggestion for adding a url directly
@@ -81,12 +81,11 @@ export const LinkPicker = ( {
 
 	return (
 		<SafeAreaView style={ styles.safeArea }>
-			<NavigationHeader
-				screen={ __( 'Link to' ) }
-				leftButtonOnPress={ cancel }
-				applyButtonOnPress={ onSubmit }
-				isFullscreen
-			/>
+			<NavBar>
+				<NavBar.DismissButton onPress={ cancel } />
+				<NavBar.Heading>{ __( 'Link to' ) }</NavBar.Heading>
+				<NavBar.ApplyButton onPress={ onSubmit } />
+			</NavBar>
 			<View style={ styles.contentContainer }>
 				<BottomSheet.Cell
 					icon={ link }
diff --git a/packages/editor/src/components/editor-help/help-detail-navigation-screen.native.js b/packages/editor/src/components/editor-help/help-detail-navigation-screen.native.js
index 2240dd4e64d28..f238cf006e6d3 100644
--- a/packages/editor/src/components/editor-help/help-detail-navigation-screen.native.js
+++ b/packages/editor/src/components/editor-help/help-detail-navigation-screen.native.js
@@ -31,10 +31,14 @@ const HelpDetailNavigationScreen = ( { content, label } ) => {
 	return (
 		<BottomSheet.NavigationScreen isScrollable fullScreen>
 			<View style={ styles.container }>
-				<BottomSheet.NavigationHeader
-					screen={ label }
-					leftButtonOnPress={ navigation.goBack }
-				/>
+				<BottomSheet.NavBar>
+					<BottomSheet.NavBar.BackButton
+						onPress={ navigation.goBack }
+					/>
+					<BottomSheet.NavBar.Heading>
+						{ label }
+					</BottomSheet.NavBar.Heading>
+				</BottomSheet.NavBar>
 				<ScrollView
 					{ ...listProps }
 					contentContainerStyle={ {
diff --git a/packages/editor/src/components/editor-help/index.native.js b/packages/editor/src/components/editor-help/index.native.js
index bcef707a0e046..b9eaaf4ccb254 100644
--- a/packages/editor/src/components/editor-help/index.native.js
+++ b/packages/editor/src/components/editor-help/index.native.js
@@ -61,6 +61,11 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
 	} ) );
 
+	const title =
+		postType === 'page'
+			? __( 'How to edit your page' )
+			: __( 'How to edit your post' );
+
 	return (
 		<BottomSheet
 			isVisible={ isVisible }
@@ -76,16 +81,15 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 					name="help-topics"
 				>
 					<View style={ styles.container }>
-						<BottomSheet.NavigationHeader
-							isFullscreen
-							leftButtonOnPress={ close }
-							leftButtonText={ __( 'Close' ) }
-							screen={
-								postType === 'page'
-									? __( 'How to edit your page' )
-									: __( 'How to edit your post' )
-							}
-						/>
+						<BottomSheet.NavBar>
+							<BottomSheet.NavBar.DismissButton
+								onPress={ close }
+								iosText={ __( 'Close' ) }
+							/>
+							<BottomSheet.NavBar.Heading>
+								{ title }
+							</BottomSheet.NavBar.Heading>
+						</BottomSheet.NavBar>
 						<BottomSheetConsumer>
 							{ ( { listProps } ) => {
 								const contentContainerStyle = StyleSheet.flatten(