CODEWITHSUNDEEP
react-nativenavigation
pranami
pranami

Reputation: 1415

How to navigate to a new page from a header button in react native navigation

I have a header in my component as shown below:

 static navigationOptions = {

        title: 'Accounts',
       headerRight:(   <OpenCamera showImageSlider={this.showImageSlider}  /> ),
      };

OpenCamera is a component that has a camera image.OpenCamera file looks like this:

import React, { Component } from 'react';
import {Image, TouchableHighlight} from 'react-native';


    export default class OpenCamera extends Component {
        constructor(props){
        super(props);

        }

        render() {
            return(
                 <TouchableHighlight  onPress={() => {this.showImageSlider()}} >
                     <Image style={{  width: 30, height: 30, marginLeft:100, marginRight:50}} source={require('../../../assets/img/camera.png')} />
                 </TouchableHighlight>


            );
        }
    }

So, now when i click on the camera icon I want to navigate to a new page called ImageRecognitionScreen.

So, I have imported in the StackNavigator as shown below:

const ServicesStack = createStackNavigator({

  ImageRecognitionScreen:ImageRecognitionScreen

}

and in my component i have added a function like 

  showImageSlider = () => {
   this.props.navigation.navigate('ImageRecognitionScreen');
}

which I have passed in the header like :

  static navigationOptions = {

            title: 'Accounts',
           headerRight:(   <OpenCamera /> ),
          };

But, when I click on the icon, my project fails saying:

undefined is not an object(evaluation _this.props.navigation.navigate')

Can someone please help me.

Upvotes: 0

Views: 117

Answers (1)

Zaytri
Zaytri

Reputation: 2574

Building off of @Gaurav Roy's comment, props aren't available in static methods/properties. However, navigationOptions will take a callback function that uses navigation:

static navigationOptions = ({ navigation }) => ({
  title: 'Accounts',
  headerRight: (
    <OpenCamera navigation={navigation} showImageSlider={this.showImageSlider}  />
  ),
})

However, rather than passing navigation into components, I would recommend this instead:

Navigating without the navigation prop

Upvotes: 2

Related Questions