react-native-dash

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

Installation

npm i --save @skyscanner/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 '@skyscanner/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

Development

PRs highly appreciated

License

MIT License