Get current page title - react-native

Question

I am making react native expo app and i need your help.
I have structure:
main.js => page1.js => page2.js
When i move from main.js to page1.js in createStackNavigator i write title of header of page1.js, but in page1.js i hide the header of page1.js and i have all ok, but when i move to page2.js i have 3 headers!!!!
One of them i hide in page2.js but one other header i do not how to hide, because 1 header is coming from main.js but second from page1.js and i need to hide this header from main.js but if i hide it i will not have header in page1.js.
I want when i navigate to page2.js from page1.js i send data to main.js createStackNavigator. How i can do this??
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(
{
Main: {
screen: Page1,
navigationOptions: {
header: null,
},
},
Page2: {
screen: Page2,
navigationOptions: ({ navigation }) => ({
headerTitle: "Text",
}),
},
},
{
initialRouteName: 'Main',
}
);
// Page2:
export default createStackNavigator(
{
Main: {
screen: Page2,
navigationOptions: {
header: null,
},
},
},
{
initialRouteName: 'Main',
}
);

Answer 1

You are duplicating rout names, Main is used 3 times,
also page1 and page2 have 2 different routes each,
solution is to create call createStackNavigator in seperate file or in app.js like
export default createStackNavigator(
{
Main: {
screen: Main,
navigationOptions: {
header: null,
},
},
Page1: {
screen: Page1,
navigationOptions: ({ navigation }) => ({
headerTitle: "Page1",
}),
},
Page2: {
screen: Page2,
navigationOptions: ({ navigation }) => ({
headerTitle: "Text",
}),
},
},
{
initialRouteName: 'Main',
}
);
now all the screens will have same header and you can change the title in navigationOptions