react-native-hr

Horizontal line component for React Native

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-hr
73111.1.46 years ago8 years agoMinified + gzip package size for react-native-hr in KB

Readme

react-native-hr
========= react-native-hr brings htmls' <hr /> to react-native.
It also brings some extra functionality:
    <li>Overayling text onto the line.</li>
    <li>Changing text style.</li>
    <li>Changing line style.</li>

Props

<tr>
<td><code>lineStyle<code></td>
<td><code>Object<code></td>
<td><em>(Optional)</em> The style object for line(View).</td>
</tr>
<tr>
<td><code>text<code></td>
<td><code>string<code></td>
<td><em>(Optional)</em> The text to display on the line (centered) </td>
</tr>
<tr>
<td><code>textStyle<code></td>
<td><code>Object<code></td>
<td><em>(Optional)</em> The color of the text</td>
</tr>
<tr>
<td>Name</td>
<td>Type</td>
<td>Description</td>
</tr>

Usage

Solid Line

```
```

Line with left margin

```
```

Line with text

```
```

Line with text and text style

```
textStyle={{
color: "red", fontSize: 20,
textDecorationLine: "underline",
textDecorationStyle: "solid",
textDecorationColor: "#000"
}}
/>
```

Line with line style

```
lineStyle={{
backgroundColor: "blue",
height: 4
}}
/>
```

Line style and text style

```
lineStyle={{
backgroundColor: "blue",
height: 2
}}
textStyle={{
color: "green",
fontSize: 20,
textDecorationLine: "underline",
textDecorationStyle: "solid",
textDecorationColor: "#000"
}}
/>
``` Imgur