diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js
index 99a65f60396add..af6947db8435d6 100644
--- a/packages/block-editor/src/components/rich-text/index.native.js
+++ b/packages/block-editor/src/components/rich-text/index.native.js
@@ -110,6 +110,7 @@ export class RichText extends Component {
 		this.onSelectionChange = this.onSelectionChange.bind( this );
 		this.valueToFormat = this.valueToFormat.bind( this );
 		this.willTrimSpaces = this.willTrimSpaces.bind( this );
+		this.getHtmlToRender = this.getHtmlToRender.bind( this );
 		this.state = {
 			start: 0,
 			end: 0,
@@ -643,6 +644,19 @@ export class RichText extends Component {
 		return false;
 	}
 
+	getHtmlToRender( record, tagName ) {
+		// Save back to HTML from React tree
+		const value = this.valueToFormat( record );
+
+		if ( value === undefined || value === '' ) {
+			this.lastEventCount = undefined; // force a refresh on the native side
+			return '';
+		} else if ( tagName ) {
+			return `<${ tagName }>${ value }</${ tagName }>`;
+		}
+		return value;
+	}
+
 	render() {
 		const {
 			tagName,
@@ -653,14 +667,7 @@ export class RichText extends Component {
 		} = this.props;
 
 		const record = this.getRecord();
-		// Save back to HTML from React tree
-		const value = this.valueToFormat( record );
-		let html = `<${ tagName }>${ value }</${ tagName }>`;
-		// We need to check if the value is undefined or empty, and then assign it properly otherwise the placeholder is not visible
-		if ( value === undefined || value === '' ) {
-			html = '';
-			this.lastEventCount = undefined; // force a refresh on the native side
-		}
+		const html = this.getHtmlToRender( record, tagName );
 
 		let minHeight = styles[ 'block-editor-rich-text' ].minHeight;
 		if ( style && style.minHeight ) {
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 2646c5a58d64dd..a6c7b4f9a09f91 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React from 'react';
-import { View, ImageBackground, TextInput, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, ImageBackground, Text, TouchableWithoutFeedback } from 'react-native';
 import {
 	subscribeMediaUpload,
 	requestMediaPickFromMediaLibrary,
@@ -63,6 +63,7 @@ class ImageEdit extends React.Component {
 			progress: 0,
 			isUploadInProgress: false,
 			isUploadFailed: false,
+			isCaptionSelected: false,
 		};
 
 		this.mediaUpload = this.mediaUpload.bind( this );
@@ -74,6 +75,7 @@ class ImageEdit extends React.Component {
 		this.onSetLinkDestination = this.onSetLinkDestination.bind( this );
 		this.onImagePressed = this.onImagePressed.bind( this );
 		this.onClearSettings = this.onClearSettings.bind( this );
+		this.onFocusCaption = this.onFocusCaption.bind( this );
 	}
 
 	componentDidMount() {
@@ -101,6 +103,14 @@ class ImageEdit extends React.Component {
 		this.removeMediaUploadListener();
 	}
 
+	componentWillReceiveProps( nextProps ) {
+		// Avoid a UI flicker in the toolbar by insuring that isCaptionSelected
+		// is updated immediately any time the isSelected prop becomes false
+		this.setState( ( state ) => ( {
+			isCaptionSelected: nextProps.isSelected && state.isCaptionSelected,
+		} ) );
+	}
+
 	onImagePressed() {
 		const { attributes } = this.props;
 
@@ -109,6 +119,11 @@ class ImageEdit extends React.Component {
 		} else if ( attributes.id && ! isURL( attributes.url ) ) {
 			requestImageFailedRetryDialog( attributes.id );
 		}
+
+		this._caption.blur();
+		this.setState( {
+			isCaptionSelected: false,
+		} );
 	}
 
 	mediaUpload( payload ) {
@@ -210,6 +225,17 @@ class ImageEdit extends React.Component {
 		];
 	}
 
+	onFocusCaption() {
+		if ( this.props.onFocus ) {
+			this.props.onFocus();
+		}
+		if ( ! this.state.isCaptionSelected ) {
+			this.setState( {
+				isCaptionSelected: true,
+			} );
+		}
+	}
+
 	render() {
 		const { attributes, isSelected, setAttributes } = this.props;
 		const { url, caption, height, width, alt, href } = attributes;
@@ -338,9 +364,11 @@ class ImageEdit extends React.Component {
 			>
 				<View style={ { flex: 1 } }>
 					{ showSpinner && <Spinner progress={ progress } /> }
-					<BlockControls>
-						{ toolbarEditButton }
-					</BlockControls>
+					{ ( ! this.state.isCaptionSelected ) &&
+						<BlockControls>
+							{ toolbarEditButton }
+						</BlockControls>
+					}
 					<InspectorControls>
 						<ToolbarButton
 							title={ __( 'Image Settings' ) }
@@ -392,19 +420,23 @@ class ImageEdit extends React.Component {
 						} }
 					</ImageSize>
 					{ ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && (
-						<View
-							style={ { padding: 12, flex: 1 } }
+						<View style={ { padding: 12, flex: 1 } }
 							accessible={ true }
 							accessibilityLabel={ __( 'Image caption' ) + __( '.' ) + ' ' + ( isEmpty( caption ) ? __( 'Empty' ) : caption ) }
 							accessibilityRole={ 'button' }
 						>
-							<TextInput
-								style={ { textAlign: 'center' } }
-								fontFamily={ this.props.fontFamily || ( styles[ 'caption-text' ].fontFamily ) }
-								underlineColorAndroid="transparent"
-								value={ caption }
+							<RichText
+								setRef={ ( ref ) => {
+									this._caption = ref;
+								} }
 								placeholder={ __( 'Write caption…' ) }
-								onChangeText={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
+								value={ caption }
+								onChange={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
+								onFocus={ this.onFocusCaption }
+								onBlur={ this.props.onBlur } // always assign onBlur as props
+								isSelected={ this.state.isCaptionSelected }
+								fontSize={ 14 }
+								underlineColorAndroid="transparent"
 							/>
 						</View>
 					) }
diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss
index b187d12aa32feb..fc4e82aded534b 100644
--- a/packages/block-library/src/image/styles.native.scss
+++ b/packages/block-library/src/image/styles.native.scss
@@ -18,10 +18,6 @@
 	align-items: center;
 }
 
-.caption-text {
-	font-family: $default-regular-font;
-}
-
 .clearSettingsButton {
 	color: $alert-red;
 }