Overlay is smaller than parent styled components in React Native

Question

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:

import React from "react";
import { StyleSheet, View } from "react-native";

const SIZE = 50;

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.layer1} />
      <View style={styles.layer2} />
    </View>
  );
}

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",
  },
});

And here the screenshot:

Does someone know why the overlay is smaller than the background layer?

best regards and thanks!!!

Answer 1

It seems to me to be because of css box-sizing.
With the default on most browsers box-sizing: content-box;, padding and border-width are added to the height and width..
but with box-sizing: border-box;, padding and border-width are contained within the set width and height.
so..
you probably want to add box-sizing: border-box;.

I usually add it to my whole document with

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

---

Edit (after screenshot added)

The problem is not that one circle is smaller... it's just that the darker border is peeking through from underneath.

Here is example where you can change the colour and visibility to make what is wrong obvious. Run the snippet and check the second checkbox to quickly see it.

function colourChange(e) {
  var target = e.target.getAttribute('data-target');
  var style = e.target.getAttribute('data-style');
  var col = e.target.value;
  document.getElementById(target).style[style] = col;
}

function visChange(e) {
  var target = e.target.getAttribute('data-target');
  document.getElementById(target).style.display = (e.target.checked) ? 'block' : 'none';
}

function toFront(e) {
	var other = 'layer1';
	if (e.target.value == 'layer1') {
  	var other = 'layer2';
  }
  var otherz = document.getElementById(other).style.zIndex;
	var layer = document.getElementById(e.target.value);
	layer.style.zIndex = parseInt(otherz) + 1;
}

document.getElementById('border-col1').addEventListener('change', colourChange);
document.getElementById('border-col2').addEventListener('change', colourChange);
document.getElementById('background-col1').addEventListener('change', colourChange);
document.getElementById('background-col2').addEventListener('change', colourChange);
document.getElementById('vis1').addEventListener('change', visChange);
document.getElementById('vis2').addEventListener('change', visChange);
document.getElementById('front1').addEventListener('change', toFront);
document.getElementById('front2').addEventListener('change', toFront);

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

#container {
    flex: 1;
    background-color: white;
    align-items: center;
    justify-content: center;
  }
  #layer1 {
    width: 50px;
    height: 50px;
    border-width: 3px;
    border-radius: 25px;
    border-color: black;
    position: absolute;
    border-style: solid;
  }
  #layer2 {
    width: 50px;
    height: 50px;
    border-width: 3px;
    border-radius: 25px;
    border-color: white;
    position: absolute;
    border-style: solid;
  }
  
#inputs {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px;
}

<div id="container">
  <div id="layer1" style="z-index:1;"></div>
  <div id="layer2" style="z-index:2;"></div>
</div>
<div id="inputs">
  <div>
    border colours  
  </div>
  <input type="color" id="border-col1" data-target="layer1" data-style="borderColor" value="#000000">
  <input type="color" id="border-col2" data-target="layer2" data-style="borderColor" value="#ffffff">
  <div>
    background colours  
  </div>
  <input type="color" id="background-col1" data-target="layer1" data-style="backgroundColor" value="#ffffff">
  <input type="color" id="background-col2" data-target="layer2" data-style="backgroundColor" value="#ffffff">
  <div>
    visibility<br/>(display block / none)  
  </div>
  <input type="checkbox" id="vis1" data-target="layer1" checked>
  <input type="checkbox" id="vis2" data-target="layer2" checked>
  <div>
    in front  
  </div>
  <input type="radio" id="front1" name="front" value="layer1">
  <input type="radio" id="front2" name="front" value="layer2">
</div>