Unable to pass props to component through navigationOptions?

Question

Based on the docs for React Navigation, this should be do-able! But I'm trying to figure out what is wrong in my setup.

Whenever I try to pass a prop through the navigation options, the child component can't see it.

My code:

import AddAlarm from '../components/AddAlarm';

export default class AlarmsScreen extends React.Component {

  static navigationOptions = {
    headerTitle: 'Alarms',
    headerLeft: <EditAlarms />,
    headerRight: (
      <AddAlarm propsTest="value" />
    ),
  };

  // ...

}

And in the component:

export default class AddAlarm extends React.Component {

    handleAlarmAdd() {
        console.log( this.props.propsTest );
    }

    // ...

}

This throws an error that the expected prop isn't found. I've even tried to just log the props object itself, and I get "undefined".

I'm using Expo and running this in the iOS simulator. Props passed in normal context (through render()'s return) work just fine.

Answer 1

did you verify the value of this in handleAlarmAdd? It'd likely that you need to write handleAlarmAdd = () => {...}

Answer 2

Your fragment code seems to be right. I would like to check how you are calling handleAlarmAdd function because if you don´t want to declare it as arrow function or bind it in constructor you have to call it like this example: onPress={() =>{this.handleAlarmAdd()}}.

Answer 3

The navigation properties can be passes using
this.props.navigation.navigate('ScreenName',{ propsTest: "Test"});

In the constructor of the navigated screen please access it using props.navigation.state.propsTest