react-native-zigzag-view

ZigzagView for using for tickets, and receipts

Installation

yarn add react-native-zigzag-view

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

Usage

import React from "react"
import { Text, View } from "react-native"
import ZigzagView from "react-native-zigzag-view"

const Receipt = () => {
  return <ZigzagView
    backgroundColor="#CCC"
    surfaceColor="#FFF"
  >
    {Content of receipt}
  </ZigzagView>
}

Properties

Inherits View props

| Name | Type | Description | Default | Required | | ------------------------ | ----------- | --------------------------------------------------------------- | -------- | -------- | | surfaceColor | string | background color of content container's view, and zigzag jags | | No | | backgroundColor | string | background color of wrapper view | | No | | top | boolean | if true, then show zigzag border top | true | No | | bottom | boolean | if true, then show zigzag border bottom | true | No | | zigzagProps | ZigzagLinesProps | properties of both zigzag lines | | No | | style | ViewStyle | style of wrapper view | | No | | contentContainerStyle | ViewStyle | style of content container's view | | No |

Notes

• backgroundColor property has precedence over corresponding attribute of style property
• surfaceColor property has precedence over backgroundColor attribute of contentContainerStyle property
• zigzagProps does not accept backgroundColor, color, width, and position attributes