react native - Can't access this.props.navigator -

i've been creating views way:

var settingsview = react.createclass({   render: function() {     return (       <view>         <touchablehighlight onpress={this.donepressed}>           //left out styling code simplicity         </touchablehighlight>       </view>     );   },    donepressed: function() {     this.props.navigator.pop();   }, }); 

this working fine. donepressed event handler that's hooked touchablehighlight in render (not shown).

today tried refactor this:

class settingsview extend react.component {   render() {     //same stuff above   }    donepressed() {     this.props.navigator.pop();   } } 

this rendered settings screen normal. when donepressed triggered, screen turned red saying can't find this.props.navigator.

i'm not sure going on here, please me out!

edit:

this screen brought via touch event handler different page via method:

settingstapped: function() {   this.props.navigator.push({     name: 'settingsview',     component: settingsview,   }) }, 

i've tried add passprops: this.props.navigator within settingstapped too. i'm confused why changing way create class make this.props.navigator invisible.

i think reason wasn't working because using classes opposed createclass function, this no longer bound correct scope. may need use es6 fat arrow function this lexically bound correct scope, so:

onpress={ () => this.donepressed() } 

you work:

onpress={ this.donepressed.bind(this) }