Using SVG Pattern as Background

Question

React-Native-svg supports SVG pattern, however, I am not sure how to apply it... When I try the minimal example from the documentation, I get a blanc screen, white screen.

<View
    style={{paddingTop: 20,
    height: '100%',
    flex: 1,
    backgroundColor: 'white'}}>
    <Svg width="100%" height="100%" viewBox="0 0 800 400">
        <Defs>
            <Pattern
                id="TrianglePattern"
                patternUnits="userSpaceOnUse"
                x="0"
                y="0"
                width="100"
                height="100"
                viewBox="0 0 10 10">
                <Path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
            </Pattern>
        </Defs>
    </Svg>
</View>

Why is that?

Answer 1

As @Robert Longson pointed out in a comment below the Q. You need a shape (like a rect or ellipse) with the id given in the pattern.

 <Svg width="100%" height="100%" viewBox="0 0 800 400">
      <Defs>
        <Pattern
          id="TrianglePattern"
          patternUnits="userSpaceOnUse"
          x="0"
          y="0"
          width="100"
          height="100"
          viewBox="0 0 10 10"
        >
          <Path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
        </Pattern>
      </Defs>
      <Rect fill="none" stroke="blue" x="1" y="1" width="798" height="398" />
      <Ellipse
        fill="url(#TrianglePattern)" // make sure this is the id given in the pattern
        stroke="black"
        strokeWidth="5"
        cx="400"
        cy="200"
        rx="350"
        ry="150"
      />
    </Svg>