Skip to content

Latest commit

 

History

History
100 lines (86 loc) · 1.9 KB

README.md

File metadata and controls

100 lines (86 loc) · 1.9 KB

react-native-hr

========= react-native-hr 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

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"
       }}
   />

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"
       }}
    />

[Imgur