react-native-tear-lines
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

react-native-tear-lines

Zig-zag borders to simulate tear lines normally seen on receipts.

Installation

yarn add react-native-tear-lines

Usage

Use TearLines's onLayout method in the attached component's onLayout prop to dynamically match its width as demonstrated below:

import { View } from "react-native";
import TearLines from "react-native-tear-lines";
 
<View style={{ backgroundColor: "#CCCCCC" }}>
  <TearLines
    ref="top"
    color="#FFFFFF"
    backgroundColor="#CCCCCC">
  <View
    style={{ backgroundColor: "#FFFFFF" }}
    onLayout={e => {
      this.refs.top.onLayout(e);
      this.refs.bottom.onLayout(e);
    }} />
  <TearLines
    isUnder
    ref="bottom"
    color="#FFFFFF"
    backgroundColor="#CCCCCC">
</View>

Properties

Prop Description Default Required
isUnder true if this TearLines is used at the bottom of the attached view rather than the top. false No
color Foreground color; should match attached content view's background color. #FFFFFF No
backgroundColor Background color, should match container's background color. #CCCCCC No
tearSize Specifies how large each tear tile is. Larger values will render less tiles. 10 No
width Width can be provided if you don't want to use the onLayout method to dynamically match the attached content view. None No

License

MIT License. © Kenneth Ma

Package Sidebar

Install

npm i react-native-tear-lines

Weekly Downloads

177

Version

1.0.5

License

MIT

Unpacked Size

136 kB

Total Files

7

Last publish

Collaborators

  • kenmaca