├── .prettierignore
├── .prettierrc
├── .babelrc
├── .gitignore
├── index.d.ts
├── .eslintrc
├── package.json
├── LICENSE
├── src
    └── index.js
└── README.md


/.prettierignore:
--------------------------------------------------------------------------------
1 | README
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "semi": true,
4 |   "trailingComma": "all",
5 |   "jsxSingleQuote": true,
6 |   "printWidth": 150
7 | }
8 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "@babel/preset-env",
 5 |       {
 6 |         "targets": {
 7 |           "node": "current"
 8 |         }
 9 |       }
10 |     ]
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | .DS_Store
 3 | 
 4 | # IDE
 5 | .idea
 6 | .vscode
 7 | 
 8 | # npm
 9 | node_modules
10 | 
11 | # jest
12 | coverage
13 | 
14 | # build
15 | build
16 | index.min.js
17 | dist
18 | 
19 | # eslint
20 | .eslintcache
21 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { ViewStyle, StyleProp } from 'react-native';
 3 | 
 4 | export interface DashedLineProps {
 5 |     axis?: 'horizontal' | 'vertical';
 6 |     dashColor?: string;
 7 |     dashGap?: number;
 8 |     dashLength?: number;
 9 |     dashStyle?: StyleProp<ViewStyle>;
10 |     dashThickness?: number;
11 |     style?: StyleProp<ViewStyle>;
12 | }
13 | 
14 | export default class DashedLine extends React.Component<DashedLineProps> {}
15 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "es6": true,
 4 |     "node": true,
 5 |     "jest": true
 6 |   },
 7 |   "extends": ["eslint:recommended", "prettier", "plugin:security/recommended", "plugin:import/errors", "plugin:import/warnings"],
 8 |   "plugins": ["prettier", "security"],
 9 |   "parser": "babel-eslint",
10 |   "parserOptions": {
11 |     "sourceType": "module",
12 |     "ecmaVersion": 2018
13 |   },
14 |   "rules": {
15 |     "no-console": "error",
16 |     "prettier/prettier": "error",
17 |     "import/imports-first": ["error", "absolute-first"],
18 |     "import/newline-after-import": "error"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-dashed-line",
 3 |   "version": "1.1.0",
 4 |   "description": "A dependency free React Native component to render dashed/dotted lines",
 5 |   "main": "src/index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/RBrNx/react-native-dashed-line.git"
 9 |   },
10 |   "keywords": [
11 |     "react-native",
12 |     "dash",
13 |     "dashes",
14 |     "dashed",
15 |     "dot",
16 |     "dots",
17 |     "dotted",
18 |     "line",
19 |     "lines",
20 |     "dashed-line",
21 |     "dotted-line",
22 |     "react",
23 |     "native"
24 |   ],
25 |   "author": "RBrNx",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/RBrNx/react-native-dashed-line/issues"
29 |   },
30 |   "homepage": "https://github.com/RBrNx/react-native-dashed-line#readme",
31 |   "types": "index.d.ts"
32 | }
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Conor Watson
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useMemo, useState } from 'react';
 2 | import { View, StyleSheet } from 'react-native';
 3 | 
 4 | const DashedLine = ({
 5 |   axis = 'horizontal',
 6 |   dashGap = 2,
 7 |   dashLength = 4,
 8 |   dashThickness = 2,
 9 |   dashColor = '#000',
10 |   dashStyle,
11 |   style,
12 | }) => {
13 |   const [lineLength, setLineLength] = useState(0);
14 |   const isRow = axis === 'horizontal';
15 |   const numOfDashes = Math.ceil(lineLength / (dashGap + dashLength));
16 | 
17 |   const dashStyles = useMemo(
18 |     () => ({
19 |       width: isRow ? dashLength : dashThickness,
20 |       height: isRow ? dashThickness : dashLength,
21 |       marginRight: isRow ? dashGap : 0,
22 |       marginBottom: isRow ? 0 : dashGap,
23 |       backgroundColor: dashColor,
24 |     }),
25 |     [dashColor, dashGap, dashLength, dashThickness, isRow],
26 |   );
27 | 
28 |   return (
29 |     <View
30 |       onLayout={event => {
31 |         const { width, height } = event.nativeEvent.layout;
32 |         setLineLength(isRow ? width : height);
33 |       }}
34 |       style={[style, isRow ? styles.row : styles.column]}
35 |     >
36 |       {[...Array(numOfDashes)].map((_, i) => {
37 |         // eslint-disable-next-line react/no-array-index-key
38 |         return <View key={i} style={[dashStyles, dashStyle]} />;
39 |       })}
40 |     </View>
41 |   );
42 | };
43 | 
44 | const styles = StyleSheet.create({
45 |   row: {
46 |     flexDirection: 'row',
47 |   },
48 |   column: {
49 |     flexDirection: 'column',
50 |   },
51 | });
52 | 
53 | export default DashedLine;
54 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h3 align="center">
  2 |   React Native Dashed Line
  3 | </h3>
  4 | 
  5 | <p align="center">
  6 |   A dependency free React Native component to render dashed/dotted lines
  7 | </p>
  8 | 
  9 | <p align="center">
 10 |   <a href="https://www.npmjs.com/package/react-native-dashed-line">
 11 |     <img src="https://img.shields.io/npm/v/react-native-dashed-line?style=flat-square" alt="Current npm package version." />
 12 |   </a>
 13 |   <a href="https://www.npmjs.com/package/react-native-dashed-line">
 14 |     <img src="https://img.shields.io/bundlephobia/min/react-native-dashed-line?style=flat-square" alt="Bundle size" />
 15 |   </a>
 16 |   <a href="https://github.com/RBrNx/react-native-dashed-line/blob/master/LICENSE">
 17 |     <img src="https://img.shields.io/npm/l/react-native-dashed-line?style=flat-square" alt="react-native-dashed-line is released under the MIT license." />
 18 |   </a>
 19 | </p>
 20 | 
 21 | <hr />
 22 | 
 23 | <br />
 24 | 
 25 | ## Contents
 26 | 
 27 | - [Installation](#installation)
 28 | - [Usage Guide](#usage-guide)
 29 | - [API Reference](#api-reference)
 30 | - [Contributing](#contributing)
 31 | 
 32 | <br />
 33 | 
 34 | ## Installation
 35 | 
 36 | You can install via Yarn or npm
 37 | 
 38 | ```bash
 39 | yarn add react-native-dashed-line
 40 | ```
 41 | 
 42 | ```bash
 43 | npm install react-native-dashed-line
 44 | ```
 45 | 
 46 | <br />
 47 | 
 48 | ## Usage Guide
 49 | 
 50 | Just need to import it, easy peasy!
 51 | 
 52 | ```javascript
 53 | import DashedLine from 'react-native-dashed-line';
 54 | 
 55 | return (
 56 |   <View style={{ padding: '5%', height: '100%' }}>
 57 |     <DashedLine dashLength={5} />
 58 | 
 59 |     <DashedLine dashLength={10} dashThickness={8} />
 60 | 
 61 |     <DashedLine dashLength={10} dashThickness={8} dashGap={5} />
 62 | 
 63 |     <DashedLine dashLength={10} dashThickness={8} dashGap={5} dashColor='#c32626' />
 64 | 
 65 |     <DashedLine dashLength={10} dashThickness={8} dashGap={5} dashColor='#c32626' dashStyle={{ borderRadius: 5 }} />
 66 | 
 67 |     <DashedLine axis='vertical' dashLength={5} />
 68 |   </View>
 69 | );
 70 | ```
 71 | 
 72 | <img height="750" src="https://user-images.githubusercontent.com/1332314/116053526-b2223180-a672-11eb-935e-57d3925cf34e.png" alt="Example screenshot">
 73 | 
 74 | <br/>
 75 | 
 76 | ## API Reference
 77 | 
 78 | Here is a list of all of the props that react-native-dashed-line can accept
 79 | 
 80 | ### `axis`
 81 | 
 82 | Axis of the line, can be either `horizontal` or `vertical`. Defaults to `horionztal`.
 83 | 
 84 | | type   | default    | required |
 85 | | ------ | ---------- | -------- |
 86 | | string | horizontal | NO       |
 87 | 
 88 | ### `dashGap`
 89 | 
 90 | Length of the gap in pixels between each dash, defaults to `2`.
 91 | 
 92 | | type   | default | required |
 93 | | ------ | ------- | -------- |
 94 | | number | 2       | NO       |
 95 | 
 96 | ### `dashLength`
 97 | 
 98 | Length of each dash stroke in pixels, defaults to `4`.
 99 | 
100 | | type   | default | required |
101 | | ------ | ------- | -------- |
102 | | number | 4       | NO       |
103 | 
104 | ### `dashThickness`
105 | 
106 | Defines the thickness of each dash stroke in pixels, defaults to `2`.
107 | 
108 | | type   | default | required |
109 | | ------ | ------- | -------- |
110 | | number | 2       | NO       |
111 | 
112 | ### `dashColor`
113 | 
114 | Defines the color of the dashed line, defaults to Black `#000`. Any valid React Native colour can be provided.
115 | 
116 | | type   | default | required |
117 | | ------ | ------- | -------- |
118 | | string | #000    | NO       |
119 | 
120 | ### `dashStyle`
121 | 
122 | Allows for custom View styles to be passed to each dash.
123 | 
124 | | type            | required |
125 | | --------------- | -------- |
126 | | Object \| Array | NO       |
127 | 
128 | ### `style`
129 | 
130 | Allows for custom View styles to be passed to each dashed line container.
131 | 
132 | | type            | required |
133 | | --------------- | -------- |
134 | | Object \| Array | NO       |
135 | 
136 | <br/>
137 | 
138 | ## Contributing
139 | 
140 | I am more than happy to accept any contributions anyone would like to make, whether that's raising an issue, suggesting an improvement or developing a new feature.
141 | 


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