react-native-dashed-line

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.

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.