OnRightButtonPress call function in NavigatorIOS - React Native

Question

I am using onRightButton in the interactive NavigatorIOS. I would like to be able to call a function that is in the component that I click, but I cannot figure out how to achieve this. This is a sample code:

this.props.navigator.push({
  component: SingleResultView,
  title: "SomeTitle",
  rightButtonIcon: require('image!mapsmarker'),
  passProps: {
    userPosition: this.props.userPosition
  },
  onRightButtonPress: () => { SingleResultView.foo(); } // NOT WORKING!
});

How can i do this?

Answer 1

Callback refis your friend! https://facebook.imtqy.com/react/docs/more-about-refs.html#the-ref-callback-attribute

  goToResults() {
    this.props.navigator.push({
      component: SingleResultView,
      title: "SomeTitle",
      rightButtonIcon: require('image!mapsmarker'),
      passProps: {
        userPosition: this.props.userPosition,
        ref: this.onResultsRef,
      },
      onRightButtonPress: () => { this._resultsView && this._resultsView.foo(); }
    });
  }

  onResultsRef(resultsViewRef) {
    this._resultsView = resultsViewRef;
  }

Answer 2

SingleResultView not yet created, so you do not have access to its methods.

The following steps will work:

this.props.navigator.push({
  onRightButtonPress: SingleResultView.prototype.foo
});