2.0.3 • Published 5 years ago
react-native-hr-component v2.0.3
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.