You can also fine-tune the behavior of SafeAreaView from react-native-safe-area-context by adjusting the edges prop.

Instead of using:

<SafeAreaView style={{ flex: 1 }}> 

Use:

<SafeAreaView style={{ flex: 1, backgroundColor: Colors.lightNavy }} edges={['top']}> 

Why?

Setting edges={['top']} applies padding only to the top (e.g. status bar area), and avoids unnecessary bottom padding that can create excessive spacing — especially on Android devices or screens with custom footers.

Avoid using:

edges={['top', 'bottom']}

...unless you specifically need bottom padding (like for gesture nav or home indicator). Otherwise, it can cause unintended extra margin at the bottom of your layout.