react-native-dash
A super simple <Dash /> component for react-native to draw customisable dashed lines
Installation
npm i --save react-native-dashProps
| 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
flexDirectionin style to get horizontal or vertical dashes. By default, it'srow - ProTip 2: Use
{borderRadius: 100, overflow: 'hidden'}in dashStyle to get rounded dotes instead of straight line dashes.
Usage
; //draws a horizontal dashed line with defaults. Also works with flex { return <Dash style=width:100 height:1/>} //draws a vertical dashed line with defaults. { return <Dash style=width:1 height:100 flexDirection:'column'/>}Dependenies
Development
PRs highly appreciated
License
MIT License