[
  {
    "path": ".gitignore",
    "content": "# OSX\n#\n.DS_Store\n\n# Xcode\n#\nbuild/\n*.pbxuser\n!default.pbxuser\n*.mode1v3\n!default.mode1v3\n*.mode2v3\n!default.mode2v3\n*.perspectivev3\n!default.perspectivev3\nxcuserdata\n*.xccheckout\n*.moved-aside\nDerivedData\n*.hmap\n*.ipa\n*.xcuserstate\nproject.xcworkspace\n\n# Android/IJ\n#\n.idea\n.gradle\nlocal.properties\n\n# node.js\n#\nnode_modules/\nnpm-debug.log\n"
  },
  {
    "path": "Dash.js",
    "content": "/*\n* Draws fully customizable dashed lines vertically or horizontally\n*\n* @providesModule Dash\n*/\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { View, StyleSheet, ViewPropTypes } from 'react-native'\nimport MeasureMeHOC from 'react-native-measureme'\nimport { getDashStyle, isStyleRow } from '../util'\n\nconst Dash = props => {\n\tconst isRow = isStyleRow(props.style)\n\tconst length = isRow ? props.width : props.height\n\tconst n = Math.ceil(length / (props.dashGap + props.dashLength))\n\tconst calculatedDashStyles = getDashStyle(props)\n\tlet dash = []\n\tfor (let i = 0; i < n; i++) {\n\t\tdash.push(\n\t\t\t<View\n\t\t\t\tkey={ i }\n\t\t\t\tstyle={ [\n\t\t\t\t\tcalculatedDashStyles,\n\t\t\t\t\tprops.dashStyle,\n\t\t\t\t] }\n\t\t\t/>\n\t\t)\n\t}\n\treturn (\n\t\t<View\n\t\t\tonLayout={ props.onLayout }\n\t\t\tstyle={ [ props.style, isRow ? styles.row : styles.column ] }\n\t\t>\n\t\t\t{ dash }\n\t\t</View>\n\t)\n}\n\nconst styles = StyleSheet.create({\n\trow: { flexDirection: 'row' },\n\tcolumn: { flexDirection: 'column' },\n})\n\nDash.propTypes = {\n\tstyle: ViewPropTypes.style,\n\tdashGap: PropTypes.number.isRequired,\n\tdashLength: PropTypes.number.isRequired,\n\tdashThickness: PropTypes.number.isRequired,\n\tdashColor: PropTypes.string,\n\tdashStyle: ViewPropTypes.style,\n}\n\nDash.defaultProps = {\n\tdashGap: 2,\n\tdashLength: 4,\n\tdashThickness: 2,\n\tdashColor: 'black',\n}\n\nexport default MeasureMeHOC(Dash)\n"
  },
  {
    "path": "README.md",
    "content": "# react-native-dash\n[![NPM version](https://badge.fury.io/js/react-native-dash.svg)](http://badge.fury.io/js/react-native-dash)\n\nA super simple `<Dash />` component for react-native to draw customisable dashed lines\n\n## Installation\n```sh\nnpm i --save react-native-dash\n```\n\n## Props\n| name | desc | type | default\n| --- | --- | --- | --- |\n| `style` | Dash container style  | [View.PropTypes.Style](https://facebook.github.io/react-native/docs/view.html#style) | `{flexDirection = 'row'}`\n| `dashGap` | Gap between two dashes | number | `2`\n| `dashLength` | Length of each dash | number | `4`\n| `dashThickness` | Thickness of each dash | number | `2`\n| `dashColor` | Color of each dash | string | `black`\n| `dashStyle` | Dashes style | [View.PropTypes.Style](https://facebook.github.io/react-native/docs/view.html#style) | {}\n\n - **ProTip 1**: Use `flexDirection` in style to get horizontal or vertical dashes. By default, it's `row`\n - **ProTip 2**: Use `{borderRadius: 100, overflow: 'hidden'}` in dashStyle to get rounded dotes instead of straight line dashes. \n\n## Usage\n```javascript\nimport Dash from 'react-native-dash';\n\n//draws a horizontal dashed line with defaults. Also works with flex\nrender() {\n    return <Dash style={{width:100, height:1}}/>\n}\n\n//draws a vertical dashed line with defaults.\nrender() {\n    return <Dash style={{width:1, height:100, flexDirection:'column'}}/>\n}\n```\n\n### Dependenies\n [react-native-measureme](https://github.com/obipawan/react-native-measureme)\n### Development\n\nPRs highly appreciated\n\nLicense\n----\nMIT License\n"
  },
  {
    "path": "dist/index.js",
    "content": "'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n\tvalue: true\n});\n\nvar _react = require('react');\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _propTypes = require('prop-types');\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _reactNative = require('react-native');\n\nvar _reactNativeMeasureme = require('react-native-measureme');\n\nvar _reactNativeMeasureme2 = _interopRequireDefault(_reactNativeMeasureme);\n\nvar _util = require('../util');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar Dash = function Dash(props) {\n\tvar isRow = (0, _util.isStyleRow)(props.style);\n\tvar length = isRow ? props.width : props.height;\n\tvar n = Math.ceil(length / (props.dashGap + props.dashLength));\n\tvar calculatedDashStyles = (0, _util.getDashStyle)(props);\n\tvar dash = [];\n\tfor (var i = 0; i < n; i++) {\n\t\tdash.push(_react2.default.createElement(_reactNative.View, {\n\t\t\tkey: i,\n\t\t\tstyle: [calculatedDashStyles, props.dashStyle]\n\t\t}));\n\t}\n\treturn _react2.default.createElement(\n\t\t_reactNative.View,\n\t\t{\n\t\t\tonLayout: props.onLayout,\n\t\t\tstyle: [props.style, isRow ? styles.row : styles.column]\n\t\t},\n\t\tdash\n\t);\n}; /*\n   * Draws fully customizable dashed lines vertically or horizontally\n   *\n   * @providesModule Dash\n   */\n\nvar styles = _reactNative.StyleSheet.create({\n\trow: { flexDirection: 'row' },\n\tcolumn: { flexDirection: 'column' }\n});\n\nDash.propTypes = {\n\tstyle: _reactNative.ViewPropTypes.style,\n\tdashGap: _propTypes2.default.number.isRequired,\n\tdashLength: _propTypes2.default.number.isRequired,\n\tdashThickness: _propTypes2.default.number.isRequired,\n\tdashColor: _propTypes2.default.string,\n\tdashStyle: _reactNative.ViewPropTypes.style\n};\n\nDash.defaultProps = {\n\tdashGap: 2,\n\tdashLength: 4,\n\tdashThickness: 2,\n\tdashColor: 'black'\n};\n\nexports.default = (0, _reactNativeMeasureme2.default)(Dash);\n"
  },
  {
    "path": "index.d.ts",
    "content": "// Type definitions for react-native-dash v0.0.9\n// Project: react-native-dash\n// Definitions by: alex-blair <https://github.com/alex-blair>\n\nimport React from 'react';\nimport { ViewStyle, StyleProp } from 'react-native';\n\nexport interface DashProps {\n  dashGap: number;\n  dashLength: number;\n  dashThickness: number;\n  style?: StyleProp<ViewStyle>;\n  dashColor?: string;\n  dashStyle?: StyleProp<ViewStyle>;\n}\n\nexport default class Dash extends React.Component<DashProps> {}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"react-native-dash\",\n  \"version\": \"0.0.11\",\n  \"description\": \"A <Dash /> component for react-native to draw dashed or dotted lines\",\n  \"main\": \"dist/index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n    \"build\": \"babel --presets=es2015,react --plugins=transform-object-rest-spread Dash.js --out-file dist/index.js\",\n    \"prepare\": \"npm run build\",\n    \"prepush\": \"npm run build\",\n    \"precommit\": \"npm run build\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/obipawan/react-native-dash.git\"\n  },\n  \"keywords\": [\n    \"line\",\n    \"lines\",\n    \"react-native\",\n    \"react\",\n    \"dashes\",\n    \"dashed\",\n    \"dash\",\n    \"dotted\",\n    \"dashed-lines\",\n    \"dotted-lines\"\n  ],\n  \"author\": \"Pawan Kumar\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/obipawan/react-native-dash/issues\"\n  },\n  \"homepage\": \"https://github.com/obipawan/react-native-dash#readme\",\n  \"dependencies\": {\n    \"react-native-measureme\": \"0.0.2\",\n    \"prop-types\": \"^15.5.10\"\n  },\n  \"devDependencies\": {\n    \"babel-cli\": \"^6.26.0\",\n    \"babel-plugin-transform-object-rest-spread\": \"^6.26.0\",\n    \"babel-preset-es2015\": \"^6.24.1\",\n    \"babel-preset-react\": \"^6.24.1\",\n    \"husky\": \"^3.0.4\"\n  },\n  \"types\": \"index.d.ts\"\n}\n"
  },
  {
    "path": "util.js",
    "content": "import { StyleSheet } from 'react-native'\n\nexport const isStyleRow = style => {\n  const flatStyle = StyleSheet.flatten(style || {})\n  return flatStyle.flexDirection !== 'column'\n}\n\nconst getDashStyleId = (\n  { dashGap, dashLength, dashThickness, dashColor },\n  isRow,\n) =>\n  `${dashGap}-${dashLength}-${dashThickness}-${dashColor}-${\n    isRow ? 'row' : 'column'\n  }`\n\nconst createDashStyleSheet = (\n  { dashGap, dashLength, dashThickness, dashColor },\n  isRow,\n) => {\n  const idStyle = StyleSheet.create({\n    style: {\n      width: isRow ? dashLength : dashThickness,\n      height: isRow ? dashThickness : dashLength,\n      marginRight: isRow ? dashGap : 0,\n      marginBottom: isRow ? 0 : dashGap,\n      backgroundColor: dashColor,\n    },\n  })\n  return idStyle.style\n}\n\nlet stylesStore = {}\nexport const getDashStyle = props => {\n  const isRow = isStyleRow(props.style)\n  const id = getDashStyleId(props, isRow)\n  if (!stylesStore[id]) {\n    stylesStore = {\n      ...stylesStore,\n      [id]: createDashStyleSheet(props, isRow),\n    }\n  }\n  return stylesStore[id]\n}\n"
  }
]