JSPM

React Native Dashed Line

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

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.

dashGap

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

dashLength

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

dashThickness

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

dashColor

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

dashStyle

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

style

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

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.