CODEWITHSUNDEEP
react-native
Carlos
Carlos

Reputation: 160

React-Native: Header Right navigation inside App.js

I'm really new at react-native and while I have pretty much completed my app, I'm running into an issue with the header right button.

Situation: I have added a header right hamburger icon for all pages through app.js. Problem: I get an error "Can't find variable: navigation".

How can I pass nagivation into the header inside app.js?

import { createAppContainer, useRoute } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
const navigator = createStackNavigator(
  {
    Home: {
      screen: HomeScreen
    },
    
    Settings: {
      screen: SettingsScreen
    }

  },

  {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerRight: (
        <TouchableOpacity style={{paddingRight: 20}} onPress={ () => navigation.navigate('Settings') }><Feather name="menu" size={30} color="white" /></TouchableOpacity>
      )
     
    },
  }
);


export default createAppContainer(navigator);

Upvotes: 0

Views: 826

Answers (1)

Arbnor
Arbnor

Reputation: 2362

At the moment you are specifying an object to defaultNavigationOptions. You can also work with a function and return that object. In the arrow function you will get the navigation object to work with the navigate method.

navigationOptions: ({ navigation }) => ({
  headerRight: (
    <TouchableOpacity style={{paddingRight: 20}} onPress={ () => navigation.navigate('Settings') }><Feather name="menu" size={30} color="white" /></TouchableOpacity>
  )
}),

Upvotes: 1

Related Questions