react-native-zigzag-lines

Zig-zag border for using on tickets or receipts

Installation

yarn add react-native-zigzag-lines

This package depends on react-native-svg, make sure to install it

Usage

import React, { useState } from "react"
import { View } from "react-native"
import ZigzagLines from "react-native-zigzag-lines"

const App = () => {
  const [width, setWidth] = useState()
  return <View
    style={{
      flexDirection: "column",
      justifyContent: "center",
      backgroundColor: "#DEDEDE",
    }}
  >
    {typeof width == 'number' && <ZigzagLines
      width={width}
      backgroundColor="#DEDEDE"
      color="#FFF"
    />}
    <View
      style={{ backgroundColor: "#FFF" }}
      onLayout={e => setWidth(e.nativeEvent.layout.width)}
    />
    {typeof width == 'number' && <ZigzagLines
      position="bottom"
      width={width}
      backgroundColor="#DEDEDE"
      color="#FFF"
    />}
  </View>
}

Properties

Name	Type	Description	Default	Required
width	number	length of zigzag border	360	Yes
height	number	height of zigzag jags	10	No
position	"bottom" | "top"	position of zigzag border	"top"	No
backgroundColor	string	background color of container	#DEDEDE	No
color	string	color of zigzag jags	#FFF	No
jagWidth	number	width of zigzag jags	15	No
jagBottom	number	padding bottom of zigzag jags	0	No
style	StyleProp<ViewStyle>	style of container		No
svgProps	SvgProps	properties of Svg component		No
pathProps	PathProps	properties of Path component		No

Note

• svgProps does not accept style, width, height, and viewBox properties
• pathProps does not accept d, and fill properties