diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
index ccbe387e4b8373..c435409f93e1a4 100644
--- a/packages/block-editor/src/components/inserter/menu.native.js
+++ b/packages/block-editor/src/components/inserter/menu.native.js
@@ -9,13 +9,12 @@ import { LayoutAnimation, TouchableHighlight } from 'react-native';
 import { useEffect, useState, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { BottomSheet, BottomSheetConsumer } from '@wordpress/components';
+import { BottomSheet, BottomSheetConsumer, SearchControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import InserterSearchResults from './search-results';
-import InserterSearchForm from './search-form';
 import { store as blockEditorStore } from '../../store';
 import InserterTabs from './tabs';
 import styles from './style.scss';
@@ -175,7 +174,7 @@ function InserterMenu( {
 			header={
 				<>
 					{ showSearchForm && (
-						<InserterSearchForm
+						<SearchControl
 							onChange={ onChangeSearch }
 							value={ filterValue }
 						/>
diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/block-editor/src/components/inserter/search-form.native.js
deleted file mode 100644
index f23d6b95b91001..00000000000000
--- a/packages/block-editor/src/components/inserter/search-form.native.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * External dependencies
- */
-import { TextInput, View, TouchableHighlight } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useState, useRef } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
-import {
-	Icon,
-	cancelCircleFilled,
-	arrowLeft,
-	search as searchIcon,
-} from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-function InserterSearchForm( { value, onChange } ) {
-	const [ isActive, setIsActive ] = useState( false );
-
-	const inputRef = useRef();
-
-	const searchFormStyle = usePreferredColorSchemeStyle(
-		styles.searchForm,
-		styles.searchFormDark
-	);
-
-	const searchFormInputStyle = usePreferredColorSchemeStyle(
-		styles.searchFormInput,
-		styles.searchFormInputDark
-	);
-
-	const placeholderStyle = usePreferredColorSchemeStyle(
-		styles.searchFormPlaceholder,
-		styles.searchFormPlaceholderDark
-	);
-
-	return (
-		<TouchableHighlight accessible={ false }>
-			<View style={ searchFormStyle }>
-				{ isActive ? (
-					<ToolbarButton
-						title={ __( 'Cancel search' ) }
-						icon={ arrowLeft }
-						onClick={ () => {
-							inputRef.current.blur();
-							onChange( '' );
-							setIsActive( false );
-						} }
-					/>
-				) : (
-					<ToolbarButton
-						title={ __( 'Search block' ) }
-						icon={ searchIcon }
-						onClick={ () => {
-							inputRef.current.focus();
-							setIsActive( true );
-						} }
-					/>
-				) }
-				<TextInput
-					ref={ inputRef }
-					style={ searchFormInputStyle }
-					placeholderTextColor={ placeholderStyle.color }
-					onChangeText={ onChange }
-					onFocus={ () => setIsActive( true ) }
-					value={ value }
-					placeholder={ __( 'Search blocks' ) }
-				/>
-
-				{ !! value && (
-					<ToolbarButton
-						title={ __( 'Clear search' ) }
-						icon={ <Icon icon={ cancelCircleFilled } /> }
-						onClick={ () => {
-							onChange( '' );
-						} }
-					/>
-				) }
-			</View>
-		</TouchableHighlight>
-	);
-}
-
-export default InserterSearchForm;
diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss
index a0f017931a62aa..1ed3d8ab6a3bc9 100644
--- a/packages/block-editor/src/components/inserter/style.native.scss
+++ b/packages/block-editor/src/components/inserter/style.native.scss
@@ -13,37 +13,6 @@
 	padding-top: 8;
 }
 
-.searchForm {
-	height: 46px;
-	border-radius: 8px;
-	color: $gray-dark;
-	margin: $grid-unit-30;
-	background-color: $gray-light;
-	flex-direction: row;
-	justify-content: space-between;
-}
-
-.searchFormDark {
-	background-color: rgba($white, 0.07);
-}
-
-.searchFormInput {
-	color: $gray-dark;
-	flex: 2;
-}
-
-.searchFormInputDark {
-	color: $white;
-}
-
-.searchFormPlaceholder {
-	color: $gray;
-}
-
-.searchFormPlaceholderDark {
-	color: rgba($white, 0.8);
-}
-
 .inserter-tabs__wrapper {
 	overflow: hidden;
 }
diff --git a/packages/components/src/search-control/style.native.scss b/packages/components/src/search-control/style.native.scss
new file mode 100644
index 00000000000000..8617ad232552f7
--- /dev/null
+++ b/packages/components/src/search-control/style.native.scss
@@ -0,0 +1,30 @@
+.searchForm {
+	height: 46px;
+	border-radius: 8px;
+	color: $gray-dark;
+	margin: $grid-unit-30;
+	background-color: $gray-light;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.searchFormDark {
+	background-color: rgba($white, 0.07);
+}
+
+.searchFormInput {
+	color: $gray-dark;
+	flex: 2;
+}
+
+.searchFormInputDark {
+	color: $white;
+}
+
+.searchFormPlaceholder {
+	color: $gray;
+}
+
+.searchFormPlaceholderDark {
+	color: rgba($white, 0.8);
+}