'React Native Expo: SVG appears in web but not iOS

Here is an expo snack

My end goal is to to place a rect on top of an ellipse with position: 'absolute'.
The rect does not render on an iOS simulator.
Am I going about this the wrong way?

Here is the View that wraps both svgs:

<View
    style={{ flex: 4, alignContent: "center", justifyContent: "center", borderWidth: 1 }}
  >
      <Svg height="100%" width="100%" >
        <Ellipse
          fill="green"
          strokeWidth="8"
          stroke="gray"
          rx="90"
          ry="140"
          cx={windowWidth * .5}
          cy={windowHeight * .5}
        />
      </Svg>
      <View style={{ position: "absolute", top: 50, left: 50 }}>
        <Svg height="100%" width="100%" viewBox="0 0 100 100">
          <Rect fill="black" x="0" y="0" width="50" height="50" />
        </Svg>
      </View>
  </View>

Curiously, this works in Expo's web view but not in Expo's iOS view or on a local iOS simulator:

The black rect renders in web but not iOS. Web view



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source