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:

receipt

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,

NameTypeDescriptionDefaultRequired
surfaceColorstringbackground color of content container’s view, and zigzag jagsNo
backgroundColorstringbackground color of wrapper viewNo
topbooleanif true, then show zigzag border toptrueNo
bottombooleanif true, then show zigzag border bottomtrueNo
zigzagPropsZigzagLinesPropsproperties of both zigzag linesNo
styleViewStylestyle of wrapper viewNo
contentContainerStyleViewStylestyle of content container’s viewNo
Properties To Build Zigzag View

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 backgroundColorcolorwidth, and position attributes.

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

Default image
Lingaraj Senapati
Hey There! I am Lingaraj Senapati, the Co-founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.
Articles: 217

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply