Replace react-native-hr library (WordPress#51041)

* Update native HorizontalRule primitive component * Remove react-native-hr package references
pewresearch · Jul 13, 2023 · 147f8fa · 147f8fa
1 parent 925e21a
commit 147f8fa
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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 {