React navigation custom header doesn't disappear when navigating away from screen (iOS only)

Question

I have a stack navigator where one of the screen uses a custom header:

import { createStackNavigator } from "@react-navigation/stack";
import * as React from "react";
import { Button, View } from "react-native";

const Stack = createStackNavigator();

function ScreenA({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: "center"}}>
            <Button title="Click me" onPress={() => navigation.navigate("ScreenB")} />            
        </View>
    );
}

function ScreenB({ navigation }) {
    return (
        <View style={{ flex: 1 , justifyContent: "center"}}>
            <Button title="Click me" onPress={() => navigation.navigate("ScreenA")} />
        </View>
    );
}

function TestComp() {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="ScreenA"
                component={ScreenA}
                options={{ header: () => <View style={{ height: 160, backgroundColor: "red" }}></View> }}
            />
            <Stack.Screen name="ScreenB" component={ScreenB} />
        </Stack.Navigator>
    );
}

export default TestComp;

As a result, the header of ScreenA (a red bar) is visible from ScreenB. This doesn't happen on Android where the header is properly shown ONLY on ScreenA.

How can I stop the header from ScreenA from showing on ScreenB?

Answer 1

Solved it by using <Stack.Navigator headerMode="screen"> !