React Navigation - nested stack navigators provide duplicate headers

Question

I have 3 pages in the format:

• Page 1
  • Page 2
    • Page 3

If I show the headers on all pages:

• Page 1
  • No Back Button (normal)
• Page 2
  • "Go Back to Page 1"
  • Displays a second header with No Back Button
• Page 3
  • "Go Back to Page 1"
  • Displays a second header to "Go Back to Page 2"
  • Displays a third header with No Back Button

I've hidden the headers on page 2 and Page 3, but that means that the header only displays "Go Back to Page 1" on the header, and never updates it for the following pages.

So clearly my nesting is broken somehow, I just can't figure out how.

The code:

const HeaderOptions = ({navigation}) => {
  return {
    headerTitle: props => (
      <Text style={{color: '#fff', fontWeight: 'bold'}}>My Site</Text>
    ),
    headerStyle: {
      backgroundColor: '#0D47A1',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    }
  };
};

const Page1Stack = createStackNavigator();

function Page1StackScreen() {
  return (
    <Page1Stack.Navigator initialRouteName="Page1">
      <Page1Stack.Screen
        name="Page1"
        component={Page1Screen}
        options={HeaderOptions}
      />
      <Page1Stack.Screen
        name="Page2"
        component={Page2StackScreen}
        options={HeaderOptions}
      />
    </Page1Stack.Navigator>
  );
}

const Page2Stack = createStackNavigator();

function Page2StackScreen() {
  return (
    <Page2Stack.Navigator>
      <Page2Stack.Screen
        name="Page2"
        component={Page2Screen}
        options={{headerShown: false}}
      />
      <Page2Stack.Screen
        name="Page3"
        component={Page3StackScreen}
        options={{headerShown: false}}
      />
    </Page2Stack.Navigator>
  );
}

const Page3Stack = createStackNavigator();

function Page3StackScreen() {
  return (
    <Page3Stack.Navigator>
      <Page3Stack.Screen
        name="Page3"
        component={Page3Screen}
        options={{headerShown: false}}
      />
    </Page3Stack.Navigator>
  );
}

Answer 1

Are you sure you need stack inside a stack? Maybe you need only one stack:

const HeaderOptions = ({navigation}) => {
  return {
    headerTitle: props => (
      <Text style={{color: '#fff', fontWeight: 'bold'}}>My Site</Text>
    ),
    headerStyle: {
      backgroundColor: '#0D47A1',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    }
  };
};

const Stack = createStackNavigator();

function StackScreen() {
  return (
    <Stack.Navigator initialRouteName="Page1">
      <Stack.Screen
        name="Page1"
        component={Page1Screen}
        options={HeaderOptions}
      />
      <Stack.Screen
        name="Page3"
        component={Page3Screen}
      />
      <Stack.Screen
        name="Page2"
        component={Page2Screen}
      />
    </Stack.Navigator>
  );
}