CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Vivek Mahajan
Vivek Mahajan

Reputation: 115

How to access the navigation prop in the Stack Navigator's screenOptions attribute?

I want to navigate to a particular screen using a common header button in the stack navigator.

 <NavigationContainer>
  <RootStack.Navigator 
    mode="modal"
    screenOptions={{
      headerTitleAlign: 'center',
      headerTitle: () => <SpreeLogo />,
      headerRight: (props) => <MaterialIcons style={{
        marginHorizontal: 10,
      }}
      onPress={() => console.log(props)}
      name="clear" size={28} color="black" />
    }}
  >

In the header right icon I would like to have access to the navigation prop. I've tried console logging the prop but there is no prop as navigation. How to get access to it?

Upvotes: 6

Views: 3410

Answers (3)

AperioOculus
AperioOculus

Reputation: 6821

The useNavigation hook

In a root navigator the Navigation prop may be accessed with the useNavigation hook documented here in the v6.x React Navigation Documentation.

useNavigation is a hook which gives access to navigation object. It's useful when you cannot pass the navigation prop into the component directly, or don't want to pass it in case of a deeply nested child.

useNavigation() returns the navigation prop of the screen it's inside.

Example from React Navigation docs:

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

Example using OP code:


export function MyScreen() {

//Hook to access the navigation prop of the parent screen anywhere.
// @returns — Navigation prop of the parent screen.
const navigation = useNavigation();

 return(
 <NavigationContainer>
  <RootStack.Navigator 
    mode="modal"
    screenOptions={{
      headerTitleAlign: 'center',
      headerTitle: () => <SpreeLogo />,
      headerRight: (props) => <MaterialIcons style={{
        marginHorizontal: 10,
      }}
      onPress={() => navigation.navigate('Somewhere') }
      name="clear" size={28} color="black" />
    }}
 )
}

Upvotes: 0

Farhaan
Farhaan

Reputation: 210

In React Navigation V6 you can provide a function to options

<Stack.Screen
    name="Screen"
    component={Screen}
    options={({ route, navigation }) => ({
      headerTitleAlign: "center",
      headerLeft: () => (
        <Icon
          name="arrow-back"
          onPress={() => navigation.goBack()}
          color="#fff"
          size={25}
        />
      ),

    })}
  />

Upvotes: 3

Sameer Kumar Jain
Sameer Kumar Jain

Reputation: 2135

As per documentation you can provide a function to screenOptions like below which will give you access to the navigation and from there you should be able to jump to any screen

<NavigationContainer>
  <RootStack.Navigator 
    mode="modal"
    screenOptions={({ route, navigation }) => ({
      headerTitleAlign: 'center',
      headerTitle: () => <SpreeLogo />,
      headerRight: (props) => <MaterialIcons style={{
        marginHorizontal: 10,
      }}
      onPress={() => console.log(route, navigation)}
      name="clear" size={28} color="black" />
    })}
  >...

Read the docs here https://reactnavigation.org/docs/stack-navigator and search for screenOptions.

Good Luck

Upvotes: 9

Related Questions