React Native Hr Component

Use this component if you want to add and customize text between a line in your component, something like this:

Installation

NPM

npm i react-native-hr-component -S

Yarn

yarn add react-native-hr-component

Usage

import Hr from "react-native-hr-component";
 
<Hr lineColor="#eee" width={1} text="Dummy Text" textStyles={customStylesHere} />

Your Text Styles will be applied to the "Dummy Text" you passed in.

customStylesHere: {
    fontWeight: "bold",
    color: "orange"
}

Properties

Prop	Default	Type	Description
color	black	color	Color for the border on both sides
thickness	1	number	Thickness of the hr bar
text	1	number or string	Text between the hr bars
textStyles	{}	object	Stylesheet object applied on the text supplied
hrStyles	{}	object	Stylesheet object applied on the main hr view
textPadding	3	number	Distance between text and hr bars
fontSize	Default App value	number	Font size of text
hrPadding	0	number	Distance between hr bars and edge of parent component

Note: Setting through textStyles will overwrite the default CSS behavior provided by textPadding, fontSize, etc.

Contributing

PRs are welcome.