diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index b2c91bc8655db9..07b298c6baa53b 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/packages/block-editor/src/components/index.native.js
@@ -28,7 +28,6 @@ export {
 	MEDIA_TYPE_VIDEO,
 } from './media-upload';
 export { default as MediaUploadProgress } from './media-upload-progress';
-export { default as MediaEdit } from './media-edit';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
 export { default as BlockCaption } from './block-caption';
diff --git a/packages/block-editor/src/components/media-upload-progress/README.md b/packages/block-editor/src/components/media-upload-progress/README.md
index 89ef9243717774..9447ac4d065c68 100644
--- a/packages/block-editor/src/components/media-upload-progress/README.md
+++ b/packages/block-editor/src/components/media-upload-progress/README.md
@@ -13,17 +13,13 @@ import {
 	MediaUploadProgress,
 } from '@wordpress/block-editor';
 
-function MediaProgress( { height, width, url, id } ) {
+function MediaProgress( { url, id } ) {
 	return (
 		<MediaUploadProgress
-			height={ height }
-			width={ width }
-			coverUrl={ url }
 			mediaId={ id }
-			renderContent={ ( { isUploadFailed, finalWidth, finalHeight, retryMessage } ) => {
+			renderContent={ ( { isUploadFailed, retryMessage } ) => {
 				return (
 					<ImageBackground
-						style={ { width: finalWidth, height: finalHeight } }
 						resizeMethod="scale"
 						source={ { uri: url } }
 					>
@@ -50,14 +46,6 @@ A media ID that identifies the current upload.
 - Required: Yes
 - Platform: Mobile
 
-### coverUrl
-
-By passing an image url, it'll calculate the right size depending on the container of the component maintaining its aspect ratio, it'll pass these values through `renderContent`.
-
-- Type: `String`
-- Required: No
-- Platform: Mobile
-
 ### renderContent
 
 Content to be rendered along with the progress bar, usually the thumbnail of the media being uploaded.
@@ -68,31 +56,8 @@ Content to be rendered along with the progress bar, usually the thumbnail of the
 
 It passes an object containing the following properties:
 
-**With** `coverUrl` as a parameter:
-
-`{ isUploadInProgress, isUploadFailed, finalWidth, finalHeight, imageWidthWithinContainer, retryMessage }`
-
-**Without** `coverUrl` as a parameter:
-
 `{ isUploadInProgress, isUploadFailed, retryMessage }`
 
-
-### width
-
-Forces the final width to be returned in `finalWidth`
-
-- Type: `Number`
-- Required: No
-- Platform: Mobile
-
-### height
-
-Forces the final height to be returned in `finalHeight`
-
-- Type: `Number`
-- Required: No
-- Platform: Mobile
-
 ### onUpdateMediaProgress
 
 Callback called when the progress of the upload is updated.
diff --git a/packages/block-editor/src/components/media-upload-progress/image-size.native.js b/packages/block-editor/src/components/media-upload-progress/image-size.native.js
deleted file mode 100644
index 3e022777fce2cc..00000000000000
--- a/packages/block-editor/src/components/media-upload-progress/image-size.native.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * External dependencies
- */
-import { View, Image } from 'react-native';
-
-/**
- * Internal dependencies
- */
-
-function calculatePreferedImageSize( image, container ) {
-	const maxWidth = container.clientWidth;
-	const exceedMaxWidth = image.width > maxWidth;
-	const ratio = image.height / image.width;
-	const width = exceedMaxWidth ? maxWidth : image.width;
-	const height = exceedMaxWidth ? maxWidth * ratio : image.height;
-	return { width, height };
-}
-
-class ImageSize extends Component {
-	constructor() {
-		super( ...arguments );
-		this.state = {
-			width: undefined,
-			height: undefined,
-		};
-		this.onLayout = this.onLayout.bind( this );
-	}
-
-	componentDidUpdate( prevProps ) {
-		if ( this.props.src !== prevProps.src ) {
-			this.image = {};
-
-			this.setState( {
-				width: undefined,
-				height: undefined,
-			} );
-			this.fetchImageSize();
-		}
-
-		if ( this.props.dirtynessTrigger !== prevProps.dirtynessTrigger ) {
-			this.calculateSize();
-		}
-	}
-
-	componentDidMount() {
-		this.fetchImageSize();
-	}
-
-	fetchImageSize() {
-		Image.getSize( this.props.src, ( width, height ) => {
-			this.image = { width, height };
-			this.calculateSize();
-		} );
-	}
-
-	calculateSize() {
-		if ( this.image === undefined || this.container === undefined ) {
-			return;
-		}
-		const { width, height } = calculatePreferedImageSize(
-			this.image,
-			this.container
-		);
-		this.setState( { width, height } );
-	}
-
-	onLayout( event ) {
-		const { width, height } = event.nativeEvent.layout;
-		this.container = {
-			clientWidth: width,
-			clientHeight: height,
-		};
-		this.calculateSize();
-	}
-
-	render() {
-		const sizes = {
-			imageWidth: this.image && this.image.width,
-			imageHeight: this.image && this.image.height,
-			containerWidth: this.container && this.container.width,
-			containerHeight: this.container && this.container.height,
-			imageWidthWithinContainer: this.state.width,
-			imageHeightWithinContainer: this.state.height,
-		};
-		return (
-			<View onLayout={ this.onLayout }>
-				{ this.props.children( sizes ) }
-			</View>
-		);
-	}
-}
-
-export default ImageSize;
diff --git a/packages/block-editor/src/components/media-upload-progress/index.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js
index 7f2f7d380ad32d..adf99249384103 100644
--- a/packages/block-editor/src/components/media-upload-progress/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/index.native.js
@@ -14,7 +14,6 @@ import { subscribeMediaUpload } from '@wordpress/react-native-bridge';
 /**
  * Internal dependencies
  */
-import ImageSize from './image-size';
 import styles from './styles.scss';
 
 export const MEDIA_UPLOAD_STATE_UPLOADING = 1;
@@ -117,12 +116,7 @@ export class MediaUploadProgress extends React.Component {
 	}
 
 	render() {
-		const {
-			coverUrl,
-			width,
-			height,
-			renderContent = () => {},
-		} = this.props;
+		const { renderContent = () => null } = this.props;
 		const { isUploadInProgress, isUploadFailed } = this.state;
 		const showSpinner = this.state.isUploadInProgress;
 		const progress = this.state.progress * 100;
@@ -138,46 +132,11 @@ export class MediaUploadProgress extends React.Component {
 						<Spinner progress={ progress } />
 					</View>
 				) }
-				{ coverUrl && (
-					<ImageSize src={ coverUrl }>
-						{ ( sizes ) => {
-							const {
-								imageWidthWithinContainer,
-								imageHeightWithinContainer,
-							} = sizes;
-
-							let finalHeight = imageHeightWithinContainer;
-							if (
-								height > 0 &&
-								height < imageHeightWithinContainer
-							) {
-								finalHeight = height;
-							}
-
-							let finalWidth = imageWidthWithinContainer;
-							if (
-								width > 0 &&
-								width < imageWidthWithinContainer
-							) {
-								finalWidth = width;
-							}
-							return renderContent( {
-								isUploadInProgress,
-								isUploadFailed,
-								finalWidth,
-								finalHeight,
-								imageWidthWithinContainer,
-								retryMessage,
-							} );
-						} }
-					</ImageSize>
-				) }
-				{ ! coverUrl &&
-					renderContent( {
-						isUploadInProgress,
-						isUploadFailed,
-						retryMessage,
-					} ) }
+				{ renderContent( {
+					isUploadInProgress,
+					isUploadFailed,
+					retryMessage,
+				} ) }
 			</View>
 		);
 	}
diff --git a/packages/block-editor/src/components/media-upload-progress/test/index.native.js b/packages/block-editor/src/components/media-upload-progress/test/index.native.js
index 030fba6b37a20f..a9c9adc6eaf54c 100644
--- a/packages/block-editor/src/components/media-upload-progress/test/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/test/index.native.js
@@ -26,9 +26,15 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 	const subscribeMediaUpload = ( callback ) => {
 		this.uploadCallBack = callback;
 	};
+	const mediaSources = {
+		deviceCamera: 'DEVICE_CAMERA',
+		deviceLibrary: 'DEVICE_MEDIA_LIBRARY',
+		siteMediaLibrary: 'SITE_MEDIA_LIBRARY',
+	};
 	return {
 		subscribeMediaUpload,
 		sendMediaUpload: callUploadCallback,
+		mediaSources,
 	};
 } );
 
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index e0ecc3ed7cb073..91314ea668db3d 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -2,13 +2,9 @@
  * External dependencies
  */
 import React from 'react';
-import {
-	View,
-	ImageBackground,
-	Text,
-	TouchableWithoutFeedback,
-	Dimensions,
-} from 'react-native';
+import { View, TouchableWithoutFeedback } from 'react-native';
+import { isEmpty, get, find, map } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -19,11 +15,6 @@ import {
 	requestImageUploadCancelDialog,
 	requestImageFullscreenPreview,
 } from '@wordpress/react-native-bridge';
-import { isEmpty, get, find, map } from 'lodash';
-
-/**
- * WordPress dependencies
- */
 import {
 	CycleSelectControl,
 	Icon,
@@ -32,6 +23,7 @@ import {
 	ToggleControl,
 	ToolbarButton,
 	ToolbarGroup,
+	Image,
 } from '@wordpress/components';
 import {
 	BlockCaption,
@@ -42,7 +34,6 @@ import {
 	BlockControls,
 	InspectorControls,
 	BlockAlignmentToolbar,
-	MediaEdit,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { getProtocol } from '@wordpress/url';
@@ -52,7 +43,7 @@ import { withSelect } from '@wordpress/data';
 import {
 	external,
 	link,
-	image as icon,
+	image as placeholderIcon,
 	textColor,
 	replace,
 } from '@wordpress/icons';
@@ -61,21 +52,10 @@ import {
  * Internal dependencies
  */
 import styles from './styles.scss';
-import SvgIconRetry from './icon-retry';
-import SvgIconCustomize from './icon-customize';
 import { getUpdatedLinkTargetSettings } from './utils';
 
 import { LINK_DESTINATION_CUSTOM, DEFAULT_SIZE_SLUG } from './constants';
 
-const ICON_TYPE = {
-	PLACEHOLDER: 'placeholder',
-	RETRY: 'retry',
-	UPLOAD: 'upload',
-};
-
-// Default Image ratio 4:3
-const IMAGE_ASPECT_RATIO = 4 / 3;
-
 const getUrlForSlug = ( image, { sizeSlug } ) => {
 	return get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] );
 };
@@ -107,6 +87,9 @@ export class ImageEdit extends React.Component {
 		this.onImagePressed = this.onImagePressed.bind( this );
 		this.onFocusCaption = this.onFocusCaption.bind( this );
 		this.updateAlignment = this.updateAlignment.bind( this );
+		this.accessibilityLabelCreator = this.accessibilityLabelCreator.bind(
+			this
+		);
 	}
 
 	componentDidMount() {
@@ -173,6 +156,17 @@ export class ImageEdit extends React.Component {
 		};
 	}
 
+	accessibilityLabelCreator( caption ) {
+		return isEmpty( caption )
+			? /* translators: accessibility text. Empty image caption. */
+			  'Image caption. Empty'
+			: sprintf(
+					/* translators: accessibility text. %s: image caption. */
+					__( 'Image caption. %s' ),
+					caption
+			  );
+	}
+
 	onImagePressed() {
 		const { attributes, image } = this.props;
 
@@ -313,33 +307,24 @@ export class ImageEdit extends React.Component {
 		}
 	}
 
-	getIcon( iconType ) {
-		let iconStyle;
-		switch ( iconType ) {
-			case ICON_TYPE.RETRY:
-				return <Icon icon={ SvgIconRetry } { ...styles.iconRetry } />;
-			case ICON_TYPE.PLACEHOLDER:
-				iconStyle = this.props.getStylesFromColorScheme(
+	getPlaceholderIcon() {
+		return (
+			<Icon
+				icon={ placeholderIcon }
+				{ ...this.props.getStylesFromColorScheme(
 					styles.iconPlaceholder,
 					styles.iconPlaceholderDark
-				);
-				break;
-			case ICON_TYPE.UPLOAD:
-				iconStyle = this.props.getStylesFromColorScheme(
-					styles.iconUpload,
-					styles.iconUploadDark
-				);
-				break;
-		}
-		return <Icon icon={ icon } { ...iconStyle } />;
+				) }
+			/>
+		);
 	}
 
 	render() {
+		const { isCaptionSelected } = this.state;
 		const { attributes, isSelected, image, imageSizes } = this.props;
 		const {
 			align,
 			url,
-			height,
 			width,
 			alt,
 			href,
@@ -416,11 +401,11 @@ export class ImageEdit extends React.Component {
 
 		if ( ! url ) {
 			return (
-				<View style={ { flex: 1 } }>
+				<View style={ styles.content }>
 					<MediaPlaceholder
 						allowedTypes={ [ MEDIA_TYPE_IMAGE ] }
 						onSelect={ this.onSelectMediaUploadOption }
-						icon={ this.getIcon( ICON_TYPE.PLACEHOLDER ) }
+						icon={ this.getPlaceholderIcon() }
 						onFocus={ this.props.onFocus }
 					/>
 				</View>
@@ -435,197 +420,71 @@ export class ImageEdit extends React.Component {
 			wide: 'center',
 		};
 
-		const imageContainerHeight =
-			Dimensions.get( 'window' ).width / IMAGE_ASPECT_RATIO;
-
-		const editImageComponent = ( { open, mediaOptions } ) => (
-			<TouchableWithoutFeedback onPress={ open }>
-				<View style={ styles.editContainer }>
-					<View style={ styles.edit }>
-						{ mediaOptions() }
-						<Icon
-							size={ 16 }
-							icon={ SvgIconCustomize }
-							{ ...styles.iconCustomise }
+		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
+			<>
+				<TouchableWithoutFeedback
+					accessible={ ! isSelected }
+					onPress={ this.onImagePressed }
+					onLongPress={ openMediaOptions }
+					disabled={ ! isSelected }
+				>
+					<View style={ styles.content }>
+						{ getInspectorControls() }
+						{ getMediaOptions() }
+						{ ! this.state.isCaptionSelected &&
+							getToolbarEditButton( openMediaOptions ) }
+						<MediaUploadProgress
+							coverUrl={ url }
+							mediaId={ id }
+							onUpdateMediaProgress={ this.updateMediaProgress }
+							onFinishMediaUploadWithSuccess={
+								this.finishMediaUploadWithSuccess
+							}
+							onFinishMediaUploadWithFailure={
+								this.finishMediaUploadWithFailure
+							}
+							onMediaUploadStateReset={
+								this.mediaUploadStateReset
+							}
+							renderContent={ ( {
+								isUploadInProgress,
+								isUploadFailed,
+								retryMessage,
+							} ) => {
+								return (
+									<Image
+										align={ align && alignToFlex[ align ] }
+										alt={ alt }
+										isSelected={
+											isSelected && ! isCaptionSelected
+										}
+										isUploadFailed={ isUploadFailed }
+										isUploadInProgress={
+											isUploadInProgress
+										}
+										onSelectMediaUploadOption={
+											this.onSelectMediaUploadOption
+										}
+										openMediaOptions={ openMediaOptions }
+										retryMessage={ retryMessage }
+										url={ url }
+										width={ width }
+									/>
+								);
+							} }
 						/>
 					</View>
-				</View>
-			</TouchableWithoutFeedback>
-		);
-
-		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
-			<TouchableWithoutFeedback
-				accessible={ ! isSelected }
-				onPress={ this.onImagePressed }
-				onLongPress={ openMediaOptions }
-				disabled={ ! isSelected }
-			>
-				<View style={ { flex: 1 } }>
-					{ getInspectorControls() }
-					{ getMediaOptions() }
-					{ ! this.state.isCaptionSelected &&
-						getToolbarEditButton( openMediaOptions ) }
-					<MediaUploadProgress
-						height={ height }
-						width={ width }
-						coverUrl={ url }
-						mediaId={ id }
-						onUpdateMediaProgress={ this.updateMediaProgress }
-						onFinishMediaUploadWithSuccess={
-							this.finishMediaUploadWithSuccess
-						}
-						onFinishMediaUploadWithFailure={
-							this.finishMediaUploadWithFailure
-						}
-						onMediaUploadStateReset={ this.mediaUploadStateReset }
-						renderContent={ ( {
-							isUploadInProgress,
-							isUploadFailed,
-							finalWidth,
-							finalHeight,
-							imageWidthWithinContainer,
-							retryMessage,
-						} ) => {
-							const opacity = isUploadInProgress ? 0.3 : 1;
-							const imageBorderOnSelectedStyle =
-								isSelected &&
-								! (
-									isUploadInProgress ||
-									isUploadFailed ||
-									this.state.isCaptionSelected
-								)
-									? styles.imageBorder
-									: '';
-
-							const iconRetryContainer = (
-								<View style={ styles.modalIcon }>
-									{ this.getIcon( ICON_TYPE.RETRY ) }
-								</View>
-							);
-
-							return (
-								<View
-									style={ {
-										flex: 1,
-										// only set alignSelf if an image exists because alignSelf causes the placeholder
-										// to disappear when an aligned image can't be downloaded
-										// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592
-										alignSelf:
-											imageWidthWithinContainer &&
-											alignToFlex[ align ],
-									} }
-								>
-									{ ! imageWidthWithinContainer && (
-										<View
-											style={ [
-												this.props.getStylesFromColorScheme(
-													styles.imageContainerUpload,
-													styles.imageContainerUploadDark
-												),
-												{
-													height: imageContainerHeight,
-												},
-											] }
-										>
-											<View
-												style={
-													styles.imageUploadingIconContainer
-												}
-											>
-												{ this.getIcon(
-													ICON_TYPE.UPLOAD
-												) }
-											</View>
-										</View>
-									) }
-									<ImageBackground
-										accessible={ true }
-										disabled={ ! isSelected }
-										accessibilityLabel={ alt }
-										accessibilityHint={ __(
-											'Double tap and hold to edit'
-										) }
-										accessibilityRole={ 'imagebutton' }
-										style={ [
-											imageBorderOnSelectedStyle,
-											{
-												width: finalWidth,
-												height: finalHeight,
-												opacity,
-											},
-										] }
-										resizeMethod="scale"
-										source={ { uri: url } }
-										key={ url }
-									>
-										{ isUploadFailed && (
-											<View
-												style={ [
-													styles.imageContainer,
-													{
-														flex: 1,
-														backgroundColor:
-															'rgba(0, 0, 0, 0.5)',
-													},
-												] }
-											>
-												{ iconRetryContainer }
-												<Text
-													style={
-														styles.uploadFailedText
-													}
-												>
-													{ retryMessage }
-												</Text>
-											</View>
-										) }
-										{ isSelected &&
-											! isUploadInProgress &&
-											! isUploadFailed &&
-											finalWidth &&
-											finalHeight && (
-												<MediaEdit
-													allowedTypes={ [
-														MEDIA_TYPE_IMAGE,
-													] }
-													onSelect={
-														this
-															.onSelectMediaUploadOption
-													}
-													source={ { uri: url } }
-													openReplaceMediaOptions={
-														openMediaOptions
-													}
-													render={
-														editImageComponent
-													}
-												/>
-											) }
-									</ImageBackground>
-								</View>
-							);
-						} }
-					/>
-					<BlockCaption
-						clientId={ this.props.clientId }
-						isSelected={ this.state.isCaptionSelected }
-						accessible={ true }
-						accessibilityLabelCreator={ ( caption ) =>
-							isEmpty( caption )
-								? /* translators: accessibility text. Empty image caption. */
-								  'Image caption. Empty'
-								: sprintf(
-										/* translators: accessibility text. %s: image caption. */
-										__( 'Image caption. %s' ),
-										caption
-								  )
-						}
-						onFocus={ this.onFocusCaption }
-						onBlur={ this.props.onBlur } // always assign onBlur as props
-						insertBlocksAfter={ this.props.insertBlocksAfter }
-					/>
-				</View>
-			</TouchableWithoutFeedback>
+				</TouchableWithoutFeedback>
+				<BlockCaption
+					clientId={ this.props.clientId }
+					isSelected={ this.state.isCaptionSelected }
+					accessible
+					accessibilityLabelCreator={ this.accessibilityLabelCreator }
+					onFocus={ this.onFocusCaption }
+					onBlur={ this.props.onBlur } // always assign onBlur as props
+					insertBlocksAfter={ this.props.insertBlocksAfter }
+				/>
+			</>
 		);
 
 		return (
diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss
index d4c512ea423cdd..3dc1e439710914 100644
--- a/packages/block-library/src/image/styles.native.scss
+++ b/packages/block-library/src/image/styles.native.scss
@@ -1,49 +1,15 @@
 // @format
 
-.imageContainer {
-	justify-content: center;
-	align-items: center;
-	background-color: $gray-lighten-30;
-}
-
-.imageBorder {
-	border-color: $blue-medium;
-	border-width: 2px;
-	border-style: solid;
-}
-
-.uploadFailedText {
-	color: #fff;
-	font-size: 14;
-	margin-top: 5;
-}
-
-.uploadFailedContainer {
-	position: absolute;
-	flex-direction: column;
-	align-items: center;
-}
-
-.modalIcon {
-	width: 80px;
-	height: 80px;
-	justify-content: center;
-	align-items: center;
+.content {
+	flex: 1;
 }
 
-.imageUploadingIconContainer {
-	width: 40px;
-	height: 40px;
+.contentCentered {
+	flex: 1;
 	justify-content: center;
 	align-items: center;
 }
 
-.iconRetry {
-	fill: #fff;
-	width: 100%;
-	height: 100%;
-}
-
 .iconPlaceholder {
 	fill: $gray-dark;
 	width: 100%;
@@ -53,58 +19,3 @@
 .iconPlaceholderDark {
 	fill: $white;
 }
-
-.iconUpload {
-	fill: $gray-lighten-20;
-	width: 100%;
-	height: 100%;
-}
-
-.iconUploadDark {
-	fill: $gray-70;
-}
-
-.imageContainerUpload {
-	justify-content: center;
-	align-items: center;
-	background-color: $gray-light;
-}
-
-.imageContainerUploadDark {
-	background-color: $gray-90;
-}
-
-.content {
-	flex: 1;
-}
-
-.contentCentered {
-	flex: 1;
-	justify-content: center;
-	align-items: center;
-}
-
-.editContainer {
-	width: 44px;
-	height: 44px;
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-
-.edit {
-	width: 30px;
-	height: 30px;
-	background-color: $gray-dark;
-	border-radius: 22px;
-	position: absolute;
-	top: 5px;
-	right: 5px;
-}
-
-.iconCustomise {
-	fill: #fff;
-	position: absolute;
-	top: 7px;
-	left: 7px;
-}
diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js
index a8ef35c775ba1a..3eaab4e09988fb 100644
--- a/packages/block-library/src/media-text/edit.native.js
+++ b/packages/block-library/src/media-text/edit.native.js
@@ -12,13 +12,21 @@ import {
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
 	InnerBlocks,
+	InspectorControls,
 	withColors,
+	MEDIA_TYPE_IMAGE,
+	MEDIA_TYPE_VIDEO,
 } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
-import { ToolbarGroup } from '@wordpress/components';
+import {
+	Button,
+	ToolbarGroup,
+	PanelBody,
+	ToggleControl,
+} from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { pullLeft, pullRight } from '@wordpress/icons';
+import { pullLeft, pullRight, replace } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -47,10 +55,24 @@ class MediaTextEdit extends Component {
 		this.onWidthChange = this.onWidthChange.bind( this );
 		this.commitWidthChange = this.commitWidthChange.bind( this );
 		this.onLayoutChange = this.onLayoutChange.bind( this );
+		this.onMediaSelected = this.onMediaSelected.bind( this );
+		this.onReplaceMedia = this.onReplaceMedia.bind( this );
+		this.onSetOpenPickerRef = this.onSetOpenPickerRef.bind( this );
+		this.onSetImageFill = this.onSetImageFill.bind( this );
 
 		this.state = {
 			mediaWidth: null,
 			containerWidth: 0,
+			isMediaSelected: false,
+		};
+	}
+
+	static getDerivedStateFromProps( props, state ) {
+		return {
+			isMediaSelected:
+				state.isMediaSelected &&
+				props.isSelected &&
+				! props.isAncestorSelected,
 		};
 	}
 
@@ -134,7 +156,47 @@ class MediaTextEdit extends Component {
 		} );
 	}
 
-	renderMediaArea() {
+	onMediaSelected() {
+		this.setState( { isMediaSelected: true } );
+	}
+
+	onReplaceMedia() {
+		if ( this.openPickerRef ) {
+			this.openPickerRef();
+		}
+	}
+
+	onSetOpenPickerRef( openPicker ) {
+		this.openPickerRef = openPicker;
+	}
+
+	onSetImageFill() {
+		const { attributes, setAttributes } = this.props;
+		const { imageFill } = attributes;
+
+		setAttributes( {
+			imageFill: ! imageFill,
+		} );
+	}
+
+	getControls() {
+		const { attributes } = this.props;
+		const { imageFill } = attributes;
+
+		return (
+			<InspectorControls>
+				<PanelBody title={ __( 'Media & Text settings' ) }>
+					<ToggleControl
+						label={ __( 'Crop image to fill entire column' ) }
+						checked={ imageFill }
+						onChange={ this.onSetImageFill }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		);
+	}
+	renderMediaArea( shouldStack ) {
+		const { isMediaSelected, containerWidth } = this.state;
 		const { attributes, isSelected } = this.props;
 		const {
 			mediaAlt,
@@ -145,25 +207,40 @@ class MediaTextEdit extends Component {
 			mediaWidth,
 			imageFill,
 			focalPoint,
+			verticalAlignment,
 		} = attributes;
+		const mediaAreaWidth =
+			mediaWidth && ! shouldStack
+				? ( containerWidth * mediaWidth ) / 100 -
+				  styles.mediaAreaPadding.width
+				: containerWidth;
+		const aligmentStyles =
+			styles[
+				`is-vertically-aligned-${ verticalAlignment || 'center' }`
+			];
 
 		return (
 			<MediaContainer
-				onSelectMedia={ this.onSelectMedia }
-				onMediaUpdate={ this.onMediaUpdate }
-				onWidthChange={ this.onWidthChange }
 				commitWidthChange={ this.commitWidthChange }
+				isMediaSelected={ isMediaSelected }
 				onFocus={ this.props.onFocus }
+				onMediaSelected={ this.onMediaSelected }
+				onMediaUpdate={ this.onMediaUpdate }
+				onSelectMedia={ this.onSelectMedia }
+				onSetOpenPickerRef={ this.onSetOpenPickerRef }
+				onWidthChange={ this.onWidthChange }
+				mediaWidth={ mediaAreaWidth }
 				{ ...{
 					mediaAlt,
 					mediaId,
 					mediaType,
 					mediaUrl,
 					mediaPosition,
-					mediaWidth,
 					imageFill,
 					focalPoint,
 					isSelected,
+					aligmentStyles,
+					shouldStack,
 				} }
 			/>
 		);
@@ -180,11 +257,13 @@ class MediaTextEdit extends Component {
 		} = this.props;
 		const {
 			isStackedOnMobile,
+			imageFill,
 			mediaPosition,
 			mediaWidth,
+			mediaType,
 			verticalAlignment,
 		} = attributes;
-		const { containerWidth } = this.state;
+		const { containerWidth, isMediaSelected } = this.state;
 
 		const isMobile = containerWidth < BREAKPOINTS.mobile;
 		const shouldStack = isStackedOnMobile && isMobile;
@@ -216,20 +295,26 @@ class MediaTextEdit extends Component {
 			...( isSelected && styles[ 'is-selected' ] ),
 			backgroundColor:
 				wrapperProps?.style?.backgroundColor || backgroundColor.color,
+			paddingBottom: 0,
 		};
 
 		const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth;
 		const innerBlockWidthString = `${ innerBlockWidth }%`;
 
-		const mediaContainerStyle = shouldStack
-			? {
-					...( mediaPosition === 'left' && styles.mediaStackLeft ),
-					...( mediaPosition === 'right' && styles.mediaStackRight ),
-			  }
-			: {
-					...( mediaPosition === 'left' && styles.mediaLeft ),
-					...( mediaPosition === 'right' && styles.mediaRight ),
-			  };
+		const mediaContainerStyle = [
+			{ flex: 1 },
+			shouldStack
+				? {
+						...( mediaPosition === 'left' &&
+							styles.mediaStackLeft ),
+						...( mediaPosition === 'right' &&
+							styles.mediaStackRight ),
+				  }
+				: {
+						...( mediaPosition === 'left' && styles.mediaLeft ),
+						...( mediaPosition === 'right' && styles.mediaRight ),
+				  },
+		];
 
 		const toolbarControls = [
 			{
@@ -252,21 +337,41 @@ class MediaTextEdit extends Component {
 
 		return (
 			<>
+				{ mediaType === MEDIA_TYPE_IMAGE && this.getControls() }
 				<BlockControls>
-					<ToolbarGroup controls={ toolbarControls } />
-					<BlockVerticalAlignmentToolbar
-						onChange={ onVerticalAlignmentChange }
-						value={ verticalAlignment }
-					/>
+					{ ( isMediaSelected || mediaType === MEDIA_TYPE_VIDEO ) && (
+						<ToolbarGroup>
+							<Button
+								label={ __( 'Edit media' ) }
+								icon={ replace }
+								onClick={ this.onReplaceMedia }
+							/>
+						</ToolbarGroup>
+					) }
+					{ ( ! isMediaSelected ||
+						mediaType === MEDIA_TYPE_VIDEO ) && (
+						<>
+							<ToolbarGroup controls={ toolbarControls } />
+							<BlockVerticalAlignmentToolbar
+								onChange={ onVerticalAlignmentChange }
+								value={ verticalAlignment }
+							/>
+						</>
+					) }
 				</BlockControls>
 				<View
 					style={ containerStyles }
 					onLayout={ this.onLayoutChange }
 				>
 					<View
-						style={ { width: widthString, ...mediaContainerStyle } }
+						style={ [
+							( shouldStack || ! imageFill ) && {
+								width: widthString,
+							},
+							mediaContainerStyle,
+						] }
 					>
-						{ this.renderMediaArea() }
+						{ this.renderMediaArea( shouldStack ) }
 					</View>
 					<View
 						style={ {
diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js
index 52d8e72f82a899..76c187b8d847ba 100644
--- a/packages/block-library/src/media-text/media-container.native.js
+++ b/packages/block-library/src/media-text/media-container.native.js
@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	View,
-	ImageBackground,
-	Text,
-	TouchableWithoutFeedback,
-} from 'react-native';
+import { View, Text, TouchableWithoutFeedback } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -15,10 +10,10 @@ import {
 	mediaUploadSync,
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
+	requestImageFullscreenPreview,
 } from '@wordpress/react-native-bridge';
-import { Icon, Button, ToolbarGroup, withNotices } from '@wordpress/components';
+import { Icon, Image, withNotices } from '@wordpress/components';
 import {
-	BlockControls,
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
 	MediaPlaceholder,
@@ -31,7 +26,6 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { isURL, getProtocol } from '@wordpress/url';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { replace } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -45,6 +39,13 @@ import SvgIconRetry from './icon-retry';
  */
 const ALLOWED_MEDIA_TYPES = [ MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ];
 
+const ICON_TYPE = {
+	PLACEHOLDER: 'placeholder',
+	RETRY: 'retry',
+};
+
+const DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };
+
 export { imageFillStyles } from './media-container.js';
 
 class MediaContainer extends Component {
@@ -97,48 +98,50 @@ class MediaContainer extends Component {
 	}
 
 	onMediaPressed() {
-		const { mediaId, mediaUrl } = this.props;
-
-		if ( this.state.isUploadInProgress ) {
+		const { isUploadInProgress } = this.state;
+		const {
+			mediaId,
+			mediaUrl,
+			mediaType,
+			isMediaSelected,
+			onMediaSelected,
+		} = this.props;
+
+		if ( isUploadInProgress ) {
 			requestImageUploadCancelDialog( mediaId );
 		} else if ( mediaId && getProtocol( mediaUrl ) === 'file:' ) {
 			requestImageFailedRetryDialog( mediaId );
+		} else if ( mediaType === MEDIA_TYPE_IMAGE && isMediaSelected ) {
+			requestImageFullscreenPreview( mediaUrl );
+		} else if ( mediaType === MEDIA_TYPE_IMAGE ) {
+			onMediaSelected();
 		}
 	}
 
-	getIcon( isRetryIcon, isVideo ) {
-		if ( isRetryIcon ) {
-			return (
-				<Icon
-					icon={ SvgIconRetry }
-					{ ...( styles.iconRetry,
-					isVideo ? styles.iconRetryVideo : {} ) }
-				/>
-			);
+	getIcon( iconType ) {
+		const { mediaType, getStylesFromColorScheme } = this.props;
+		let iconStyle;
+		switch ( iconType ) {
+			case ICON_TYPE.RETRY:
+				iconStyle =
+					mediaType === MEDIA_TYPE_IMAGE
+						? styles.iconRetry
+						: getStylesFromColorScheme(
+								styles.iconRetryVideo,
+								styles.iconRetryVideoDark
+						  );
+
+				return <Icon icon={ SvgIconRetry } { ...iconStyle } />;
+			case ICON_TYPE.PLACEHOLDER:
+				iconStyle = getStylesFromColorScheme(
+					styles.iconPlaceholder,
+					styles.iconPlaceholderDark
+				);
+				break;
 		}
-
-		const iconStyle = this.props.getStylesFromColorScheme(
-			styles.icon,
-			styles.iconDark
-		);
 		return <Icon icon={ icon } { ...iconStyle } />;
 	}
 
-	renderToolbarEditButton( open ) {
-		return (
-			<BlockControls>
-				<ToolbarGroup>
-					<Button
-						className="components-toolbar__control"
-						label={ __( 'Edit media' ) }
-						icon={ replace }
-						onClick={ open }
-					/>
-				</ToolbarGroup>
-			</BlockControls>
-		);
-	}
-
 	updateMediaProgress() {
 		if ( ! this.state.isUploadInProgress ) {
 			this.setState( { isUploadInProgress: true } );
@@ -168,116 +171,137 @@ class MediaContainer extends Component {
 
 	renderImage( params, openMediaOptions ) {
 		const { isUploadInProgress } = this.state;
-		const { mediaAlt, mediaUrl, isSelected } = this.props;
 		const {
-			finalWidth,
-			finalHeight,
-			imageWidthWithinContainer,
-			isUploadFailed,
-			retryMessage,
-		} = params;
-		const opacity = isUploadInProgress ? 0.3 : 1;
-
-		const contentStyle = ! imageWidthWithinContainer
-			? styles.content
-			: styles.contentCentered;
+			aligmentStyles,
+			focalPoint,
+			imageFill,
+			isMediaSelected,
+			isSelected,
+			mediaAlt,
+			mediaUrl,
+			mediaWidth,
+			shouldStack,
+		} = this.props;
+		const { isUploadFailed, retryMessage } = params;
+		const focalPointValues = ! focalPoint
+			? DEFAULT_FOCAL_POINT
+			: focalPoint;
 
 		return (
-			<TouchableWithoutFeedback
-				accessible={ ! isSelected }
-				onPress={ this.onMediaPressed }
-				onLongPress={ openMediaOptions }
-				disabled={ ! isSelected }
+			<View
+				style={ [
+					imageFill && styles.imageWithFocalPoint,
+					imageFill &&
+						shouldStack && {
+							height: styles.imageFill.height,
+						},
+				] }
 			>
-				<View style={ contentStyle }>
-					{ ! imageWidthWithinContainer && (
-						<View style={ styles.imageContainer }>
-							{ this.getIcon( false ) }
-						</View>
-					) }
-					<ImageBackground
-						accessible={ true }
-						accessibilityLabel={ mediaAlt }
-						accessibilityHint={ __(
-							'Double tap and hold to edit'
-						) }
-						accessibilityRole={ 'imagebutton' }
-						style={ {
-							width: finalWidth,
-							height: finalHeight,
-							opacity,
-						} }
-						resizeMethod="scale"
-						source={ { uri: mediaUrl } }
-						key={ mediaUrl }
+				<TouchableWithoutFeedback
+					accessible={ ! isSelected }
+					onPress={ this.onMediaPressed }
+					onLongPress={ openMediaOptions }
+					disabled={ ! isSelected }
+				>
+					<View
+						style={ [
+							imageFill && styles.imageCropped,
+							styles.mediaImageContainer,
+							! isUploadInProgress && aligmentStyles,
+						] }
 					>
-						{ isUploadFailed && (
-							<View
-								style={ [
-									styles.imageContainer,
-									styles.uploadFailed,
-								] }
-							>
-								<View style={ styles.modalIcon }>
-									{ this.getIcon( isUploadFailed ) }
-								</View>
-								<Text style={ styles.uploadFailedText }>
-									{ retryMessage }
-								</Text>
-							</View>
-						) }
-					</ImageBackground>
-				</View>
-			</TouchableWithoutFeedback>
+						<Image
+							align="center"
+							alt={ mediaAlt }
+							focalPoint={ imageFill && focalPointValues }
+							isSelected={ isMediaSelected && isMediaSelected }
+							isUploadFailed={ isUploadFailed }
+							isUploadInProgress={ isUploadInProgress }
+							onSelectMediaUploadOption={
+								this.onSelectMediaUploadOption
+							}
+							openMediaOptions={ openMediaOptions }
+							retryMessage={ retryMessage }
+							url={ mediaUrl }
+							width={ ! isUploadInProgress && mediaWidth }
+						/>
+					</View>
+				</TouchableWithoutFeedback>
+			</View>
 		);
 	}
 
 	renderVideo( params, openMediaOptions ) {
-		const { mediaUrl, isSelected } = this.props;
+		const {
+			aligmentStyles,
+			mediaUrl,
+			isSelected,
+			getStylesFromColorScheme,
+		} = this.props;
 		const { isUploadInProgress } = this.state;
 		const { isUploadFailed, retryMessage } = params;
 		const showVideo =
 			isURL( mediaUrl ) && ! isUploadInProgress && ! isUploadFailed;
 
+		const videoPlaceholderStyles = getStylesFromColorScheme(
+			styles.videoPlaceholder,
+			styles.videoPlaceholderDark
+		);
+		const retryVideoTextStyles = [
+			styles.uploadFailedText,
+			getStylesFromColorScheme(
+				styles.uploadFailedTextVideo,
+				styles.uploadFailedTextVideoDark
+			),
+		];
+
 		return (
-			<TouchableWithoutFeedback
-				accessible={ ! isSelected }
-				onPress={ this.onMediaPressed }
-				onLongPress={ openMediaOptions }
-				disabled={ ! isSelected }
-			>
-				<View aspectRatio={ VIDEO_ASPECT_RATIO }>
-					{ showVideo && (
-						<View style={ styles.videoContainer }>
-							<VideoPlayer
-								isSelected={ isSelected }
-								style={ styles.video }
-								source={ { uri: mediaUrl } }
-								paused={ true }
-							/>
-						</View>
-					) }
-					{ ! showVideo && (
-						<View style={ styles.videoPlaceholder }>
-							<View style={ styles.modalIcon }>
-								{ isUploadFailed
-									? this.getIcon( isUploadFailed )
-									: this.getIcon( false ) }
-							</View>
-							{ isUploadFailed && (
-								<Text
-									style={ [
-										styles.uploadFailedText,
-										styles.uploadFailedTextVideo,
-									] }
-								>
-									{ retryMessage }
-								</Text>
+			<View style={ styles.mediaVideo }>
+				<TouchableWithoutFeedback
+					accessible={ ! isSelected }
+					onPress={ this.onMediaPressed }
+					onLongPress={ openMediaOptions }
+					disabled={ ! isSelected }
+				>
+					<View style={ [ styles.videoContainer, aligmentStyles ] }>
+						<View
+							style={ [
+								styles.videoContent,
+								{
+									aspectRatio: VIDEO_ASPECT_RATIO,
+								},
+							] }
+						>
+							{ showVideo && (
+								<View style={ styles.videoPlayer }>
+									<VideoPlayer
+										isSelected={ isSelected }
+										style={ styles.video }
+										source={ { uri: mediaUrl } }
+										paused={ true }
+									/>
+								</View>
+							) }
+							{ ! showVideo && (
+								<View style={ videoPlaceholderStyles }>
+									<View style={ styles.modalIcon }>
+										{ isUploadFailed
+											? this.getIcon( ICON_TYPE.RETRY )
+											: this.getIcon(
+													ICON_TYPE.PLACEHOLDER
+											  ) }
+									</View>
+									{ isUploadFailed && (
+										<Text style={ retryVideoTextStyles }>
+											{ retryMessage }
+										</Text>
+									) }
+								</View>
 							) }
 						</View>
-					) }
-				</View>
-			</TouchableWithoutFeedback>
+					</View>
+				</TouchableWithoutFeedback>
+			</View>
 		);
 	}
 
@@ -299,7 +323,7 @@ class MediaContainer extends Component {
 	renderPlaceholder() {
 		return (
 			<MediaPlaceholder
-				icon={ this.getIcon( false ) }
+				icon={ this.getIcon( ICON_TYPE.PLACEHOLDER ) }
 				labels={ {
 					title: __( 'Media area' ),
 				} }
@@ -312,53 +336,48 @@ class MediaContainer extends Component {
 	}
 
 	render() {
-		const { mediaUrl, mediaId, mediaType } = this.props;
+		const { mediaUrl, mediaId, mediaType, onSetOpenPickerRef } = this.props;
 		const coverUrl = mediaType === MEDIA_TYPE_IMAGE ? mediaUrl : null;
 
 		if ( mediaUrl ) {
 			return (
-				<View>
-					<MediaUpload
-						onSelect={ this.onSelectMediaUploadOption }
-						allowedTypes={ ALLOWED_MEDIA_TYPES }
-						value={ mediaId }
-						render={ ( { open, getMediaOptions } ) => {
-							return (
-								<View style={ { flex: 1 } }>
-									{ getMediaOptions() }
-									{ this.renderToolbarEditButton( open ) }
-
-									<MediaUploadProgress
-										coverUrl={ coverUrl }
-										mediaId={ mediaId }
-										onUpdateMediaProgress={
-											this.updateMediaProgress
-										}
-										onFinishMediaUploadWithSuccess={
-											this.finishMediaUploadWithSuccess
-										}
-										onFinishMediaUploadWithFailure={
-											this.finishMediaUploadWithFailure
-										}
-										onMediaUploadStateReset={
-											this.mediaUploadStateReset
-										}
-										renderContent={ ( params ) => {
-											return (
-												<View style={ styles.content }>
-													{ this.renderContent(
-														params,
-														open
-													) }
-												</View>
-											);
-										} }
-									/>
-								</View>
-							);
-						} }
-					/>
-				</View>
+				<MediaUpload
+					onSelect={ this.onSelectMediaUploadOption }
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					value={ mediaId }
+					render={ ( { open, getMediaOptions } ) => {
+						onSetOpenPickerRef( open );
+
+						return (
+							<>
+								{ getMediaOptions() }
+
+								<MediaUploadProgress
+									coverUrl={ coverUrl }
+									mediaId={ mediaId }
+									onUpdateMediaProgress={
+										this.updateMediaProgress
+									}
+									onFinishMediaUploadWithSuccess={
+										this.finishMediaUploadWithSuccess
+									}
+									onFinishMediaUploadWithFailure={
+										this.finishMediaUploadWithFailure
+									}
+									onMediaUploadStateReset={
+										this.mediaUploadStateReset
+									}
+									renderContent={ ( params ) => {
+										return this.renderContent(
+											params,
+											open
+										);
+									} }
+								/>
+							</>
+						);
+					} }
+				/>
 			);
 		}
 		return this.renderPlaceholder();
diff --git a/packages/block-library/src/media-text/style.native.scss b/packages/block-library/src/media-text/style.native.scss
index 4e8cca364896da..71f54b903f88be 100644
--- a/packages/block-library/src/media-text/style.native.scss
+++ b/packages/block-library/src/media-text/style.native.scss
@@ -34,15 +34,6 @@ $media-to-text: 12px;
 	padding-bottom: 8;
 }
 
-.content {
-	flex: 1;
-}
-
-.contentCentered {
-	flex: 1;
-	align-items: center;
-}
-
 .imageContainer {
 	align-items: center;
 	background-color: $gray-lighten-30;
@@ -57,32 +48,49 @@ $media-to-text: 12px;
 	align-items: center;
 }
 
-.icon {
+.iconPlaceholder {
 	fill: $gray-dark;
-	width: 24px;
-	height: 24px;
+	width: 100%;
+	height: 100%;
 }
 
-.iconDark {
+.iconPlaceholderDark {
 	fill: $white;
 }
 
 .iconRetry {
 	fill: #fff;
-	width: 100%;
-	height: 100%;
+	width: 24px;
+	height: 24px;
 }
 
 .iconRetryVideo {
 	fill: $gray-dark;
 }
 
+.iconRetryVideoDark {
+	fill: #fff;
+}
+
+.mediaVideo {
+	flex: 1;
+}
+
 .video {
 	width: 100%;
 	height: 100%;
 }
 
 .videoContainer {
+	flex: 1;
+	flex-direction: row;
+}
+
+.videoContent {
+	width: 100%;
+}
+
+.videoPlayer {
 	flex: 1;
 	background-color: #000;
 }
@@ -91,10 +99,14 @@ $media-to-text: 12px;
 	width: 100%;
 	height: 100%;
 	align-items: center;
-	background-color: $gray-lighten-30;
+	background-color: $gray-light;
 	justify-content: center;
 }
 
+.videoPlaceholderDark {
+	background-color: $gray-90;
+}
+
 .uploadFailed {
 	background-color: rgba(0, 0, 0, 0.5);
 	flex: 1;
@@ -110,6 +122,10 @@ $media-to-text: 12px;
 	color: $gray-dark;
 }
 
+.uploadFailedTextVideoDark {
+	color: $white;
+}
+
 // Inner blocks STACK
 .innerBlockStackMediaLeft {
 	margin-top: $media-to-text;
@@ -142,3 +158,27 @@ $media-to-text: 12px;
 .mediaRight {
 	padding-left: $media-to-text;
 }
+
+.imageWithFocalPoint {
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.imageFill {
+	height: 200px;
+}
+
+.imageCropped {
+	min-height: 100px;
+}
+
+.mediaImageContainer {
+	height: 100%;
+	flex-direction: row;
+}
+
+.mediaAreaPadding {
+	width: $media-to-text;
+}
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 02913c7aa8541d..2e74337bbf8fbe 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -70,6 +70,7 @@ export { default as ImageWithFocalPoint } from './mobile/image-with-focalpoint';
 export { default as Gradient } from './mobile/gradient';
 export { default as ColorSettings } from './mobile/color-settings';
 export { default as LinkSettings } from './mobile/link-settings';
+export { default as Image } from './mobile/image';
 
 // Utils
 export { colorsUtils } from './mobile/color-settings/utils';
diff --git a/packages/components/src/mobile/image-with-focalpoint/index.native.js b/packages/components/src/mobile/image-with-focalpoint/index.native.js
index 440b8477ff2bcd..6080e374a29fe0 100644
--- a/packages/components/src/mobile/image-with-focalpoint/index.native.js
+++ b/packages/components/src/mobile/image-with-focalpoint/index.native.js
@@ -13,6 +13,65 @@ import { useState, useEffect, memo } from '@wordpress/element';
  */
 import styles from './style.scss';
 
+function getFocalPointOffset( imageRatio, container, imageSize, focusPoint ) {
+	const containerCenter = Math.floor( container / 2 );
+	const scaledImage = Math.floor( imageSize / imageRatio );
+	const focus = Math.floor( focusPoint * scaledImage );
+	let focusOffset = focus - containerCenter;
+	const offsetRest = scaledImage - focus;
+	const containerRest = container - containerCenter;
+
+	if ( offsetRest < containerRest ) {
+		focusOffset -= containerRest - offsetRest;
+	}
+
+	if ( focusOffset < 0 ) {
+		focusOffset = 0;
+	}
+
+	return -focusOffset;
+}
+
+export function getImageWithFocalPointStyles(
+	focalPoint,
+	containerSize,
+	originalImageData
+) {
+	const imageStyle = {};
+	if ( focalPoint && containerSize && originalImageData ) {
+		let horizontalOffset = 0;
+		let verticalOffset = 0;
+		const widthRatio = originalImageData.width / containerSize.width;
+		const heightRatio = originalImageData.height / containerSize.height;
+
+		imageStyle.resizeMode = 'stretch';
+
+		if ( widthRatio > heightRatio ) {
+			horizontalOffset = getFocalPointOffset(
+				heightRatio,
+				containerSize.width,
+				originalImageData.width,
+				focalPoint.x
+			);
+			imageStyle.width = undefined;
+			imageStyle.left = horizontalOffset;
+		} else if ( widthRatio < heightRatio ) {
+			verticalOffset = getFocalPointOffset(
+				widthRatio,
+				containerSize.height,
+				originalImageData.height,
+				focalPoint.y
+			);
+			imageStyle.height = undefined;
+			imageStyle.top = verticalOffset;
+		}
+
+		return imageStyle;
+	}
+
+	return imageStyle;
+}
+
 const ImageWithFocalPoint = ( { focalPoint, url } ) => {
 	const [ originalImageData, setOriginalImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
@@ -34,66 +93,6 @@ const ImageWithFocalPoint = ( { focalPoint, url } ) => {
 		setContainerSize( { width, height } );
 	};
 
-	const getFocalPointOffset = (
-		imageRatio,
-		container,
-		imageSize,
-		focusPoint
-	) => {
-		const containerCenter = Math.floor( container / 2 );
-		const scaledImage = Math.floor( imageSize / imageRatio );
-		const focus = Math.floor( focusPoint * scaledImage );
-		let focusOffset = focus - containerCenter;
-		const offsetRest = scaledImage - focus;
-		const containerRest = container - containerCenter;
-
-		if ( offsetRest < containerRest ) {
-			focusOffset -= containerRest - offsetRest;
-		}
-
-		if ( focusOffset < 0 ) {
-			focusOffset = 0;
-		}
-
-		return -focusOffset;
-	};
-
-	const getImageStyles = () => {
-		const imageStyle = {};
-		if ( focalPoint && containerSize && originalImageData ) {
-			let horizontalOffset = 0;
-			let verticalOffset = 0;
-			const widthRatio = originalImageData.width / containerSize.width;
-			const heightRatio = originalImageData.height / containerSize.height;
-
-			imageStyle.resizeMode = 'stretch';
-
-			if ( widthRatio > heightRatio ) {
-				horizontalOffset = getFocalPointOffset(
-					heightRatio,
-					containerSize.width,
-					originalImageData.width,
-					focalPoint.x
-				);
-				imageStyle.width = undefined;
-				imageStyle.left = horizontalOffset;
-			} else if ( widthRatio < heightRatio ) {
-				verticalOffset = getFocalPointOffset(
-					widthRatio,
-					containerSize.height,
-					originalImageData.height,
-					focalPoint.y
-				);
-				imageStyle.height = undefined;
-				imageStyle.top = verticalOffset;
-			}
-
-			return imageStyle;
-		}
-
-		return imageStyle;
-	};
-
 	return (
 		<View style={ styles.container } onLayout={ onContainerLayout }>
 			<Image
@@ -101,7 +100,11 @@ const ImageWithFocalPoint = ( { focalPoint, url } ) => {
 				style={ [
 					styles.image,
 					{ height: containerSize?.height },
-					getImageStyles(),
+					getImageWithFocalPointStyles(
+						focalPoint,
+						containerSize,
+						originalImageData
+					),
 				] }
 				source={ { uri: url } }
 			/>
diff --git a/packages/block-library/src/image/icon-customize.native.js b/packages/components/src/mobile/image/icon-customize.native.js
similarity index 100%
rename from packages/block-library/src/image/icon-customize.native.js
rename to packages/components/src/mobile/image/icon-customize.native.js
diff --git a/packages/block-library/src/image/icon-retry.native.js b/packages/components/src/mobile/image/icon-retry.native.js
similarity index 100%
rename from packages/block-library/src/image/icon-retry.native.js
rename to packages/components/src/mobile/image/icon-retry.native.js
diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
new file mode 100644
index 00000000000000..e71c88310fe5a9
--- /dev/null
+++ b/packages/components/src/mobile/image/index.native.js
@@ -0,0 +1,231 @@
+/**
+ * External dependencies
+ */
+import { Image, Text, TouchableWithoutFeedback, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/components';
+import { image as icon } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { MediaEdit } from '../media-edit';
+import { getImageWithFocalPointStyles } from '../image-with-focalpoint';
+import styles from './style.scss';
+import SvgIconRetry from './icon-retry';
+import SvgIconCustomize from './icon-customize';
+
+const ICON_TYPE = {
+	PLACEHOLDER: 'placeholder',
+	RETRY: 'retry',
+	UPLOAD: 'upload',
+};
+
+function editImageComponent( { open, mediaOptions } ) {
+	return (
+		<TouchableWithoutFeedback onPress={ open }>
+			<View style={ styles.editContainer }>
+				<View style={ styles.edit }>
+					{ mediaOptions() }
+					<Icon
+						size={ 16 }
+						icon={ SvgIconCustomize }
+						{ ...styles.iconCustomise }
+					/>
+				</View>
+			</View>
+		</TouchableWithoutFeedback>
+	);
+}
+
+const ImageComponent = ( {
+	align,
+	alt,
+	isSelected,
+	isUploadFailed,
+	isUploadInProgress,
+	onSelectMediaUploadOption,
+	openMediaOptions,
+	retryMessage,
+	url,
+	width: imageWidth,
+	focalPoint,
+} ) => {
+	const [ imageData, setImageData ] = useState( null );
+	const [ containerSize, setContainerSize ] = useState( null );
+
+	useEffect( () => {
+		if ( url ) {
+			Image.getSize( url, ( imgWidth, imgHeight ) => {
+				setImageData( {
+					aspectRatio: imgWidth / imgHeight,
+					width: imgWidth,
+					height: imgHeight,
+				} );
+			} );
+		}
+	}, [ url ] );
+
+	const onContainerLayout = ( event ) => {
+		const { height, width } = event.nativeEvent.layout;
+
+		if (
+			width !== 0 &&
+			height !== 0 &&
+			( containerSize?.width !== width ||
+				containerSize?.height !== height )
+		) {
+			setContainerSize( { width, height } );
+		}
+	};
+
+	const getIcon = ( iconType ) => {
+		let iconStyle;
+		switch ( iconType ) {
+			case ICON_TYPE.RETRY:
+				return <Icon icon={ SvgIconRetry } { ...styles.iconRetry } />;
+			case ICON_TYPE.PLACEHOLDER:
+				iconStyle = iconPlaceholderStyles;
+				break;
+			case ICON_TYPE.UPLOAD:
+				iconStyle = iconUploadStyles;
+				break;
+		}
+		return <Icon icon={ icon } { ...iconStyle } />;
+	};
+
+	const iconPlaceholderStyles = usePreferredColorSchemeStyle(
+		styles.iconPlaceholder,
+		styles.iconPlaceholderDark
+	);
+
+	const iconUploadStyles = usePreferredColorSchemeStyle(
+		styles.iconUpload,
+		styles.iconUploadDark
+	);
+
+	const placeholderStyles = usePreferredColorSchemeStyle(
+		styles.imageContainerUpload,
+		styles.imageContainerUploadDark
+	);
+
+	const customWidth =
+		imageData?.width < containerSize?.width ? imageData?.width : '100%';
+
+	const imageContainerStyles = [
+		styles.imageContent,
+		{
+			width:
+				imageData && imageWidth > 0 && imageWidth < containerSize?.width
+					? imageWidth
+					: customWidth,
+		},
+		focalPoint && styles.focalPointContainer,
+	];
+
+	const imageStyles = [
+		{
+			opacity: isUploadInProgress ? 0.3 : 1,
+			height: containerSize?.height,
+		},
+		focalPoint && styles.focalPoint,
+		focalPoint &&
+			getImageWithFocalPointStyles(
+				focalPoint,
+				containerSize,
+				imageData
+			),
+		! focalPoint &&
+			imageData &&
+			containerSize && {
+				height:
+					imageData?.width > containerSize?.width
+						? containerSize?.width / imageData?.aspectRatio
+						: undefined,
+			},
+	];
+
+	return (
+		<View
+			style={ [
+				styles.container,
+				// only set alignItems if an image exists because alignItems causes the placeholder
+				// to disappear when an aligned image can't be downloaded
+				// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592
+				imageData && align && { alignItems: align },
+			] }
+			onLayout={ onContainerLayout }
+		>
+			<View
+				accessible
+				disabled={ ! isSelected }
+				accessibilityLabel={ alt }
+				accessibilityHint={ __( 'Double tap and hold to edit' ) }
+				accessibilityRole={ 'imagebutton' }
+				key={ url }
+				style={ imageContainerStyles }
+			>
+				{ isSelected && ! ( isUploadInProgress || isUploadFailed ) && (
+					<View
+						style={ [
+							styles.imageBorder,
+							{ height: containerSize?.height },
+						] }
+					/>
+				) }
+
+				{ ! imageData ? (
+					<View style={ placeholderStyles }>
+						<View style={ styles.imageUploadingIconContainer }>
+							{ getIcon( ICON_TYPE.UPLOAD ) }
+						</View>
+					</View>
+				) : (
+					<View style={ focalPoint && styles.focalPointContent }>
+						<Image
+							aspectRatio={ imageData?.aspectRatio }
+							style={ imageStyles }
+							source={ { uri: url } }
+							{ ...( ! focalPoint && { resizeMethod: 'scale' } ) }
+						/>
+					</View>
+				) }
+
+				{ isUploadFailed && (
+					<View
+						style={ [
+							styles.imageContainer,
+							styles.retryContainer,
+						] }
+					>
+						<View style={ styles.modalIcon }>
+							{ getIcon( ICON_TYPE.RETRY ) }
+						</View>
+						<Text style={ styles.uploadFailedText }>
+							{ retryMessage }
+						</Text>
+					</View>
+				) }
+				{ isSelected &&
+					! isUploadInProgress &&
+					! isUploadFailed &&
+					( imageData || focalPoint ) && (
+						<MediaEdit
+							onSelect={ onSelectMediaUploadOption }
+							source={ { uri: url } }
+							openReplaceMediaOptions={ openMediaOptions }
+							render={ editImageComponent }
+						/>
+					) }
+			</View>
+		</View>
+	);
+};
+
+export default ImageComponent;
diff --git a/packages/components/src/mobile/image/style.native.scss b/packages/components/src/mobile/image/style.native.scss
new file mode 100644
index 00000000000000..7590acfed44382
--- /dev/null
+++ b/packages/components/src/mobile/image/style.native.scss
@@ -0,0 +1,130 @@
+.container {
+	flex-grow: 1;
+}
+
+.imageContent {
+	overflow: hidden;
+}
+
+.imageBorder {
+	border-color: $blue-medium;
+	border-width: 2px;
+	border-style: solid;
+	position: absolute;
+	z-index: 1;
+	width: 100%;
+	height: 100%;
+}
+
+.modalIcon {
+	width: 80px;
+	height: 80px;
+	justify-content: center;
+	align-items: center;
+}
+
+
+.iconRetry {
+	fill: #fff;
+	width: 100%;
+	height: 100%;
+}
+
+.iconPlaceholder {
+	fill: $gray-dark;
+	width: 100%;
+	height: 100%;
+}
+
+.iconPlaceholderDark {
+	fill: $white;
+}
+
+.iconUpload {
+	fill: $gray-lighten-20;
+	width: 100%;
+	height: 100%;
+}
+
+.iconUploadDark {
+	fill: $gray-70;
+}
+
+.imageContainerUpload {
+	justify-content: center;
+	align-items: center;
+	background-color: $gray-light;
+	height: 200px;
+}
+
+.imageContainerUploadDark {
+	background-color: $gray-90;
+}
+
+.imageUploadingIconContainer {
+	width: 40px;
+	height: 40px;
+	justify-content: center;
+	align-items: center;
+}
+
+.imageContainer {
+	width: 100%;
+	height: 100%;
+	justify-content: center;
+	align-items: center;
+	background-color: $gray-lighten-30;
+	position: absolute;
+}
+
+.uploadFailedText {
+	color: #fff;
+	font-size: 14;
+	margin-top: 5;
+}
+
+.editContainer {
+	width: 44px;
+	height: 44px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 2;
+}
+
+.edit {
+	width: 30px;
+	height: 30px;
+	background-color: $gray-dark;
+	border-radius: 22px;
+	position: absolute;
+	top: 5px;
+	right: 5px;
+}
+
+.iconCustomise {
+	fill: #fff;
+	position: absolute;
+	top: 7px;
+	left: 7px;
+}
+
+.retryContainer {
+	flex: 1;
+	background-color: "rgba(0, 0, 0, 0.5)";
+}
+
+.focalPointContainer {
+	height: 100%;
+}
+
+.focalPoint {
+	position: absolute;
+	width: 100%;
+}
+
+.focalPointContent {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
diff --git a/packages/block-editor/src/components/media-edit/index.native.js b/packages/components/src/mobile/media-edit/index.native.js
similarity index 100%
rename from packages/block-editor/src/components/media-edit/index.native.js
rename to packages/components/src/mobile/media-edit/index.native.js
diff --git a/packages/react-native-editor/RELEASE-NOTES.txt b/packages/react-native-editor/RELEASE-NOTES.txt
index 3c8ebfc1b6341b..eae7451509cb1d 100644
--- a/packages/react-native-editor/RELEASE-NOTES.txt
+++ b/packages/react-native-editor/RELEASE-NOTES.txt
@@ -1,3 +1,7 @@
+1.33.0
+------
+* [***] Media editing support in Media & Text block.
+
 1.31.1
 ------
 * Fix for pullquote stylying in dark mode.