├── README.md
├── example.jpeg
├── package-lock.json
├── package.json
├── src.js
└── styles.js


/README.md:
--------------------------------------------------------------------------------
 1 | # React Native Hr Component
 2 | 
 3 | Use this component if you want to add and customize text between a line in your component, something like this:
 4 | 
 5 | <img src="https://raw.githubusercontent.com/mehulmpt/react-native-hr-component/master/example.jpeg" width="326" height="580" />
 6 | 
 7 | ## Installation
 8 | NPM
 9 | ```sh
10 | npm i react-native-hr-component -S
11 | ```
12 | 
13 | Yarn
14 | ```sh
15 | yarn add react-native-hr-component
16 | ```
17 | 
18 | ## Usage
19 | ```jsx
20 | import Hr from "react-native-hr-component";
21 | 
22 | <Hr lineColor="#eee" width={1} text="Dummy Text" textStyles={customStylesHere} />
23 | ```
24 | 
25 | Your Text Styles will be applied to the "Dummy Text" you passed in.
26 | ```js
27 | customStylesHere: {
28 |     fontWeight: "bold",
29 |     color: "orange"
30 | }
31 | ```
32 | 
33 | 
34 | ## Properties
35 | 
36 | | Prop  | Default  | Type | Description |
37 | | :------------ |:---------------:| :---------------:| :-----|
38 | | lineColor | black | color | Color for the border on both sides |
39 | | thickness | 1 | number | Thickness of the hr bar |
40 | | text | 1 | number or string | Text between the hr bars |
41 | | textStyles | {} | object | Stylesheet object applied on the text supplied |
42 | | hrStyles | {} | object | Stylesheet object applied on the main hr view |
43 | | textPadding | 3 | number | Distance between text and hr bars |
44 | | fontSize | Default App value | number | Font size of text |
45 | | hrPadding | 0 | number | Distance between hr bars and edge of parent component |
46 | 
47 | **Note:** Setting through textStyles will overwrite the default CSS behavior provided by textPadding, fontSize, etc.
48 | 
49 | ## Contributing
50 | 
51 | PRs are welcome.
52 | 


--------------------------------------------------------------------------------
/example.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mehulmpt/react-native-hr-component/0caca59e500b1a236cf386fef2471f69e5fa66cd/example.jpeg


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "react-native-hr-component",
3 |   "version": "2.0.0",
4 |   "lockfileVersion": 1
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-hr-component",
 3 |   "version": "2.0.3",
 4 |   "description": "Add horizontal rule (hr) to your react native app with a lot of customizations out of the box",
 5 |   "main": "src.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "peerDependencies": {
10 |     "react": "^16.8.3",
11 |     "react-native": "^0.59.8"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/mehulmpt/react-native-hr-component.git"
16 |   },
17 |   "keywords": [
18 |     "react",
19 |     "react native",
20 |     "react native hr",
21 |     "react native hr component"
22 |   ],
23 |   "author": "Mehul Mohan",
24 |   "license": "MIT",
25 |   "bugs": {
26 |     "url": "https://github.com/mehulmpt/react-native-hr-component/issues"
27 |   },
28 |   "homepage": "https://github.com/mehulmpt/react-native-hr-component#readme"
29 | }
30 | 


--------------------------------------------------------------------------------
/src.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { View, Text, ViewPropTypes } from 'react-native'
 3 | import styles from './styles'
 4 | import PropTypes from 'prop-types'
 5 | 
 6 | function Hr(props) {
 7 | 	const { text, hrPadding, thickness, lineColor, fontSize, textPadding, hrStyles, textStyles } = props
 8 | 
 9 | 	return (
10 | 		<View style={[styles.row, { marginLeft: hrPadding, marginRight: hrPadding }, hrStyles]}>
11 | 			<View style={[
12 | 				styles.side,
13 | 				{ height: thickness, backgroundColor: lineColor }
14 | 			]}
15 | 			/>
16 | 			<Text style={[fontSize && { fontSize: fontSize }, { paddingLeft: textPadding, paddingRight: textPadding }, textStyles]}>{text}</Text>
17 | 			<View
18 | 				style={[
19 | 					styles.side,
20 | 					{ height: thickness, backgroundColor: lineColor }
21 | 				]}
22 | 			/>
23 | 		</View>
24 | 	)
25 | }
26 | 
27 | Hr.propTypes = {
28 | 	thickness: PropTypes.number,
29 | 	lineColor: PropTypes.string,
30 | 	text: PropTypes.oneOfType([
31 | 		PropTypes.string,
32 | 		PropTypes.number
33 | 	]).isRequired,
34 | 	fontSize: PropTypes.number,
35 | 	textPadding: PropTypes.number,
36 | 	hrPadding: PropTypes.number,
37 | 	hrStyles: PropTypes.object,
38 | 	textStyles: PropTypes.object
39 | }
40 | 
41 | Hr.defaultProps = {
42 | 	thickness: 1,
43 | 	lineColor: "black",
44 | 	textPadding: 3,
45 | 	hrPadding: 0
46 | }
47 | 
48 | export default Hr


--------------------------------------------------------------------------------
/styles.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native'
 2 | 
 3 | export default StyleSheet.create({
 4 | 	row: {
 5 | 		flexDirection: "row"
 6 | 	},
 7 | 	side: {
 8 | 		backgroundColor: "white",
 9 | 		height: 1,
10 | 		flex: 1,
11 | 		alignSelf: "center"
12 | 	}
13 | })


--------------------------------------------------------------------------------