0.2.0 • Published 2 years ago
react-native-zigzag-lines v0.2.0
react-native-zigzag-lines
Zig-zag border for using on tickets or receipts
Installation
yarn add react-native-zigzag-lines
This package depends on react-native-svg
, make sure to install it
Usage
import React, { useState } from "react"
import { View } from "react-native"
import ZigzagLines from "react-native-zigzag-lines"
const App = () => {
const [width, setWidth] = useState()
return <View
style={{
flexDirection: "column",
justifyContent: "center",
backgroundColor: "#DEDEDE",
}}
>
{typeof width == 'number' && <ZigzagLines
width={width}
backgroundColor="#DEDEDE"
color="#FFF"
/>}
<View
style={{ backgroundColor: "#FFF" }}
onLayout={e => setWidth(e.nativeEvent.layout.width)}
/>
{typeof width == 'number' && <ZigzagLines
position="bottom"
width={width}
backgroundColor="#DEDEDE"
color="#FFF"
/>}
</View>
}
Properties
Name | Type | Description | Default | Required |
---|---|---|---|---|
width | number | length of zigzag border | 360 | Yes |
height | number | height of zigzag jags | 10 | No |
position | "bottom" \| "top" | position of zigzag border | "top" | No |
backgroundColor | string | background color of container | #DEDEDE | No |
color | string | color of zigzag jags | #FFF | No |
jagWidth | number | width of zigzag jags | 15 | No |
jagBottom | number | padding bottom of zigzag jags | 0 | No |
style | StyleProp<ViewStyle> | style of container | No | |
svgProps | SvgProps | properties of Svg component | No | |
pathProps | PathProps | properties of Path component | No |
Note
svgProps
does not acceptstyle
,width
,height
, andviewBox
propertiespathProps
does not acceptd
, andfill
properties