diff --git a/package-lock.json b/package-lock.json
index 306653d04093fd..e9c3db13b74ca0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18432,7 +18432,6 @@
 				"react-native-fast-image": "8.5.11",
 				"react-native-gesture-handler": "https://raw.githubusercontent.com/wordpress-mobile/react-native-gesture-handler/2.3.2-wp-3/react-native-gesture-handler-2.3.2-wp-3.tgz",
 				"react-native-get-random-values": "1.4.0",
-				"react-native-hr": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hr/1.1.3-wp-1/react-native-hr-1.1.3.tgz",
 				"react-native-hsv-color-picker": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hsv-color-picker/v1.0.1-wp-4/react-native-hsv-color-picker-1.0.1-wp-4.tgz",
 				"react-native-linear-gradient": "https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/v2.5.6-wp-4/react-native-linear-gradient-2.5.6-wp-4.tgz",
 				"react-native-modal": "^11.10.0",
@@ -49733,10 +49732,6 @@
 			"resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.7.tgz",
 			"integrity": "sha512-+4JpbIx42zGTONhBTIXSyfyHICHC29VTvhkkoUOJAh/XHPEixpuBduYgf6Y4y9wsN1ARlQhBBoptTvXvAFQf5g=="
 		},
-		"react-native-hr": {
-			"version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hr/1.1.3-wp-1/react-native-hr-1.1.3.tgz",
-			"integrity": "sha512-iwKdUpLc7lGN0+yiVfKxvvouMEXJeR4sRmfXFKXNnWOaBRdcf412zPa5vK4yEGPh5s38GDR29jYMM/RRw5U4nw=="
-		},
 		"react-native-hsv-color-picker": {
 			"version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hsv-color-picker/v1.0.1-wp-4/react-native-hsv-color-picker-1.0.1-wp-4.tgz",
 			"integrity": "sha512-SEfIWIEJEtKFSs0stRaPGOUYBpmO9ZHznuVs4tg0ITyfNqtWXQ29LxtFBnZCb+UnuwtOnIJG1m3aE7jqP8zYCg==",
diff --git a/packages/block-library/src/more/edit.native.js b/packages/block-library/src/more/edit.native.js
index c140bcdc483674..d05e9920ae4571 100644
--- a/packages/block-library/src/more/edit.native.js
+++ b/packages/block-library/src/more/edit.native.js
@@ -1,15 +1,10 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-import Hr from 'react-native-hr';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { withPreferredColorScheme } from '@wordpress/compose';
+import { HorizontalRule } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -41,15 +36,13 @@ export class MoreEdit extends Component {
 		);
 
 		return (
-			<View>
-				<Hr
-					text={ content }
-					marginLeft={ 0 }
-					marginRight={ 0 }
-					textStyle={ textStyle }
-					lineStyle={ lineStyle }
-				/>
-			</View>
+			<HorizontalRule
+				text={ content }
+				marginLeft={ 0 }
+				marginRight={ 0 }
+				textStyle={ textStyle }
+				lineStyle={ lineStyle }
+			/>
 		);
 	}
 }
diff --git a/packages/block-library/src/nextpage/edit.native.js b/packages/block-library/src/nextpage/edit.native.js
index 8570b942fd60a6..508ca7e10553a3 100644
--- a/packages/block-library/src/nextpage/edit.native.js
+++ b/packages/block-library/src/nextpage/edit.native.js
@@ -2,13 +2,13 @@
  * External dependencies
  */
 import { View } from 'react-native';
-import Hr from 'react-native-hr';
 
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
+import { HorizontalRule } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -44,7 +44,7 @@ export function NextPageEdit( {
 			accessibilityStates={ accessibilityState }
 			onAccessibilityTap={ onFocus }
 		>
-			<Hr
+			<HorizontalRule
 				text={ customText }
 				marginLeft={ 0 }
 				marginRight={ 0 }
diff --git a/packages/primitives/src/horizontal-rule/index.native.js b/packages/primitives/src/horizontal-rule/index.native.js
index 853b57e76d0c1a..8841c8e6941889 100644
--- a/packages/primitives/src/horizontal-rule/index.native.js
+++ b/packages/primitives/src/horizontal-rule/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import Hr from 'react-native-hr';
+import { Text, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -13,16 +13,46 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  */
 import styles from './styles.scss';
 
-const HR = ( { getStylesFromColorScheme, ...props } ) => {
-	const lineStyle = getStylesFromColorScheme( styles.line, styles.lineDark );
+const HR = ( {
+	getStylesFromColorScheme,
+	lineStyle,
+	marginLeft,
+	marginRight,
+	textStyle,
+	text,
+	...props
+} ) => {
+	const renderLine = ( key ) => (
+		<View
+			key={ key }
+			style={ getStylesFromColorScheme( styles.line, styles.lineDark ) }
+		/>
+	);
+
+	const renderText = ( key ) => (
+		<View key={ key }>
+			<Text style={ [ styles.text, textStyle ] }>{ text }</Text>
+		</View>
+	);
+
+	const renderInner = () => {
+		if ( ! text ) {
+			return renderLine();
+		}
+		return [ renderLine( 1 ), renderText( 2 ), renderLine( 3 ) ];
+	};
 
 	return (
-		<Hr
+		<View
+			style={ [
+				styles.container,
+				{ marginLeft, marginRight },
+				props.style,
+			] }
 			{ ...props }
-			lineStyle={ [ lineStyle, props.lineStyle ] }
-			marginLeft={ 0 }
-			marginRight={ 0 }
-		/>
+		>
+			{ renderInner() }
+		</View>
 	);
 };
 
diff --git a/packages/primitives/src/horizontal-rule/styles.native.scss b/packages/primitives/src/horizontal-rule/styles.native.scss
index dabb62a8336542..20959ab73042e9 100644
--- a/packages/primitives/src/horizontal-rule/styles.native.scss
+++ b/packages/primitives/src/horizontal-rule/styles.native.scss
@@ -1,8 +1,23 @@
+.container {
+	align-items: center;
+	flex-direction: row;
+	margin-left: 0;
+	margin-right: 0;
+}
+
 .line {
 	background-color: $gray-lighten-20;
+	flex: 1;
 	height: 2;
 }
 
 .lineDark {
 	background-color: $gray-50;
 }
+
+.text {
+	flex: 1;
+	margin-left: 15px;
+	margin-right: 15px;
+	text-align: center;
+}
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index 8b996092e2e3ab..ab7dd809666d98 100644
--- a/packages/react-native-editor/package.json
+++ b/packages/react-native-editor/package.json
@@ -60,7 +60,6 @@
 		"react-native-fast-image": "8.5.11",
 		"react-native-gesture-handler": "https://raw.githubusercontent.com/wordpress-mobile/react-native-gesture-handler/2.3.2-wp-3/react-native-gesture-handler-2.3.2-wp-3.tgz",
 		"react-native-get-random-values": "1.4.0",
-		"react-native-hr": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hr/1.1.3-wp-1/react-native-hr-1.1.3.tgz",
 		"react-native-hsv-color-picker": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hsv-color-picker/v1.0.1-wp-4/react-native-hsv-color-picker-1.0.1-wp-4.tgz",
 		"react-native-linear-gradient": "https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/v2.5.6-wp-4/react-native-linear-gradient-2.5.6-wp-4.tgz",
 		"react-native-modal": "^11.10.0",
diff --git a/test/native/__mocks__/react-native-hr/index.js b/test/native/__mocks__/react-native-hr/index.js
deleted file mode 100644
index e69de29bb2d1d6..00000000000000
diff --git a/test/native/setup.js b/test/native/setup.js
index 317a47499ddda9..817eb93e0c4396 100644
--- a/test/native/setup.js
+++ b/test/native/setup.js
@@ -133,8 +133,6 @@ jest.mock(
 		props.isVisible ? mockComponent( 'Modal' )( props ) : null
 );
 
-jest.mock( 'react-native-hr', () => () => 'Hr' );
-
 jest.mock( 'react-native-svg', () => {
 	const { forwardRef } = require( 'react' );
 	return {