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

Question

I've been creating my views this way:
var SettingsView = React.createClass({
render: function() {
return (
<View>
<TouchableHighlight onPress={this.donePressed}>
//left out styling code for simplicity
</TouchableHighlight>
</View>
);
},
donePressed: function() {
this.props.navigator.pop();
},
});
This is working fine. donePressed is an event handler that's hooked up with a TouchableHighlight in render (not shown).
Today I tried to refactor it to this:
class SettingsView extend React.Component {
render() {
//same stuff as above
}
donePressed() {
this.props.navigator.pop();
}
}
This rendered the settings screen as normal. But when donePressed triggered, screen turned red saying they can't find this.props.navigator.
I'm not sure what is going on here, please help me out!
Edit:
This screen is brought up via another touch event handler from a different page via this method:
settingsTapped: function() {
this.props.navigator.push({
name: 'SettingsView',
component: SettingsView,
})
},
I've also tried to add passProps: this.props.navigator within settingsTapped too. What I'm most confused is why changing the way I create the class could suddenly make this.props.navigator invisible.

Answer 1

I think the reason it wasn't working is that because you are using Classes as opposed to the createClass function, this is no longer bound to the correct scope. You may need to use an es6 fat arrow function to get this lexically bound to the correct scope, like so:
onPress={ () => this.donePressed() }
You could also do this to get it to work:
onPress={ this.donePressed.bind(this) }