Contents

• Installation
• Usage Guide
• API Reference
• Contributing

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.