[RNMobile] Navigation in bottom-sheet

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

@@ -1,27 +1,45 @@
 /**
  * WordPress dependencies
  */
-import {
-	BottomSheet,
-	BottomSheetConsumer,
-	ColorSettings,
-	colorsUtils,
-} from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+/**
+ * External dependencies
+ */
+import { DefaultTheme } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
 import { InspectorControls } from '@wordpress/block-editor';
-
+import { BottomSheet, ColorSettings } from '@wordpress/components';
+import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { withDispatch, withSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 import styles from './container.native.scss';
 
+const Stack = createStackNavigator();
+
+export const blockSettingsScreens = {
+	settings: 'Settings',
+	color: 'Color',
+};
+
 function BottomSheetSettings( {
 	editorSidebarOpened,
 	closeGeneralSidebar,
 	settings,
 	...props
 } ) {
+	const backgroundStyle = usePreferredColorSchemeStyle(
+		styles.background,
+		styles.backgroundDark
+	);
+
+	const MyTheme = {
+		...DefaultTheme,
+		colors: {
+			...DefaultTheme.colors,
+			background: backgroundStyle.backgroundColor,
+		},
+	};
 	return (
 		<BottomSheet
 			isVisible={ editorSidebarOpened }
@@ -30,23 +48,23 @@ 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
+				theme={ MyTheme }
+				stack={ Stack }
+			>
+				{ BottomSheet.NavigationScreen( {
+					name: blockSettingsScreens.settings,
+					stack: Stack,
+					children: <InspectorControls.Slot />,
+				} ) }
+				{ BottomSheet.NavigationScreen( {
+					name: blockSettingsScreens.color,
+					stack: Stack,
+					children: <ColorSettings defaultSettings={ settings } />,
+				} ) }
+			</BottomSheet.NavigationContainer>
 		</BottomSheet>
 	);
 }