CODEWITHSUNDEEP
react-native
yogeshwar nair
yogeshwar nair

Reputation: 813

Handling the BackAndroid in ReactNative

I have a Navigator in an Android react native application. I'm using navigator.push() to navigate to a different page. It would seem natural that the back button would pop the navigator and to go back one page, but that's not what's happening.After searching a lot I get a function for the same problem but i think i am placing it in wrong manner please look at this help me out.

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

var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;
componentWillMount = () => {
BackAndroid.addEventListener('hardwareBackPress', () => Actions.pop());
};
var PageOne = React.createClass({
  _handlePress() {
    this.props.navigator.push({id: 2,});
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
        <Text style={styles.welcome}>Greetings!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go to page two</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

var PageTwo = React.createClass({
  _handlePress() {
    this.props.navigator.pop();
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'purple'}]}>
        <Text style={styles.welcome}>This is page two!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go back</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

var SampleApp = React.createClass({
  _renderScene(route, navigator) {
    if (route.id === 1) {
      return <PageOne navigator={navigator} />
    } else if (route.id === 2) {
      return <PageTwo navigator={navigator} />
    }
  },

  _configureScene(route) {
    return CustomSceneConfig;
  },

  render() {
    return (
      <Navigator
        initialRoute={{id: 1, }}
        renderScene={this._renderScene}
        configureScene={this._configureScene} />
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'white',
  },
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;

Upvotes: 2

Views: 72

Answers (1)

JainZz
JainZz

Reputation: 612

BackAndroid should return true or false for proper working.

Try this:

    componentWillMount = () => {
        BackAndroid.addEventListener('hardwareBackPress', () => 
            const lengthOfNavigator = this.props.navigator.getCurrentRoutes();
            if (lengthOfNavigator.length !== 1) {
                this.props.navigator.pop();
                return true;
            } else {
                return false;
            }
       );
   };

getCurrentRoutes is used to get all the components pushed in the navigator stack.

Upvotes: 1

Related Questions