Mainam-react-native-dash-view NPM

mainam-react-native-dash-view

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

Installation

npm i --save mainam-react-native-dash-view

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 'mainam-react-native-dash-view';

//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'}}/>
}