react-navigation passing function as props to custom header component

Question

I used react-navigation 4 in my react native app. I want to use my custom header component for my screen header. My navigator is like this:

const MapTab = createStackNavigator({
  MapContainer: {
    screen: MapContainer,
    navigationOptions: {
      header: props => 
        <HeaderMap openDrawer={props.navigation.getParam('openDrawer')} />,
    },
  },
});

As we can see, I need to pass openDrawer function to my <HeaderMap> to open the screen drawer when it pressed. And in my screen, I've set openDrawer function body as navigation param on didMount event.

componentDidMount() {
  this.props.navigation.setParams({ openDrawer: this.drawer.openDrawer.bind(this) });
}

And I call it on HeaderMap as below:

<TouchableOpacity onPress={() => this.props.openDrawer()}>
   <Icon name="ios-menu" color={colors.white} size={30} />
</TouchableOpacity>

But it doesn't work as expected. I always get error like this on button pressed: Cannot read property 'getParam' of undefined. I think the props.navigation is undefined when I call getParam.

Any insight of this case? TiA.

Mubashir Ali · Accepted Answer · 2019-10-08 11:09:51Z

2

I have tried the same code as follow:

const MyNavigator = createStackNavigator({


'My Pharmacy': {
    screen: Home,
    navigationOptions: {
      header: props => 
        <HeaderComp value={props} />,
    },

  },

The HeaderComp is:

    class HeaderComp extends Component{
      componentDidMount(){
      console.log('header props are: ',this.props)
    }

    render(){
      return(
        null
        )
      }
    }

After consoling the props I have get the navigation object.

So your props are working fine but there is something wrong in setting params. If you passed the data from outside this stack then you have to pass it through screenProps. Otherwise if you set params inside 'MapContainer' screen then there is no need to do that cause header component already get it. Try it and if still getting the same problem please add some more detail in question about from where you pass the params and where to get it.

answered Oct 8, 2019 at 11:09

Mubashir Ali

782 silver badges5 bronze badges

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

7 Comments

Justinus Hermawan Over a year ago

Yes, I setParams only inside MapContainer screen and should be received by the header of that screen too. So the params scope is still in that stack for sure.

Justinus Hermawan Over a year ago

I just checked it again and the navigation is exist in the props, but getParam('...') returns nothing.

Mubashir Ali Over a year ago

Try to pass the params like ({openDrawer:this.drawer.openDrawer})

Mubashir Ali Over a year ago

Also try to add some temporary data in setParam and try to get it in header. Check if it works or not??

Mubashir Ali Over a year ago

Okay. Static is also one of the solution to it.

|

Collectives™ on Stack Overflow

react-navigation passing function as props to custom header component

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related