obipawan / React Native Dash
A super simple <Dash /> component for react-native to draw customisable dashed lines
Stars: ✭ 154
Programming Languages
javascript
184084 projects - #8 most used programming language
react-native-dash
A super simple <Dash />
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'srow
-
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 <Dash style={{width:100, height:1}}/>
}
//draws a vertical dashed line with defaults.
render() {
return <Dash style={{width:1, height:100, flexDirection:'column'}}/>
}
Dependenies
Development
PRs highly appreciated
License
MIT License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].