react-native-navigation : navigating with custom header

Question

I have a custom header for my stack navigation and I want to navigate to another page when I press on an image. But when I press the image I get an error undefined is not an object (evaluating _this.props.navigation.navigate')

In my App.js

const ProfileStackNavi = createStackNavigator({
  stackAndTab:{
    screen:ProfileTopTabNavigator,
    navigationOptions: {
      header: (
        <MyPageTabBarHeader />
      )
    },
  }
})

In my custom header class

export default class MyPageTabBarHeader extends Component {
  constructor(props) {
    super(props)
  }
  render() {
  return(
    <View style={{width:375,height:250, backgroundColor:'white'}}>
          <TouchableOpacity onPress={()=>this.props.navigation.navigate('Register')}>
                    <Image
                    style={{width:23, height:23}}
                    source{require('../Components/Assets/register.png')} />
           </TouchableOpacity>
        </View>
    </View>
    )
  };
}

I also tried <MyPageTabBarHeader navigation={this.props.navigation}/> but then it gives me the error undefined is not an object (evaluating this.props.navigation.navigate') the same error as previously but without an _ before this.

Edited

In my App.js I have createAppContainer. It looks like this:

const StartSwitchNavigator = createStackNavigator(
  {
    one:{
    screen:screenOne,
   },
 {
    two:{
    screen:ProfileStackNavi,
   }
);

const App = createAppContainer(StartSwitchNavigator);

export default App;

Have you created App container using createAppContainer. Please show your whole code. — Kishan Bharda
– Kishan Bharda, Commented Jul 11, 2019 at 4:44

displayname · Accepted Answer · 2019-07-11 20:35:49Z

4

the navigation isnt being passed properly. try passing it this way :

const ProfileStackNavi = createStackNavigator({
  stackAndTab:{
    screen:ProfileTopTabNavigator,
    navigationOptions: ({navigation}) => ({
      header: <MyPageTabBarHeader navigation= {navigation} />,
    })
  }
})

hope it helps!

answered Jul 11, 2019 at 20:35

displayname

1,0749 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

emeraldsanto · Accepted Answer · 2019-07-11 13:11:20Z

0

It seems the navigation prop isn't being passed down, that's normal for a custom header. The prop is usually only passed to screens/views. You simply have to import withNavigation from 'react-navigation' in your header component and then export default withNavigation(MyPageTabBarHeader) at the bottom of the file instead of when you declare the class.

You will then have access to the navigation prop. Here's some doc about the function.

edited Jul 11, 2019 at 13:11

answered Jul 11, 2019 at 13:06

emeraldsanto

4,7611 gold badge17 silver badges28 bronze badges

Collectives™ on Stack Overflow

react-native-navigation : navigating with custom header

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related