hr-native
=========
hr-native brings htmls' <hr /> to react-native.
It also brings some extra functionality:
- Overayling text onto the line.
- Changing text style.
- Changing line style.
Props
| Name | Type | Description |
lineStyle |
Object |
(Optional) The style object for line(View). |
text |
string |
(Optional) The text to display on the line (centered) |
textStyle |
Object |
(Optional) The color of the text |
textAlign |
String |
(Optional) The align of the text [left,center,right] |
Usage
Solid Line
<Hr />
Line with left margin
<Hr marginLeft={50} />
Line with text
<Hr text="react-native" />
Line with text and text style
<Hr text="text style"
textStyle={{
color: "red", fontSize: 20,
textDecorationLine: "underline",
textDecorationStyle: "solid",
textDecorationColor: "#000"
}}
/>
textAlign
<Hr text="line style"
textAlign="right"
lineStyle={{
backgroundColor: "blue",
height: 4
}}
/>
Line with line style
<Hr text="line style"
lineStyle={{
backgroundColor: "blue",
height: 4
}}
/>
Line style and text style
<Hr lineColor='red' text='line style and text style'
lineStyle={{
backgroundColor: "blue",
height: 2
}}
textStyle={{
color: "green",
fontSize: 20,
textDecorationLine: "underline",
textDecorationStyle: "solid",
textDecorationColor: "#000"
}}
/>
[
