2.0.3 • Published 6 years ago

react-native-hr-component v2.0.3

Weekly downloads
320
License
MIT
Repository
github
Last release
6 years ago

React Native Hr Component

Use this component if you want to add and customize text between a line in your component, something like this:

Installation

NPM

npm i react-native-hr-component -S

Yarn

yarn add react-native-hr-component

Usage

import Hr from "react-native-hr-component";

<Hr lineColor="#eee" width={1} text="Dummy Text" textStyles={customStylesHere} />

Your Text Styles will be applied to the "Dummy Text" you passed in.

customStylesHere: {
    fontWeight: "bold",
    color: "orange"
}

Properties

PropDefaultTypeDescription
colorblackcolorColor for the border on both sides
thickness1numberThickness of the hr bar
text1number or stringText between the hr bars
textStyles{}objectStylesheet object applied on the text supplied
hrStyles{}objectStylesheet object applied on the main hr view
textPadding3numberDistance between text and hr bars
fontSizeDefault App valuenumberFont size of text
hrPadding0numberDistance between hr bars and edge of parent component

Note: Setting through textStyles will overwrite the default CSS behavior provided by textPadding, fontSize, etc.

Contributing

PRs are welcome.

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago