Build ZigzagView React Native Component Using For Tickets And Receipts

In this post, I will share with you one of the GitHub Repository ZigzagView React Native Component Using For Tickets And Receipts.

React Native ZigzagView:

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.

Please comment, Like and share this repository and wants to improve WhatsApp us.