SafeAreaView only shown at bottom

I am using SafeAreaView on multiple screens and it works fine everywhere except on one screen. Here, it shows up at the bottom but not at the top. At the top, the backgroundColor from the containerTopcovers up the entire area.

Note that the red color is only added to highlight the safeAreaView.

export const Screen: React.FunctionComponent = () => {  return (<SafeAreaView style={styles.safeContainer}><View style={styles.container}><View style={styles.containerTop}><BackArrow /><JourneyLocationsTextContainer /><View style={styles.containerOptionsSelector}><TripOptionsSelector /></View></View><View style={styles.containerMap}><MapContainer /><ButtonsContainer /></View></View></SafeAreaView>  );};const styles = StyleSheet.create({  safeContainer: { flex: 1, backgroundColor: 'red' },  container: { backgroundColor: 'white', flex: 1 },  containerTop: { flex: 1, backgroundColor: '#323443' },  containerOptionsSelector: {    marginTop: moderateScale(20),    marginLeft: moderateScale(20),  },  containerMap: { flex: 2 },});

Navigation:

<NavigationStack.Screen        name="Screen"        component={Screen}        options={{          headerShown: false,          gestureEnabled: false,          cardStyleInterpolator:            CardStyleInterpolators.forFadeFromBottomAndroid,        }}      />

How can I fix this?

If I change the background color of the container, which is currently white, I don't see any change on the screen. Seems like it's not showing that view at all. Its topped by the containerTop.