├── .gitignore
├── index.d.ts
├── util.js
├── package.json
├── Dash.js
├── README.md
└── dist
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # Xcode
 6 | #
 7 | build/
 8 | *.pbxuser
 9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 | 
25 | # Android/IJ
26 | #
27 | .idea
28 | .gradle
29 | local.properties
30 | 
31 | # node.js
32 | #
33 | node_modules/
34 | npm-debug.log
35 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
 1 | // Type definitions for react-native-dash v0.0.9
 2 | // Project: react-native-dash
 3 | // Definitions by: alex-blair <https://github.com/alex-blair>
 4 | 
 5 | import React from 'react';
 6 | import { ViewStyle, StyleProp } from 'react-native';
 7 | 
 8 | export interface DashProps {
 9 |   dashGap: number;
10 |   dashLength: number;
11 |   dashThickness: number;
12 |   style?: StyleProp<ViewStyle>;
13 |   dashColor?: string;
14 |   dashStyle?: StyleProp<ViewStyle>;
15 | }
16 | 
17 | export default class Dash extends React.Component<DashProps> {}
18 | 


--------------------------------------------------------------------------------
/util.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native'
 2 | 
 3 | export const isStyleRow = style => {
 4 |   const flatStyle = StyleSheet.flatten(style || {})
 5 |   return flatStyle.flexDirection !== 'column'
 6 | }
 7 | 
 8 | const getDashStyleId = (
 9 |   { dashGap, dashLength, dashThickness, dashColor },
10 |   isRow,
11 | ) =>
12 |   `${dashGap}-${dashLength}-${dashThickness}-${dashColor}-${
13 |     isRow ? 'row' : 'column'
14 |   }`
15 | 
16 | const createDashStyleSheet = (
17 |   { dashGap, dashLength, dashThickness, dashColor },
18 |   isRow,
19 | ) => {
20 |   const idStyle = StyleSheet.create({
21 |     style: {
22 |       width: isRow ? dashLength : dashThickness,
23 |       height: isRow ? dashThickness : dashLength,
24 |       marginRight: isRow ? dashGap : 0,
25 |       marginBottom: isRow ? 0 : dashGap,
26 |       backgroundColor: dashColor,
27 |     },
28 |   })
29 |   return idStyle.style
30 | }
31 | 
32 | let stylesStore = {}
33 | export const getDashStyle = props => {
34 |   const isRow = isStyleRow(props.style)
35 |   const id = getDashStyleId(props, isRow)
36 |   if (!stylesStore[id]) {
37 |     stylesStore = {
38 |       ...stylesStore,
39 |       [id]: createDashStyleSheet(props, isRow),
40 |     }
41 |   }
42 |   return stylesStore[id]
43 | }
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-dash",
 3 |   "version": "0.0.11",
 4 |   "description": "A <Dash /> component for react-native to draw dashed or dotted lines",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "babel --presets=es2015,react --plugins=transform-object-rest-spread Dash.js --out-file dist/index.js",
 9 |     "prepare": "npm run build",
10 |     "prepush": "npm run build",
11 |     "precommit": "npm run build"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/obipawan/react-native-dash.git"
16 |   },
17 |   "keywords": [
18 |     "line",
19 |     "lines",
20 |     "react-native",
21 |     "react",
22 |     "dashes",
23 |     "dashed",
24 |     "dash",
25 |     "dotted",
26 |     "dashed-lines",
27 |     "dotted-lines"
28 |   ],
29 |   "author": "Pawan Kumar",
30 |   "license": "MIT",
31 |   "bugs": {
32 |     "url": "https://github.com/obipawan/react-native-dash/issues"
33 |   },
34 |   "homepage": "https://github.com/obipawan/react-native-dash#readme",
35 |   "dependencies": {
36 |     "react-native-measureme": "0.0.2",
37 |     "prop-types": "^15.5.10"
38 |   },
39 |   "devDependencies": {
40 |     "babel-cli": "^6.26.0",
41 |     "babel-plugin-transform-object-rest-spread": "^6.26.0",
42 |     "babel-preset-es2015": "^6.24.1",
43 |     "babel-preset-react": "^6.24.1",
44 |     "husky": "^3.0.4"
45 |   },
46 |   "types": "index.d.ts"
47 | }
48 | 


--------------------------------------------------------------------------------
/Dash.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | * Draws fully customizable dashed lines vertically or horizontally
 3 | *
 4 | * @providesModule Dash
 5 | */
 6 | 
 7 | import React from 'react'
 8 | import PropTypes from 'prop-types'
 9 | import { View, StyleSheet, ViewPropTypes } from 'react-native'
10 | import MeasureMeHOC from 'react-native-measureme'
11 | import { getDashStyle, isStyleRow } from '../util'
12 | 
13 | const Dash = props => {
14 | 	const isRow = isStyleRow(props.style)
15 | 	const length = isRow ? props.width : props.height
16 | 	const n = Math.ceil(length / (props.dashGap + props.dashLength))
17 | 	const calculatedDashStyles = getDashStyle(props)
18 | 	let dash = []
19 | 	for (let i = 0; i < n; i++) {
20 | 		dash.push(
21 | 			<View
22 | 				key={ i }
23 | 				style={ [
24 | 					calculatedDashStyles,
25 | 					props.dashStyle,
26 | 				] }
27 | 			/>
28 | 		)
29 | 	}
30 | 	return (
31 | 		<View
32 | 			onLayout={ props.onLayout }
33 | 			style={ [ props.style, isRow ? styles.row : styles.column ] }
34 | 		>
35 | 			{ dash }
36 | 		</View>
37 | 	)
38 | }
39 | 
40 | const styles = StyleSheet.create({
41 | 	row: { flexDirection: 'row' },
42 | 	column: { flexDirection: 'column' },
43 | })
44 | 
45 | Dash.propTypes = {
46 | 	style: ViewPropTypes.style,
47 | 	dashGap: PropTypes.number.isRequired,
48 | 	dashLength: PropTypes.number.isRequired,
49 | 	dashThickness: PropTypes.number.isRequired,
50 | 	dashColor: PropTypes.string,
51 | 	dashStyle: ViewPropTypes.style,
52 | }
53 | 
54 | Dash.defaultProps = {
55 | 	dashGap: 2,
56 | 	dashLength: 4,
57 | 	dashThickness: 2,
58 | 	dashColor: 'black',
59 | }
60 | 
61 | export default MeasureMeHOC(Dash)
62 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-native-dash
 2 | [![NPM version](https://badge.fury.io/js/react-native-dash.svg)](http://badge.fury.io/js/react-native-dash)
 3 | 
 4 | A super simple `<Dash />` component for react-native to draw customisable dashed lines
 5 | 
 6 | ## Installation
 7 | ```sh
 8 | npm i --save react-native-dash
 9 | ```
10 | 
11 | ## Props
12 | | name | desc | type | default
13 | | --- | --- | --- | --- |
14 | | `style` | Dash container style  | [View.PropTypes.Style](https://facebook.github.io/react-native/docs/view.html#style) | `{flexDirection = 'row'}`
15 | | `dashGap` | Gap between two dashes | number | `2`
16 | | `dashLength` | Length of each dash | number | `4`
17 | | `dashThickness` | Thickness of each dash | number | `2`
18 | | `dashColor` | Color of each dash | string | `black`
19 | | `dashStyle` | Dashes style | [View.PropTypes.Style](https://facebook.github.io/react-native/docs/view.html#style) | {}
20 | 
21 |  - **ProTip 1**: Use `flexDirection` in style to get horizontal or vertical dashes. By default, it's `row`
22 |  - **ProTip 2**: Use `{borderRadius: 100, overflow: 'hidden'}` in dashStyle to get rounded dotes instead of straight line dashes. 
23 | 
24 | ## Usage
25 | ```javascript
26 | import Dash from 'react-native-dash';
27 | 
28 | //draws a horizontal dashed line with defaults. Also works with flex
29 | render() {
30 |     return <Dash style={{width:100, height:1}}/>
31 | }
32 | 
33 | //draws a vertical dashed line with defaults.
34 | render() {
35 |     return <Dash style={{width:1, height:100, flexDirection:'column'}}/>
36 | }
37 | ```
38 | 
39 | ### Dependenies
40 |  [react-native-measureme](https://github.com/obipawan/react-native-measureme)
41 | ### Development
42 | 
43 | PRs highly appreciated
44 | 
45 | License
46 | ----
47 | MIT License
48 | 


--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 | 	value: true
 5 | });
 6 | 
 7 | var _react = require('react');
 8 | 
 9 | var _react2 = _interopRequireDefault(_react);
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _reactNative = require('react-native');
16 | 
17 | var _reactNativeMeasureme = require('react-native-measureme');
18 | 
19 | var _reactNativeMeasureme2 = _interopRequireDefault(_reactNativeMeasureme);
20 | 
21 | var _util = require('../util');
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | 
25 | var Dash = function Dash(props) {
26 | 	var isRow = (0, _util.isStyleRow)(props.style);
27 | 	var length = isRow ? props.width : props.height;
28 | 	var n = Math.ceil(length / (props.dashGap + props.dashLength));
29 | 	var calculatedDashStyles = (0, _util.getDashStyle)(props);
30 | 	var dash = [];
31 | 	for (var i = 0; i < n; i++) {
32 | 		dash.push(_react2.default.createElement(_reactNative.View, {
33 | 			key: i,
34 | 			style: [calculatedDashStyles, props.dashStyle]
35 | 		}));
36 | 	}
37 | 	return _react2.default.createElement(
38 | 		_reactNative.View,
39 | 		{
40 | 			onLayout: props.onLayout,
41 | 			style: [props.style, isRow ? styles.row : styles.column]
42 | 		},
43 | 		dash
44 | 	);
45 | }; /*
46 |    * Draws fully customizable dashed lines vertically or horizontally
47 |    *
48 |    * @providesModule Dash
49 |    */
50 | 
51 | var styles = _reactNative.StyleSheet.create({
52 | 	row: { flexDirection: 'row' },
53 | 	column: { flexDirection: 'column' }
54 | });
55 | 
56 | Dash.propTypes = {
57 | 	style: _reactNative.ViewPropTypes.style,
58 | 	dashGap: _propTypes2.default.number.isRequired,
59 | 	dashLength: _propTypes2.default.number.isRequired,
60 | 	dashThickness: _propTypes2.default.number.isRequired,
61 | 	dashColor: _propTypes2.default.string,
62 | 	dashStyle: _reactNative.ViewPropTypes.style
63 | };
64 | 
65 | Dash.defaultProps = {
66 | 	dashGap: 2,
67 | 	dashLength: 4,
68 | 	dashThickness: 2,
69 | 	dashColor: 'black'
70 | };
71 | 
72 | exports.default = (0, _reactNativeMeasureme2.default)(Dash);
73 | 


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