title: Overlay is smaller than parent styled components in React Native
body: <p>i have following problem with the styled components. I want to hide the background with a new circle, but the one in the front is smaller, even if I have the same values for size.
  Here is my code example:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import { StyleSheet, View } from "react-native";
  
  const SIZE = 50;
  
  export default function App() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;View style={styles.layer1} /&gt;
        &lt;View style={styles.layer2} /&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "white",
      alignItems: "center",
      justifyContent: "center",
    },
    layer1: {
      width: SIZE,
      height: SIZE,
      borderWidth: 3,
      borderRadius: SIZE / 2,
      borderColor: "black",
      position: "absolute",
    },
    layer2: {
      width: SIZE,
      height: SIZE,
      borderWidth: 3,
      borderRadius: SIZE / 2,
      borderColor: "white",
      position: "absolute",
    },
  });
  </code></pre>
  
  <p>And here the screenshot:
  <a href="https://i.stack.imgur.com/JFCHL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JFCHL.png" alt=""></a></p>
  
  <p>Does someone know why the overlay is smaller than the background layer?</p>
  
  <p>best regards and thanks!!!</p>