Header buttons

Now that we know how to customize the look of our headers, let's make them interactive!

Adding a button to the header

The most common way to interact with a header is by tapping a button to the left or right of the title. Let's add a button to the right side of the header:

Static

const MyStack = createNativeStackNavigator({
  screens: {
    Home: createNativeStackScreen({
      screen: HomeScreen,
      options: {
        headerRight: () => (
          <Button onPress={() => alert('This is a button!')}>Info</Button>
        ),
      },
    }),
  },
});

Dynamic

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerRight: () => (
            <Button onPress={() => alert('This is a button!')}>Info</Button>
          ),
        }}
      />
    </Stack.Navigator>
  );
}

When we define our button this way, you can't access or update the screen component's state in it. This is pretty important because it's common to want the buttons in your header to interact with the screen that the header belongs to. So, we will look how to do this next.

Header interaction with its screen component

To make header buttons interact with screen state, we can use navigation.setOptions inside the screen component:

Static

function HomeScreen() {
  const navigation = useNavigation('Home');
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    // Use `setOptions` to update the button that we previously specified
    // Now the button includes an `onPress` handler to update the count
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount((c) => c + 1)}>Update count</Button>
      ),
    });
  }, [navigation]);

  return <Text>Count: {count}</Text>;
}

const MyStack = createNativeStackNavigator({
  screens: {
    Home: createNativeStackScreen({
      screen: HomeScreen,
      options: {
        // Add a placeholder button without the `onPress` to avoid flicker
        headerRight: () => <Button>Update count</Button>,
      },
    }),
  },
});

Dynamic

function HomeScreen() {
  const navigation = useNavigation('Home');
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    // Use `setOptions` to update the button that we previously specified
    // Now the button includes an `onPress` handler to update the count
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount((c) => c + 1)}>Update count</Button>
      ),
    });
  }, [navigation]);

  return <Text>Count: {count}</Text>;
}

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          // Add a placeholder button without the `onPress` to avoid flicker
          headerRight: () => <Button>Update count</Button>,
        }}
      />
    </Stack.Navigator>
  );
}

Here we update headerRight with a button that has onPress handler that can access and update the component's state, since it's defined inside the component. We also specify a placeholder button without onPress in the screen's options to reserve the header space and avoid a layout shift when setOptions replaces it on mount.

Summary

• Buttons can be added to the header using headerLeft and headerRight in options
• To make header buttons interact with screen state, use navigation.setOptions inside the screen component