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>
}