iPhone XS Max doesn't adjust native component height

Question

When I run my code of iPhone XS it respects native navigation bar and tab bar and adjusts the height automatically. But iPhone XS Max doesn't do the same. Please check attached image.

.

I am checking on simulator as I don't have real device yet but on left as you can see iPhone XS have proper safe area where as iPhone XS Max doesn't.

What can be the reason for that?

Answer 1

There was a bug in the previous version of react-navigation, so use the latest version.

OR

Use the react-native-safe-area-view wich solves the problem.

Replace import { SafeAreaView } from 'react-navigation' to import { SafeAreaView } from "react-native-safe-area-view"

Answer 2

If you're using v1, upgrade to lasted 1.6.1 (currently) or refer to version history on npm