/react-native-hr

Primary LanguageJavaScript

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