diff --git a/packages/block-library/src/gallery/gallery-image-style.native.scss b/packages/block-library/src/gallery/gallery-image-style.native.scss
index 765f6c4918544d..50fd10dc1ebf73 100644
--- a/packages/block-library/src/gallery/gallery-image-style.native.scss
+++ b/packages/block-library/src/gallery/gallery-image-style.native.scss
@@ -1,11 +1,11 @@
 $gallery-image-container-height: 150px;
-$overlay-border-width: 3px;
+$overlay-border-width: 2px;
 $caption-background-color: rgba(0, 0, 0, 0.4);
-$caption-padding-vertical: 8px;
 
 .galleryImageContainer {
 	flex: 1;
 	height: $gallery-image-container-height;
+	overflow: hidden;
 	background-color: $gray-lighten-30;
 }
 
@@ -14,30 +14,7 @@ $caption-padding-vertical: 8px;
 }
 
 .image {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	opacity: 1;
-}
-
-.imageUploading {
-	opacity: 0.3;
-}
-
-.overlay {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	border-width: $overlay-border-width;
-	border-color: #0000;
-}
-
-.overlaySelected {
-	border-color: $blue-wordpress;
+	height: 100%;
 }
 
 .button {
@@ -67,14 +44,12 @@ $caption-padding-vertical: 8px;
 
 .separator {
 	border-right-color: $gray-30;
-	// border-right-width: StyleSheet.hairlineWidth;
 	border-right-width: 1px;
 	height: 20px;
 }
 
-.removeButton {
-	width: 30px;
-	border-radius: 30px;
+.toolbarContainer {
+	position: absolute;
 }
 
 .toolbar {
@@ -115,6 +90,11 @@ $caption-padding-vertical: 8px;
 	flex: 1;
 	flex-direction: row;
 	align-items: flex-end;
+	position: absolute;
+	bottom: $overlay-border-width;
+	left: $overlay-border-width;
+	right: $overlay-border-width;
+	top: 45;
 }
 
 @mixin caption-shared {
@@ -128,30 +108,24 @@ $caption-padding-vertical: 8px;
 .caption {
 	@include caption-shared;
 	background-color: $caption-background-color;
-	padding-top: $caption-padding-vertical;
-	padding-bottom: $caption-padding-vertical;
+	padding-top: $grid-unit;
+	padding-bottom: $grid-unit;
 }
 
 .captionPlaceholder {
 	color: #ccc;
 }
 
-/*
-.captionDark {
-	background-color: #0007;
-}
-*/
-
 // expand caption container to compensate for overlay border
 .captionExpandedContainer {
 	// constrain height to gallery image height for caption scroll
 	max-height: $gallery-image-container-height;
 	position: absolute;
-	bottom: - $overlay-border-width;
-	left: - $overlay-border-width;
-	right: - $overlay-border-width;
-	padding-top: $caption-padding-vertical;
-	padding-bottom: $overlay-border-width + $caption-padding-vertical;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding-top: $grid-unit;
+	padding-bottom: $overlay-border-width + $grid-unit;
 	padding-left: $overlay-border-width;
 	padding-right: $overlay-border-width;
 	// use caption background color on container when expanded
diff --git a/packages/block-library/src/gallery/gallery-image.native.js b/packages/block-library/src/gallery/gallery-image.native.js
index d34362efd5e68e..1670e1e81a7d87 100644
--- a/packages/block-library/src/gallery/gallery-image.native.js
+++ b/packages/block-library/src/gallery/gallery-image.native.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import {
-	Image,
 	StyleSheet,
 	View,
 	ScrollView,
@@ -17,14 +16,15 @@ import { isEmpty } from 'lodash';
 import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
+	requestImageFullscreenPreview,
 } from '@wordpress/react-native-bridge';
 import { Component } from '@wordpress/element';
-import { Icon } from '@wordpress/components';
+import { Icon, Image } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Caption, MediaUploadProgress } from '@wordpress/block-editor';
 import { getProtocol } from '@wordpress/url';
 import { withPreferredColorScheme } from '@wordpress/compose';
-import { close, arrowLeft, arrowRight } from '@wordpress/icons';
+import { arrowLeft, arrowRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -38,9 +38,7 @@ const separatorStyle = compose( style.separator, {
 	borderRightWidth: StyleSheet.hairlineWidth,
 } );
 const buttonStyle = compose( style.button, { aspectRatio: 1 } );
-const removeButtonStyle = compose( style.removeButton, { aspectRatio: 1 } );
 const ICON_SIZE_ARROW = 15;
-const ICON_SIZE_REMOVE = 20;
 
 class GalleryImage extends Component {
 	constructor() {
@@ -50,7 +48,7 @@ class GalleryImage extends Component {
 		this.onSelectCaption = this.onSelectCaption.bind( this );
 		this.onMediaPressed = this.onMediaPressed.bind( this );
 		this.onCaptionChange = this.onCaptionChange.bind( this );
-		this.bindContainer = this.bindContainer.bind( this );
+		this.onSelectMedia = this.onSelectMedia.bind( this );
 
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
 		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
@@ -68,10 +66,6 @@ class GalleryImage extends Component {
 		};
 	}
 
-	bindContainer( ref ) {
-		this.container = ref;
-	}
-
 	onSelectCaption() {
 		if ( ! this.state.captionSelected ) {
 			this.setState( {
@@ -85,17 +79,24 @@ class GalleryImage extends Component {
 	}
 
 	onMediaPressed() {
-		const { id, url } = this.props;
+		const { id, url, isSelected } = this.props;
+		const {
+			captionSelected,
+			isUploadInProgress,
+			didUploadFail,
+		} = this.state;
 
 		this.onSelectImage();
 
-		if ( this.state.isUploadInProgress ) {
+		if ( isUploadInProgress ) {
 			requestImageUploadCancelDialog( id );
 		} else if (
-			this.state.didUploadFail ||
+			didUploadFail ||
 			( id && getProtocol( url ) === 'file:' )
 		) {
 			requestImageFailedRetryDialog( id );
+		} else if ( isSelected && ! captionSelected ) {
+			requestImageFullscreenPreview( url );
 		}
 	}
 
@@ -115,6 +116,11 @@ class GalleryImage extends Component {
 		}
 	}
 
+	onSelectMedia( media ) {
+		const { setAttributes } = this.props;
+		setAttributes( media );
+	}
+
 	onCaptionChange( caption ) {
 		const { setAttributes } = this.props;
 		setAttributes( { caption } );
@@ -187,17 +193,6 @@ class GalleryImage extends Component {
 		const { isUploadFailed, retryMessage } = params;
 		const resizeMode = isCropped ? 'cover' : 'contain';
 
-		const imageStyle = [
-			style.image,
-			{ resizeMode },
-			isUploadInProgress ? style.imageUploading : undefined,
-		];
-
-		const overlayStyle = compose(
-			style.overlay,
-			isSelected ? style.overlaySelected : undefined
-		);
-
 		const captionPlaceholderStyle = getStylesFromColorScheme(
 			style.captionPlaceholder,
 			style.captionPlaceholderDark
@@ -213,17 +208,33 @@ class GalleryImage extends Component {
 
 		const captionStyle = shouldShowCaptionExpanded
 			? style.captionExpanded
-			: getStylesFromColorScheme( style.caption, style.captionDark );
+			: style.caption;
+
+		const mediaPickerOptions = [
+			{
+				destructiveButton: true,
+				id: 'removeImage',
+				label: __( 'Remove' ),
+				onPress: onRemove,
+				separated: true,
+				value: 'removeImage',
+			},
+		];
 
 		return (
 			<>
 				<Image
-					style={ imageStyle }
-					source={ { uri: url } }
-					// alt={ alt }
-					accessibilityLabel={ ariaLabel }
-					ref={ this.bindContainer }
+					alt={ ariaLabel }
+					height={ style.image.height }
+					isSelected={ isSelected }
+					isUploadFailed={ isUploadFailed }
+					isUploadInProgress={ isUploadInProgress }
+					mediaPickerOptions={ mediaPickerOptions }
+					onSelectMediaUploadOption={ this.onSelectMedia }
+					resizeMode={ resizeMode }
+					url={ url }
 				/>
+
 				{ isUploadFailed && (
 					<View style={ style.uploadFailedContainer }>
 						<View style={ style.uploadFailed }>
@@ -237,89 +248,71 @@ class GalleryImage extends Component {
 						</Text>
 					</View>
 				) }
-				<View style={ overlayStyle }>
-					{ ! isUploadInProgress && (
-						<>
-							{ isSelected && (
-								<View style={ style.toolbar }>
-									<View style={ style.moverButtonContainer }>
-										<Button
-											style={ buttonStyle }
-											icon={
-												isRTL ? arrowRight : arrowLeft
-											}
-											iconSize={ ICON_SIZE_ARROW }
-											onClick={
-												isFirstItem
-													? undefined
-													: onMoveBackward
-											}
-											accessibilityLabel={ __(
-												'Move Image Backward'
-											) }
-											aria-disabled={ isFirstItem }
-											disabled={ ! isSelected }
-										/>
-										<View style={ separatorStyle }></View>
-										<Button
-											style={ buttonStyle }
-											icon={
-												isRTL ? arrowLeft : arrowRight
-											}
-											iconSize={ ICON_SIZE_ARROW }
-											onClick={
-												isLastItem
-													? undefined
-													: onMoveForward
-											}
-											accessibilityLabel={ __(
-												'Move Image Forward'
-											) }
-											aria-disabled={ isLastItem }
-											disabled={ ! isSelected }
-										/>
-									</View>
-									<Button
-										style={ removeButtonStyle }
-										icon={ close }
-										iconSize={ ICON_SIZE_REMOVE }
-										onClick={ onRemove }
-										accessibilityLabel={ __(
-											'Remove Image'
-										) }
-										disabled={ ! isSelected }
-									/>
-								</View>
-							) }
-							{ ( shouldShowCaptionEditable ||
-								shouldShowCaptionExpanded ) && (
-								<View style={ captionContainerStyle }>
-									<ScrollView
-										nestedScrollEnabled
-										keyboardShouldPersistTaps="handled"
-									>
-										<Caption
-											inlineToolbar
-											isSelected={ captionSelected }
-											onChange={ this.onCaptionChange }
-											onFocus={ this.onSelectCaption }
-											placeholder={
-												isSelected
-													? __( 'Write caption…' )
-													: null
-											}
-											placeholderTextColor={
-												captionPlaceholderStyle.color
-											}
-											style={ captionStyle }
-											value={ caption }
-										/>
-									</ScrollView>
-								</View>
-							) }
-						</>
+
+				{ ! isUploadInProgress && isSelected && (
+					<View style={ style.toolbarContainer }>
+						<View style={ style.toolbar }>
+							<View style={ style.moverButtonContainer }>
+								<Button
+									style={ buttonStyle }
+									icon={ isRTL ? arrowRight : arrowLeft }
+									iconSize={ ICON_SIZE_ARROW }
+									onClick={
+										isFirstItem ? undefined : onMoveBackward
+									}
+									accessibilityLabel={ __(
+										'Move Image Backward'
+									) }
+									aria-disabled={ isFirstItem }
+									disabled={ ! isSelected }
+								/>
+								<View style={ separatorStyle } />
+								<Button
+									style={ buttonStyle }
+									icon={ isRTL ? arrowLeft : arrowRight }
+									iconSize={ ICON_SIZE_ARROW }
+									onClick={
+										isLastItem ? undefined : onMoveForward
+									}
+									accessibilityLabel={ __(
+										'Move Image Forward'
+									) }
+									aria-disabled={ isLastItem }
+									disabled={ ! isSelected }
+								/>
+							</View>
+						</View>
+					</View>
+				) }
+
+				{ ! isUploadInProgress &&
+					( shouldShowCaptionEditable ||
+						shouldShowCaptionExpanded ) && (
+						<View style={ captionContainerStyle }>
+							<ScrollView
+								nestedScrollEnabled
+								keyboardShouldPersistTaps="handled"
+								bounces={ false }
+							>
+								<Caption
+									inlineToolbar
+									isSelected={ captionSelected }
+									onChange={ this.onCaptionChange }
+									onFocus={ this.onSelectCaption }
+									placeholder={
+										isSelected
+											? __( 'Write caption…' )
+											: null
+									}
+									placeholderTextColor={
+										captionPlaceholderStyle.color
+									}
+									style={ captionStyle }
+									value={ caption }
+								/>
+							</ScrollView>
+						</View>
 					) }
-				</View>
 			</>
 		);
 	}
diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
index 88104c84b69d2d..b5173a67c1c237 100644
--- a/packages/components/src/mobile/image/index.native.js
+++ b/packages/components/src/mobile/image/index.native.js
@@ -33,12 +33,14 @@ const ImageComponent = ( {
 	alt,
 	editButton = true,
 	focalPoint,
+	height: imageHeight,
 	isSelected,
 	isUploadFailed,
 	isUploadInProgress,
 	mediaPickerOptions,
 	onSelectMediaUploadOption,
 	openMediaOptions,
+	resizeMode,
 	retryMessage,
 	url,
 	width: imageWidth,
@@ -102,10 +104,13 @@ const ImageComponent = ( {
 			styles.imageContainerUploadDark
 		),
 		focalPoint && styles.imageContainerUploadWithFocalpoint,
+		imageHeight && { height: imageHeight },
 	];
 
 	const customWidth =
-		imageData?.width < containerSize?.width ? imageData?.width : '100%';
+		imageData?.width < containerSize?.width
+			? imageData?.width
+			: styles.wide.width;
 
 	const imageContainerStyles = [
 		styles.imageContent,
@@ -115,6 +120,7 @@ const ImageComponent = ( {
 					? imageWidth
 					: customWidth,
 		},
+		resizeMode && { width: styles.wide.width },
 		focalPoint && styles.focalPointContainer,
 	];
 
@@ -138,6 +144,7 @@ const ImageComponent = ( {
 						? containerSize?.width / imageData?.aspectRatio
 						: undefined,
 			},
+		imageHeight && { height: imageHeight },
 	];
 
 	return (
@@ -178,12 +185,15 @@ const ImageComponent = ( {
 				) : (
 					<View style={ focalPoint && styles.focalPointContent }>
 						<Image
-							aspectRatio={ imageData?.aspectRatio }
+							{ ...( ! resizeMode && {
+								aspectRatio: imageData?.aspectRatio,
+							} ) }
 							style={ imageStyles }
 							source={ { uri: url } }
 							{ ...( ! focalPoint && {
 								resizeMethod: 'scale',
 							} ) }
+							resizeMode={ resizeMode }
 						/>
 					</View>
 				) }
diff --git a/packages/components/src/mobile/image/style.native.scss b/packages/components/src/mobile/image/style.native.scss
index d5a0e5315382e9..45723d86ef6c45 100644
--- a/packages/components/src/mobile/image/style.native.scss
+++ b/packages/components/src/mobile/image/style.native.scss
@@ -132,3 +132,7 @@
 	width: 100%;
 	height: 100%;
 }
+
+.wide {
+	width: 100%;
+}
diff --git a/packages/components/src/mobile/media-edit/index.native.js b/packages/components/src/mobile/media-edit/index.native.js
index 434d83ab9da3b6..be8e9f2362b55f 100644
--- a/packages/components/src/mobile/media-edit/index.native.js
+++ b/packages/components/src/mobile/media-edit/index.native.js
@@ -44,11 +44,11 @@ export class MediaEdit extends React.Component {
 	}
 
 	getMediaOptionsItems() {
-		const { pickerOptions } = this.props;
+		const { pickerOptions, openReplaceMediaOptions } = this.props;
 
 		return compact( [
 			editOption,
-			replaceOption,
+			openReplaceMediaOptions && replaceOption,
 			...( pickerOptions ? pickerOptions : [] ),
 		] );
 	}
@@ -71,7 +71,12 @@ export class MediaEdit extends React.Component {
 	}
 
 	onPickerSelect( value ) {
-		const { onSelect, pickerOptions, multiple = false } = this.props;
+		const {
+			onSelect,
+			pickerOptions,
+			multiple = false,
+			openReplaceMediaOptions,
+		} = this.props;
 
 		switch ( value ) {
 			case MEDIA_EDITOR:
@@ -91,7 +96,9 @@ export class MediaEdit extends React.Component {
 					return;
 				}
 
-				this.props.openReplaceMediaOptions();
+				if ( openReplaceMediaOptions ) {
+					openReplaceMediaOptions();
+				}
 		}
 	}
 
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 2de5c7ef25cdbb..d9372ce8be0c7b 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -11,9 +11,10 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
-# 1.35.0
+## 1.35.0
 
 * [**] Add settings to allow changing column widths
+* [**] Media editing support in Gallery block.
 
 ## 1.34.0