2.0.3 • Published 5 years ago

react-native-hr-component v2.0.3

Weekly downloads
320
License
MIT
Repository
github
Last release
5 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

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago