[RNMobile] Full screen block inserter menu for Android

packages/block-editor/src/components/block-types-list/index.native.js

@@ -22,7 +22,13 @@ import styles from './style.scss';
 
 const MIN_COL_NUM = 3;
 
-export default function BlockTypesList( { name, items, onSelect, listProps } ) {
+export default function BlockTypesList( {
+	name,
+	items,
+	onSelect,
+	listProps,
+	initialNumToRender = 3,
+} ) {
 	const [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );
 	const [ itemWidth, setItemWidth ] = useState();
 	const [ maxWidth, setMaxWidth ] = useState();
@@ -81,7 +87,7 @@ export default function BlockTypesList( { name, items, onSelect, listProps } ) {
 			keyboardShouldPersistTaps="always"
 			numColumns={ numberOfColumns }
 			data={ items }
-			initialNumToRender={ 3 }
+			initialNumToRender={ initialNumToRender }
 			ItemSeparatorComponent={ () => (
 				<TouchableWithoutFeedback accessible={ false }>
 					<View

packages/block-editor/src/components/inserter/menu.native.js

@@ -38,9 +38,11 @@ function InserterMenu( {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ showTabs, setShowTabs ] = useState( true );
 	// eslint-disable-next-line no-undef
-	const [ showSearchForm, setShowSearchForm ] = useState( __DEV__ );
+	const [ showSearchForm, setShowSearchForm ] = useState( true );
 	const [ tabIndex, setTabIndex ] = useState( 0 );
 
+	const isIOS = Platform.OS === 'ios';
+
 	const {
 		showInsertionPoint,
 		hideInsertionPoint,
@@ -200,17 +202,23 @@ function InserterMenu( {
 			}
 			hasNavigation
 			setMinHeightToMaxHeight={ showSearchForm }
-			contentStyle={ styles.list }
+			contentStyle={ styles[ 'inserter-menu__list' ] }
+			isFullScreen={ ! isIOS && showSearchForm }
+			allowDragIndicator={ true }
 		>
 			<BottomSheetConsumer>
 				{ ( { listProps } ) => (
-					<TouchableHighlight accessible={ false }>
+					<TouchableHighlight
+						accessible={ false }
+						style={ styles[ 'inserter-menu__list-wrapper' ] }
+					>
 						{ ! showTabs || filterValue ? (
 							<InserterSearchResults
 								rootClientId={ rootClientId }
 								filterValue={ filterValue }
 								onSelect={ onSelectItem }
 								listProps={ listProps }
+								isFullScreen={ ! isIOS && showSearchForm }
 							/>
 						) : (
 							<InserterTabs

packages/block-editor/src/components/inserter/search-results.native.js

@@ -12,18 +12,34 @@ import InserterNoResults from './no-results';
 import { store as blockEditorStore } from '../../store';
 import useBlockTypeImpressions from './hooks/use-block-type-impressions';
 
+const NON_BLOCK_CATEGORIES = [ 'reusable' ];
+const ALLOWED_EMBED_VARIATIONS = [ 'core/embed' ];
+
 function InserterSearchResults( {
 	filterValue,
 	onSelect,
 	listProps,
 	rootClientId,
+	isFullScreen,
 } ) {
 	const { blockTypes } = useSelect(
 		( select ) => {
 			const allItems = select( blockEditorStore ).getInserterItems(
 				rootClientId
 			);
-			const filteredItems = searchItems( allItems, filterValue );
+
+			const blockItems = allItems.filter(
+				( { id, category } ) =>
+					! NON_BLOCK_CATEGORIES.includes( category ) &&
+					// We don't want to show all possible embed variations
+					// as different blocks in the inserter. We'll only show a
+					// few popular ones.
+					( category !== 'embed' ||
+						( category === 'embed' &&
+							ALLOWED_EMBED_VARIATIONS.includes( id ) ) )
+			);
+
+			const filteredItems = searchItems( blockItems, filterValue );
 
 			return { blockTypes: filteredItems };
 		},
@@ -46,6 +62,7 @@ function InserterSearchResults( {
 	return (
 		<BlockTypesList
 			name="Blocks"
+			initialNumToRender={ isFullScreen ? 10 : 3 }
 			{ ...{ items, onSelect: handleSelect, listProps } }
 		/>
 	);

packages/block-editor/src/components/inserter/style.native.scss

@@ -8,7 +8,11 @@
 	color: $blue-30;
 }
 
-.list {
+.inserter-menu__list-wrapper {
+	flex: 1;
+}
+
+.inserter-menu__list {
 	padding-bottom: 20;
 	padding-top: 8;
 }
@@ -51,13 +55,12 @@
 
 .inserter-tabs__wrapper {
 	overflow: hidden;
+	flex: 1;
 }
 
 .inserter-tabs__container {
 	height: 100%;
 	width: 100%;
-}
-
-.inserter-tabs__item {
-	position: absolute;
+	flex: 1;
+	flex-direction: row;
 }

packages/block-editor/src/components/inserter/tabs.native.js

@@ -100,13 +100,7 @@ function InserterTabs( {
 		>
 			<Animated.View style={ containerStyle }>
 				{ tabs.map( ( { component: TabComponent }, index ) => (
-					<View
-						key={ `tab-${ index }` }
-						style={ [
-							styles[ 'inserter-tabs__item' ],
-							{ left: index * wrapperWidth },
-						] }
-					>
+					<View key={ `tab-${ index }` }>
 						<TabComponent
 							rootClientId={ rootClientId }
 							onSelect={ onSelect }

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

@@ -485,6 +485,16 @@ class BottomSheet extends Component {
 			</>
 		);
 
+		const showDragIndicator = () => {
+			// if iOS or not fullscreen show the drag indicator
+			if ( Platform.OS === 'ios' || ! this.state.isFullScreen ) {
+				return true;
+			}
+
+			// Otherwise check the allowDragIndicator
+			return this.props.allowDragIndicator;
+		};
+
 		return (
 			<Modal
 				isVisible={ isVisible }
@@ -536,7 +546,7 @@ class BottomSheet extends Component {
 						style={ styles.header }
 						onLayout={ this.onHeaderLayout }
 					>
-						{ ! ( Platform.OS === 'android' && isFullScreen ) && (
+						{ showDragIndicator() && (
 							<View style={ styles.dragIndicator } />
 						) }
 						{ ! hideHeader && getHeader() }

packages/components/src/search-control/index.native.js

@@ -8,6 +8,7 @@ import {
 	TouchableOpacity,
 	Platform,
 	useColorScheme,
+	Keyboard,
 } from 'react-native';
 
 /**
@@ -116,12 +117,18 @@ function SearchControl( {
 		setCurrentStyles( futureStyles );
 	}, [ isActive, isDark ] );
 
-	useEffect(
-		() => () => {
+	useEffect( () => {
+		const keyboardHideSubscription = Keyboard.addListener(
+			'keyboardDidHide',
+			() => {
+				onCancel();
+			}
+		);
+		return () => {
 			clearTimeout( onCancelTimer.current );
-		},
-		[]
-	);
+			keyboardHideSubscription.remove();
+		};
+	}, [] );
 
 	const {
 		'search-control__container': containerStyle,

packages/components/src/search-control/platform-style.android.scss

@@ -1,10 +1,7 @@
-.search-control__container {
-	height: 40px;
-}
-
 .search-control__container--active {
 	border-bottom-color: $light-gray-500;
 	border-bottom-width: 1px;
+	margin-bottom: 0;
 	margin-left: 0;
 	margin-right: 0;
 	border-radius: 0;

packages/components/src/search-control/platform-style.ios.scss

@@ -1,6 +1,3 @@
-.search-control__container {
-	height: 40px;
-}
 .search-control__container--active {
 	margin-right: 0;
 }

packages/components/src/search-control/style.native.scss

@@ -1,8 +1,6 @@
 .search-control__container {
-	height: 46px;
+	height: 48px;
 	margin: 0 16px $grid-unit-10;
-	flex-direction: row;
-	justify-content: space-between;
 }
 
 .search-control__inner-container {