Skip to content

Latest commit

 

History

History
140 lines (91 loc) · 3.42 KB

README.md

File metadata and controls

140 lines (91 loc) · 3.42 KB

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.