[RNMobile] Navigation in bottom-sheet

docs/manifest.json

@@ -1037,6 +1037,12 @@
 		"markdown_source": "../packages/components/src/menu-items-choice/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "BottomSheetNavigation",
+		"slug": "bottom-sheet-navigation",
+		"markdown_source": "../packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Modal",
 		"slug": "modal",

packages/block-editor/src/components/block-settings/container.native.js

@@ -1,21 +1,20 @@
 /**
  * WordPress dependencies
  */
-import {
-	BottomSheet,
-	BottomSheetConsumer,
-	ColorSettings,
-	colorsUtils,
-} from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
 import { InspectorControls } from '@wordpress/block-editor';
-
+import { BottomSheet, ColorSettings } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import { withDispatch, withSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 import styles from './container.native.scss';
 
+export const blockSettingsScreens = {
+	settings: 'Settings',
+	color: 'Color',
+};
+
 function BottomSheetSettings( {
 	editorSidebarOpened,
 	closeGeneralSidebar,
@@ -30,23 +29,18 @@ function BottomSheetSettings( {
 			contentStyle={ styles.content }
 			{ ...props }
 		>
-			<BottomSheetConsumer>
-				{ ( { currentScreen, extraProps, ...bottomSheetProps } ) => {
-					switch ( currentScreen ) {
-						case colorsUtils.subsheets.color:
-							return (
-								<ColorSettings
-									defaultSettings={ settings }
-									{ ...bottomSheetProps }
-									{ ...extraProps }
-								/>
-							);
-						case colorsUtils.subsheets.settings:
-						default:
-							return <InspectorControls.Slot />;
-					}
-				} }
-			</BottomSheetConsumer>
+			<BottomSheet.NavigationContainer animate main>
+				<BottomSheet.NavigationScreen
+					name={ blockSettingsScreens.settings }
+				>
+					<InspectorControls.Slot />
+				</BottomSheet.NavigationScreen>
+				<BottomSheet.NavigationScreen
+					name={ blockSettingsScreens.color }
+				>
+					<ColorSettings defaultSettings={ settings } />
+				</BottomSheet.NavigationScreen>
+			</BottomSheet.NavigationContainer>
 		</BottomSheet>
 	);
 }

packages/block-editor/src/components/block-settings/index.native.js

@@ -1,2 +1,5 @@
 export { default as BlockSettingsButton } from './button';
-export { default as BottomSheetSettings } from './container';
+export {
+	default as BottomSheetSettings,
+	blockSettingsScreens,
+} from './container';