I have a component, placed inside a which is positioned absolutely in the top. I've also added some colored boxes for testing.
Of course I want the component to be shown outside the notch and outside the top bar of classic iPhones.
However, it seems not to behave as expected. As you can see on the screenshots, iPhone SE has a tiny margin between the top bar and my component. This looks good. The reported inset is 20pt.
On iPhone 13 mini with a notch, there's a much larger margin between the bottom of the notch and my components.
On Android, my components are placed exactly in the top of the view, with no margin above.
The result is the same no matter if I use the useSafeAreaInsets() hook, or place my components inside a <SafeAreaView>.
From experiments with simulators I guess the safe area inset is just different on different devices, for example, 13 Mini has 50pt top inset, 13 Pro has 47 pt top inset, and X has 44 pt top inset.
Anyway, if I want the layout to look somewhat consistent, without adding additional top margins to my components that makes the total top margin even bigger on iPhone X+ with a notch, what would be the best approach to handle this?
