React Navigation between 3 pages - react-native

Question

I am making react native expo app. And i have some problems with react navigations. I have 3 pages:
main.js -> page1.js -> page2.js
I am making navigation between this 3 pages. But when i navigate to each page it making 1 more header. So when i navigate to 3 page i have 2 headers. One header from the page2.js and second from page1.js
I want to have just only one header that is from current page. What i need to do to have this? I need to add one more page where is going to be navigation between this pages? Whatn i need to add? Help me please
Code:
// main.js createStackNavigator:
export default createStackNavigator(
{
Main: {
screen: Main,
navigationOptions: {
header: null,
},
},
Page1: {
screen: Page1,
navigationOptions: ({ navigation }) => ({
headerTitle: "Page1",
}),
},
},
{
initialRouteName: 'Main',
}
);
// Page1.js createStackNavigator:
export default createStackNavigator(
{
Page1: {
screen: Page1,
navigationOptions: {
header: null,
},
},
Page2: {
screen: Page2,
navigationOptions: ({ navigation }) => ({
headerTitle: "Text",
}),
},
},
{
initialRouteName: 'Page1',
}
);
// Page2:
export default createStackNavigator(
{
Page2: {
screen: Page2,
navigationOptions: {
header: null,
},
},
},
{
initialRouteName: 'Page2',
}
);

Answer 1

In your second stack navigator you can add the property headerMode: 'none' under initialRouteName. This will hide the header.

Answer 2

Every StackNavigator you use will render a new Header. In your code you are nesting 3 Stacks. Everytime you navigate to each on of them they will render their Header.
Your parentNavigator will have his first header, leaving it global for the whole time. When you navigate to Page1, this will render his header without hiding his parent header. When you navigate to Page2 same thing, leaving 3 headers from 3 stackNavigators.
If you'll leave the navigation as-is, you have to dinamically hide the header on each on of your stacks.
Taking your first navigator:
{
Main: {
screen: Main,
navigationOptions: {
header: null,
},
},
Page1: {
screen: Page1,
navigationOptions: ({ navigation }) => ({
headerTitle: "Page1",
defaultNavigationOptions:{
header:null //this will hide the header if you are in Page1
}
}),
},
},
{
initialRouteName: 'Main',
}
);
Doing this you will hide the header for Page1, and as Page1 is a stack you will have just the Page1 header.
I don't know how you thinked about navigating between these screens, as this solution would make it harder to navigate from page1 back to the parent Main screen.