View hidden by inner view

I have wrapped my content in a SafeAreaView and then another View component. However, the SafeAreaView and View both are somehow hidden/overwritten by the secondary View which has the style of the containerTop

Here, the SafeAreaView (red) shows up at the bottom but not at the top. Similarly if I add a background color to the top most View, I don't see any change on the screen. I tried to add zIndex:1 but it doesn't work. At the top, the backgroundColor from the containerTop covers up the entire area.

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? Why is the View and SafeAreaView not showing up at the top?