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

Note

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