# react-native-dash

> A component for react-native to draw dashed or dotted lines

Latest version **0.0.11** (published 2019-08-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-dash
pnpm add react-native-dash
yarn add react-native-dash
bun add react-native-dash
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2019-08-31 |
| First published | 2016-05-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 177 |
| Author | Pawan Kumar |
| Maintainers | obipawan |
| Keywords | line, lines, react-native, react, dashes, dashed, dash, dotted, dashed-lines, dotted-lines |

## Links

- npm: https://www.npmjs.com/package/react-native-dash
- Repository: https://github.com/obipawan/react-native-dash
- Homepage: https://github.com/obipawan/react-native-dash#readme
- Issues: https://github.com/obipawan/react-native-dash/issues
- npm.io page: https://npm.io/package/react-native-dash

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [react-native-measureme](https://npm.io/package/react-native-measureme.md) 0.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.11 (latest) — 2019-08-31
- 0.0.10 — 2019-08-31
- 0.0.9 — 2018-07-18
- 0.0.8 — 2017-10-21
- 0.0.7 — 2017-07-09
- 0.0.6 — 2017-05-20
- 0.0.5 — 2017-04-28
- 0.0.4 — 2017-04-16
- 0.0.3 — 2016-06-05
- 0.0.2 — 2016-06-05
- 0.0.1 — 2016-05-29

## README

# react-native-dash
[![NPM version](https://badge.fury.io/js/react-native-dash.svg)](http://badge.fury.io/js/react-native-dash)

A super simple `<Dash />` component for react-native to draw customisable dashed lines

## Installation
```sh
npm i --save react-native-dash
```

## Props
| name | desc | type | default
| --- | --- | --- | --- |
| `style` | Dash container style  | [View.PropTypes.Style](https://facebook.github.io/react-native/docs/view.html#style) | `{flexDirection = 'row'}`
| `dashGap` | Gap between two dashes | number | `2`
| `dashLength` | Length of each dash | number | `4`
| `dashThickness` | Thickness of each dash | number | `2`
| `dashColor` | Color of each dash | string | `black`
| `dashStyle` | Dashes style | [View.PropTypes.Style](https://facebook.github.io/react-native/docs/view.html#style) | {}

 - **ProTip 1**: Use `flexDirection` in style to get horizontal or vertical dashes. By default, it's `row`
 - **ProTip 2**: Use `{borderRadius: 100, overflow: 'hidden'}` in dashStyle to get rounded dotes instead of straight line dashes. 

## Usage
```javascript
import Dash from 'react-native-dash';

//draws a horizontal dashed line with defaults. Also works with flex
render() {
    return <Dash style={{width:100, height:1}}/>
}

//draws a vertical dashed line with defaults.
render() {
    return <Dash style={{width:1, height:100, flexDirection:'column'}}/>
}
```

### Dependenies
 [react-native-measureme](https://github.com/obipawan/react-native-measureme)
### Development

PRs highly appreciated

License
----
MIT License

---
_Source: https://npm.io/package/react-native-dash · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._