Skip to content

A dependency free React Native component to render dashed/dotted lines

License

Notifications You must be signed in to change notification settings

RBrNx/react-native-dashed-line

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native Dashed Line

A dependency free React Native component to render dashed/dotted lines

Current npm package version. Bundle size react-native-dashed-line is released under the MIT license.



Contents


Installation

You can install via Yarn or npm

yarn add react-native-dashed-line
npm install react-native-dashed-line

Usage Guide

Just need to import it, easy peasy!

import DashedLine from 'react-native-dashed-line';

return (
  <View style={{ padding: '5%', height: '100%' }}>
    <DashedLine dashLength={5} />

    <DashedLine dashLength={10} dashThickness={8} />

    <DashedLine dashLength={10} dashThickness={8} dashGap={5} />

    <DashedLine dashLength={10} dashThickness={8} dashGap={5} dashColor='#c32626' />

    <DashedLine dashLength={10} dashThickness={8} dashGap={5} dashColor='#c32626' dashStyle={{ borderRadius: 5 }} />

    <DashedLine axis='vertical' dashLength={5} />
  </View>
);

Example screenshot


API Reference

Here is a list of all of the props that react-native-dashed-line can accept

axis

Axis of the line, can be either horizontal or vertical. Defaults to horionztal.

type default required
string horizontal NO

dashGap

Length of the gap in pixels between each dash, defaults to 2.

type default required
number 2 NO

dashLength

Length of each dash stroke in pixels, defaults to 4.

type default required
number 4 NO

dashThickness

Defines the thickness of each dash stroke in pixels, defaults to 2.

type default required
number 2 NO

dashColor

Defines the color of the dashed line, defaults to Black #000. Any valid React Native colour can be provided.

type default required
string #000 NO

dashStyle

Allows for custom View styles to be passed to each dash.

type required
Object | Array NO

style

Allows for custom View styles to be passed to each dashed line container.

type required
Object | Array NO

Contributing

I am more than happy to accept any contributions anyone would like to make, whether that's raising an issue, suggesting an improvement or developing a new feature.

About

A dependency free React Native component to render dashed/dotted lines

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published