React-native-dashed-line NPM

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>
);

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.