react-native-dash

by obipawan

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

143 Stars 33 Forks Last release: about 1 year ago (v0.0.10) 39 Commits 9 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-native-dash

NPM version

A super simple

 component for react-native to draw customisable dashed lines

Installation

npm i --save react-native-dash

Props

| name | desc | type | default | --- | --- | --- | --- | |

style
| Dash container style | View.PropTypes.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 | {}
  • 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

import Dash from 'react-native-dash';

//draws a horizontal dashed line with defaults. Also works with flex render() { return }

//draws a vertical dashed line with defaults. render() { return }

Dependenies

react-native-measureme

Development

PRs highly appreciated

License

MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.