From 563e2926a68b10e098b1387c9af1c35ee2446fb8 Mon Sep 17 00:00:00 2001
From: Pinar Olguc <pinarolguc@gmail.com>
Date: Thu, 1 Nov 2018 14:23:37 +0300
Subject: [PATCH] Enhance styling of nextpage block using the Hr element
 (#11354)

* Add a line into nextpage block using the Hr element

* Fix lint problems

* Fix scss lint issue
---
 packages/block-library/src/nextpage/edit.native.js     | 7 +++++--
 packages/block-library/src/nextpage/editor.native.scss | 9 +++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/nextpage/edit.native.js b/packages/block-library/src/nextpage/edit.native.js
index e486337e1c47b6..03cd3bfe3c7d18 100644
--- a/packages/block-library/src/nextpage/edit.native.js
+++ b/packages/block-library/src/nextpage/edit.native.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
+import Hr from 'react-native-hr';
 
 /**
  * WordPress dependencies
@@ -18,7 +19,9 @@ export default function NextPageEdit( { attributes } ) {
 
 	return (
 		<View className={ styles[ 'block-library-nextpage__container' ] }>
-			<Text>{ customText }</Text>
+			<Hr text={ customText }
+				textStyle={ styles[ 'block-library-nextpage__text' ] }
+				lineStyle={ styles[ 'block-library-nextpage__line' ] } />
 		</View>
 	);
 }
diff --git a/packages/block-library/src/nextpage/editor.native.scss b/packages/block-library/src/nextpage/editor.native.scss
index 7101c63e82962a..0e75d4a7595c28 100644
--- a/packages/block-library/src/nextpage/editor.native.scss
+++ b/packages/block-library/src/nextpage/editor.native.scss
@@ -4,3 +4,12 @@
 	align-items: center;
 	padding: 4px 4px 4px 4px;
 }
+
+.block-library-nextpage__line {
+	background-color: #555d66;
+	height: 2;
+}
+
+.block-library-nextpage__text {
+	text-decoration-style: solid;
+}