Newline Pending Merge

    react-native-dashed-line
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    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.

    Install

    npm i react-native-dashed-line

    DownloadsWeekly Downloads

    3,751

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    7.82 kB

    Total Files

    9

    Last publish

    Collaborators

    • rbrnx