CODEWITHSUNDEEP
react-native
Ijonas
Ijonas

Reputation: 151

Getting access to this.props.navigator from inside NavigatorIOS.onRightButtonPress

I'm struggling with a 'onRightButtonPress' event on a NavigatorIOS component. The handler doesn't seem to get a ref to this.props.navigator.

var CBSupport  = React.createClass({

  _handleNextButtonPress: function() {
    debugger
    AlertIOS.alert("Be A Lert");
    // this.props does not contain a 'navigator' property
    this.props.navigator.push({
          component: Login,
          title: 'Login'
    });
  },

  render: function() {
    return(
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          component: Accounts,
          title: 'Accounts',
          rightButtonTitle: 'Add',
          onRightButtonPress: this._handleNextButtonPress,
        }}
      />    
    )
  }
})

I'm probably doing something wrong, but I'm trying to navigate to a new scene by tapping the right button on a NavigatorIOS component.

What am I missing?

Many thanks for any help, Ijonas.

UPDATE

After Colin Ramsay's suggestion below of using refs I got the following solution to work for me:

var CBSupport  = React.createClass({

  _handleNextButtonPress: function() {
    this.refs.nav.push({
          component: Login,
          title: 'Login'
    });
  },

  render: function() {
    return(
      <NavigatorIOS
        ref="nav"
        style={styles.container}
        initialRoute={{
          component: Accounts,
          title: 'Accounts',
          rightButtonTitle: 'Add',
          onRightButtonPress: this._handleNextButtonPress,
        }}
      />    
    )
  }
})

Many thanks Colin.

Upvotes: 4

Views: 3226

Answers (1)

Colin Ramsay
Colin Ramsay

Reputation: 16476

In the documentation it says:

It [navigator] is passed as a prop to any component rendered by NavigatorIOS.

I take this to mean any child of NavigatorIOS whereas in your example you actually have NavigatorIOS as a child of your CBSupport component. However another way of doing it could be to do this:

var CBSupport  = React.createClass({

  _handleNextButtonPress: function() {

    // Get by ref not prop
    this.refs.nav.push({
          component: Login,
          title: 'Login'
    });
  },

  render: function() {
    return(
      <NavigatorIOS
        style={styles.container},
        ref: 'nav', // added this
        initialRoute={{
          component: Accounts,
          title: 'Accounts',
          rightButtonTitle: 'Add',
          onRightButtonPress: this._handleNextButtonPress,
        }}
      />    
    )
  }
})

Notice that I have added a ref with a value of "nav" to the NavigatorIOS and we can use that to get hold of it in your event handler. Because all of the Navigator methods are automatically available on NavigatorIOS too, this should enable you to call push as desired.

Upvotes: 2

Related Questions