Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-native-zigzag-view

mutagen-d1.2kISC0.2.0TypeScript support: included

ZigzagView for using for tickets, and receipts

react-native, zig-zag, borders, receipts, react

readme

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