CODEWITHSUNDEEP
iosreact-native
eluleci
eluleci

Reputation: 3529

Handle NavigatorIOS ButtonPress in the opened component

I have NavigatorIOS in my app and I open a new Page like this and it works fine:

  var createProgramRoute = {
    component: CreateProgramPage,
    title: "Create Program",
    rightButtonTitle: "Save",
    onRightButtonPress: () => {
      // This part needs to be handled in CreateProgramPage component
    },
    passProps: {},
  };
  props.navigator.push(createProgramRoute);

CreateProgramPage class is like this

var CreateProgramPage = React.createClass({
  ...

  _onRightButtonClicked() {
    console.log("right button clicked")
  }

});

So I want to call _onRightButtonClicked() of CreateProgramPage when the RightButton of the NavigatorIOS is clicked. There is no example like this. All they have in examples are calling pop() of the navigator and that's it.

Upvotes: 3

Views: 377

Answers (2)

Suran
Suran

Reputation: 260

A. In initial component

this.props.navigator.push({
    title: 'title',
    component: MyComponent,
    rightButtonTitle: 'rightButton',
    passProps: {
        ref: (component) => {this.pushedComponent = component},
    },
    onRightButtonPress: () => {
        this.pushedComponent && this.pushedComponent.foo();
    },
});

B. In pushed component
replace onRightButtonPress func in pushed component.

componentDidMount: function() {
    // get current route
    var route = this.props.navigator.navigationContext.currentRoute;
    // update onRightButtonPress func
    route.onRightButtonPress =  () => {
        this._onRightButtonClicked();
    };
    // component will not rerender
    this.props.navigator.replace(route);
},

Upvotes: 2

Dave Sibiski
Dave Sibiski

Reputation: 1740

My suggestion would be to use some sort of Flux implementation with Actions that can be called from anywhere.

My personal favorite is Redux: https://github.com/gaearon/react-redux

The docs for the upcoming 1.0 release are really wonderful. http://gaearon.github.io/redux/

Upvotes: 0

Related Questions