The blue lines is what the font defines as its space to render. The red lines is the actual bounds of the characters on screen. The black line is the baseline. As you can see, adding a 10px margin does not result in 10px of actual space, usually it is more due to decenders and ascenders.
This is the reason sketch and other tools show the 'gray box' that does not fit the actual characters, because that box is the size actually taken up during normal rendering. If text is laid out ignoring the box, then negative spacing has to be added to remove the descenders and ascenders which will only work for the particular font size and font and has to be hardcoded.
Also see: The nitty gritty of text rendering in sketch
And for react native in particular (and to show the gymnastics required to implement physi