Is it possible to access non static methods in React Navigation's navigationOptions?

Question

In my form I need to have a submit button to the right of the header that calls the same method as the submit button at the bottom of the form.

React Navigation requires you to declare a static method called navigationOptions to pass the navigator for each screen your options.

problem with that is that I need to access the onFormSubmit() function from both of my buttons, and obviously you can't access this in static methods.

Is there any way that I can work around this somehow? I tried making a button outside of the navigation header myself to make it have a position of absolute but I can't manage to make it go over the header.

export default class EnterBookDetailsScreen extends Component {
  static navigationOptions = ({ navigation }) => ({
    headerRight: (
      <Button
        text="submit"
        primary
        raised
        style={{ container: { margin: 10 } }}
        // Is this possible?
        onPress={() => this.onFormSubmit()}
      />
    ),
  })

onFormSubmit() {
.
.
.

Here's a screenshot of what I have so that the problem makes more sense(the submit button in question is the one at the top right):

vinayr vinayr · Accepted Answer · 2017-11-02T06:21:01

static navigationOptions = ({ navigation }) => {
  const { params = {} } = navigation.state;

  return {
    headerRight: (
      <Button
        text="submit"
        primary
        raised
        style={{ container: { margin: 10 } }}
        onPress={() => params.onFormSubmit()}
      />
    ),
  }
}

componentDidMount() {
  const { navigation } = this.props;

  navigation.setParams({
    onFormSubmit: this.onFormSubmit,
  });
}

onFormSubmit = () => {
  ...
}

I'm using version 1.0.0-beta.11

Is it possible to access non static methods in React Navigation's navigationOptions?

1 Answers