How does the React Native "box model" work?

Question

Does React Native size components similar to the CSS border-box box model when specifying a height and/or width, padding and a border width?

I'm just learning RN and when trying to add a custom header to an iOS app, <View style={{ height: 44, paddingTop: 20 }}> doesn't seem to produce the 64pt height I'm expecting and changing to height: 64, paddintTop: 20 gets me closer but actually seems to be bigger than the desired 64pt.

Or course, my assumption that the size is wrong is entirely empirical. I don't know how to actually measure the rendered component size to know which box model methodology is being used. And I have not run anything on device, only through the iOS simulator, I don't know if that might be causing the perceived sizing issue.

I didn't see this explained in the docs or have much luck finding an answer on the Google.

Answer 1

No, it seems to use the content-box model.

This doesn't seem to be documented, but if you set a width on an element and then add padding to it, you'll see the width increase.

UPDATE: Documentation still doesn't exist as far as I can tell, but I found a code comment here (via this SO answer) confirming that React Native indeed works off of a border-box model.