Skip to content

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

Notifications You must be signed in to change notification settings

obipawan/react-native-dash

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-dash

NPM version

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

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published