Need help with react-native-dash?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

obipawan
157 Stars 33 Forks 39 Commits 7 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 50,252
HTML
Sass
commonj...
npm
3 commits
# 123,858
React N...
Objecti...
Java
tinder
3 commits
# 355,650
Objecti...
C#
2 commits
# 31,860
JavaScr...
Babel
test-fr...
microfr...
2 commits
# 671,688
feature...
C#
Shell
HTML
1 commit
# 2,290
JavaScr...
userdef...
React N...
Electro...
1 commit
# 233,532
React
TypeScr...
Objecti...
React N...
1 commit

react-native-dash

NPM version

A super simple

 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 }

//draws a vertical dashed line with defaults. render() { return }

Dependenies

react-native-measureme

Development

PRs highly appreciated

License

MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.