CODEWITHSUNDEEP
androidreact-native
Nayra Ahmed
Nayra Ahmed

Reputation: 655

Back key react native android

I am trying to go back to previous view in my react native app using this code

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  BackAndroid, 
  Navigator
} = React;

var HomePage          = require('./HomePage');

class DetailsPage extends Component{
  constructor(props){
    super(props);
  }

  render(){
    return(
      <View style={styles.container}>
        <Text style={styles.text}>
            {this.props.description}
        </Text>
      </View>
  )
  }
}
BackAndroid.addEventListener('hardwareBackPress', function() {
     this.props.navigator.pop(); // line 32
    return true;
});

var styles = StyleSheet.create({
  container: {
    flex: 1
  },
  text:{
    color:'#000',
    textAlign:'center',
    fontWeight:'bold',
    flex:1,
    fontSize:20
  },
});
module.exports = DetailsPage;

While debugging I see that the back event is detected successfully but it crashes at this line this.props.navigator.pop() giving me this error.

Cannot read property 'props' of undefinedhandleException @ D:\React\Kora\node_modules\react-native\Libraries\JavaScriptAppEngine\Initialization\ExceptionsMana…:61handleError @ D:\React\Kora\node_modules\react-native\Libraries\JavaScriptAppEngine\Initialization\InitializeJava…:80ErrorUtils.reportFatalError @ D:\React\Kora\node_modules\react-native\packager\react-packager\src\Resolver\polyfills\error-guard.…:28guard @ D:\React\Kora\node_modules\react-native\Libraries\Utilities\MessageQueue.js:43callFunctionReturnFlushedQueue @ D:\React\Kora\node_modules\react-native\Libraries\Utilities\MessageQueue.js:86onmessage @ debuggerWorker.js:39

enter image description here

my guess it that this.props can not be accessed out side the class braces but I don't know how to overcome this problem. if I put the BackAndroid.addEventListener inside the class it gives me error

UnExpectedToken

Upvotes: 1

Views: 2148

Answers (1)

stinodes
stinodes

Reputation: 1269

edit: BackAndroid is now deprecated. You should probably be using BackHandler instead.

In your event, this does not refer to what you think it refers to. In this case, it refers to the object on which the event is called.

The way I did it in my react-native app, was by adding the event in the componentDidMount()-function of my main component (the component in which the Navigator is rendered).

I added it there the (sort of) following way:

class ViewComponent extends Component {

    ...

    componentDidMount() {
        //the '.bind(this)' makes sure 'this' refers to 'ViewComponent'
        BackAndroid.addEventListener('hardwareBackPress', function() {
            this.props.navigator.pop();
            return true;
        }.bind(this));
    }

    ...
}

It should work like this in your project.

The componentDidMount() is fired right after the initial render. You could probably also use componentWillMount(). So it adds the event right after the first time it renders. It only gets fired off once, so there are no overlapping events and stuff like that.

I wouldn't, however, add the event listener on scenes. It brings the risk of perhaps adding the event twice. Although I'm not sure if adding that event twice would actually change anything.

Upvotes: 7

Related Questions