Skip to content

jestjosh/react-native-hr

 
 

Repository files navigation

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.

Compatibility

This package has been updated to work with modern React Native versions:

  • React >= 16.8.0
  • React Native >= 0.60.0
  • Uses Babel 7 and modern JavaScript tooling

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%