Click header right icon of Stack Screen to navigate to other screen in react native

Question

I want to navigate to cart screen when I click on cart icon from header right of Stack Screen. Please suggest me how to achieve the requirement. Below is my code.

App.js

import Feather from 'react-native-vector-icons/Feather';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './screens/Home';
import CartScreen from './screens/Cart';


const { width: WIDTH } = Dimensions.get('window')


const Stack = createStackNavigator();

function CartIcon() {
  return (
    <Feather name={'shopping-cart'}/>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">

        <Stack.Screen name="Home"
          component={Home}
          options={{
           headerRight: props => <CartIcon  {...props} />,
            ),
            title: 'Shop',
            headerStyle: {
              backgroundColor: 'black',
            },
          }} />


        <Stack.Screen
          name="Cart Screen"
          component={CartScreen}
          options={{
            title: 'Cart Items',
            headerStyle: {
              backgroundColor: 'black',
            },
          }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

Please help me.. Many Thanks in advance: :)

Answer 1

First import useNavigation from @react-navigation/native as below :

import { useNavigation } from '@react-navigation/native';

Now, in your CartIcon component create navigation variable using this hook and use that to navigate to cart screen as below :

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

  const navigateToCart = () => {
    navigation.navigate("CartScreen");
  }

  return (
    <Feather name={'shopping-cart'} onPress={navigateToCart}/>
  );
}

And if your Feather component doesn't have an onPress method then you can wrap your Feather component in TouchableOpacity as below :

import { TouchableOpacity } from 'react-native';

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

  const navigateToCart = () => {
    navigation.navigate("CartScreen");
  }

  return (
    <TouchableOpacity onPress={navigateToCart}>
      <Feather name={'shopping-cart'}/>
    </TouchableOpacity>
  );
}

More, apply your appropriate style on TouchableOpacity.

And one thing your should not your white space character on screen name, so also made change here :

<Stack.Screen
  // name="Cart Screen" don't use white space character in screen name
  name="CartScreen"
  component={CartScreen}
  options={{
    title: 'Cart Items',
    headerStyle: {
      backgroundColor: 'black',
    },
  }}
/>;

Answer 2

You need pass navigation props to CartIcon like this

<Stack.Screen
  name="Home"
  component={Home}
  options={({route, navigation}) => ({
    headerRight: (props) => <CartIcon {...props} navigation={navigation} />,
    title: 'Shop',
    headerStyle: {
      backgroundColor: 'black',
    },
  })}
/>;

function CartIcon({navigation}) {
  return (
    <Feather
      name={'shopping-cart'}
      onPress={() => navigation.navigate('Cart Screen')}
    />
  );
}

Answer 3

I upvoted @Venkat Sai 's answer as it was more concise. But after using it in my implementation I realized it could be shortened even more. Here it is, fewer lines of code

   <Stack.Screen
      name="Home"
      component={Home}
      options={({ route, navigation }) => ({
        headerRight: (props) => (
          <Feather
            {...props}
            name={"shopping-cart"}
            onPress={() => navigation.navigate("CartScreen", route)}
          />
        ),
        title: "Shop",
        headerStyle: {
          backgroundColor: "black",
        },
      })}
    />