Correct Way of Calculating the iOS Content Inset in React Native

Question

What is the correct way of calculating the content insets (https://developer.apple.com/documentation/uikit/uiscrollview/1619406-contentinset) in a react native project?

E.g. when you use padding: 20 on the root view of the application/screen, it aligns with the native navigation title on an iPhone 11. On an iPhone 12 Pro, on the other hand, these content insets seem to be different and the content has an offset:

I also found an example of using 5% of the device width as the content inset/padding, but this still doesn't fit on all devices.

This is how it looks in the apple design guidelines (margins):

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

Answer 1

As I didn't find any solution for this, I created a small library for it: https://github.com/dioncodes/react-native-layout-margins