diff --git a/packages/block-library/src/heading/heading-level-icon.js b/packages/block-library/src/heading/heading-level-icon.js
index a65d9f4a0ecb64..aa1e964f3ec417 100644
--- a/packages/block-library/src/heading/heading-level-icon.js
+++ b/packages/block-library/src/heading/heading-level-icon.js
@@ -3,7 +3,7 @@
  */
 import { Path, SVG } from '@wordpress/components';
 
-export default function HeadingLevelIcon( { level } ) {
+export default function HeadingLevelIcon( { level, __unstableActive } ) {
 	const levelToPath = {
 		1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
 		2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
@@ -17,7 +17,7 @@ export default function HeadingLevelIcon( { level } ) {
 	}
 
 	return (
-		<SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+		<SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" __unstableActive={ __unstableActive } >
 			<Path d={ levelToPath[ level ] } />
 		</SVG>
 	);
diff --git a/packages/block-library/src/heading/heading-toolbar.js b/packages/block-library/src/heading/heading-toolbar.js
index f3a089a8fafefe..6d19cc0822f894 100644
--- a/packages/block-library/src/heading/heading-toolbar.js
+++ b/packages/block-library/src/heading/heading-toolbar.js
@@ -17,11 +17,12 @@ import HeadingLevelIcon from './heading-level-icon';
 
 class HeadingToolbar extends Component {
 	createLevelControl( targetLevel, selectedLevel, onChange ) {
+		const isActive = targetLevel === selectedLevel;
 		return {
-			icon: <HeadingLevelIcon level={ targetLevel } />,
+			icon: <HeadingLevelIcon level={ targetLevel } __unstableActive={ isActive } />,
 			// translators: %s: heading level e.g: "1", "2", "3"
 			title: sprintf( __( 'Heading %d' ), targetLevel ),
-			isActive: targetLevel === selectedLevel,
+			isActive,
 			onClick: () => onChange( targetLevel ),
 		};
 	}
diff --git a/packages/components/src/primitives/svg/index.js b/packages/components/src/primitives/svg/index.js
index abb15e121dc2b0..6aabda291fd88e 100644
--- a/packages/components/src/primitives/svg/index.js
+++ b/packages/components/src/primitives/svg/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -19,5 +24,5 @@ export const SVG = ( props ) => {
 
 	// Disable reason: We need to have a way to render HTML tag for web.
 	// eslint-disable-next-line react/forbid-elements
-	return <svg { ...appliedProps } />;
+	return <svg { ...omit( appliedProps, '__unstableActive' ) } />;
 };
diff --git a/packages/components/src/primitives/svg/index.native.js b/packages/components/src/primitives/svg/index.native.js
index 2226b5fdf3fc6b..8cf9a2d7cee274 100644
--- a/packages/components/src/primitives/svg/index.native.js
+++ b/packages/components/src/primitives/svg/index.native.js
@@ -19,7 +19,7 @@ export {
 export const SVG = ( props ) => {
 	const colorScheme = props.colorScheme || 'light';
 	const stylesFromClasses = ( props.className || '' ).split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean );
-	const defaultStyle = props.active ? styles[ 'is-active' ] : styles[ 'components-toolbar__control-' + colorScheme ];
+	const defaultStyle = props.__unstableActive ? styles[ 'is-active' ] : styles[ 'components-toolbar__control-' + colorScheme ];
 	const styleValues = Object.assign( {}, props.style, defaultStyle, ...stylesFromClasses );
 
 	const safeProps = { ...props, style: styleValues };
diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
index 84ff6e2608c905..09ac451ed56d23 100644
--- a/packages/rich-text/src/component/index.native.js
+++ b/packages/rich-text/src/component/index.native.js
@@ -440,7 +440,7 @@ export class RichText extends Component {
 	/**
 	 * Handles a paste event from the native Aztec Wrapper.
 	 *
-	 * @param {PasteEvent} event The paste event which wraps `nativeEvent`.
+	 * @param {Object} event The paste event which wraps `nativeEvent`.
 	 */
 	onPaste( event ) {
 		const {
@@ -753,13 +753,19 @@ export class RichText extends Component {
 
 	getHtmlToRender( record, tagName ) {
 		// Save back to HTML from React tree
-		const value = this.valueToFormat( record );
+		let value = this.valueToFormat( record );
 
-		if ( value === undefined || value === '' ) {
+		if ( value === undefined ) {
 			this.lastEventCount = undefined; // force a refresh on the native side
-			return '';
-		} else if ( tagName ) {
-			return `<${ tagName }>${ value }</${ tagName }>`;
+			value = '';
+		}
+		// On android if content is empty we need to send no content or else the placeholder with not show.
+		if ( ! this.isIOS && value === '' ) {
+			return value;
+		}
+
+		if ( tagName ) {
+			value = `<${ tagName }>${ value }</${ tagName }>`;
 		}
 		return value;
 	}