The application closes when I pressed the android button when using the reaction to the native

Question

I am new to native reaction. I have two pages in my application. When I click the back button, I want to open the previous page, but when I click the back button, the application approaches. What can be done to solve this problem?

My code is:

'use strict';

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TextInput,
  TouchableHighlight
 } from 'react-native';
import ToolbarAndroid from 'ToolbarAndroid';
import ActionButton from 'react-native-action-button';
import backAndroid from 'react-native-back-android';
import {hardwareBackPress} from 'react-native-back-android';

class AwesomeProject extends Component {
  renderScene(route, navigator) {
    if(route.name == 'HomePage') {
      return <HomePage navigator={navigator} {...route.passProps}  />
    }
    if(route.name == 'FormBuilderPage') {
      return <FormBuilderPage navigator={navigator} {...route.passProps}      />
    }
  } 

  render() {
    return (
      <Navigator
        style={{ flex:1 }}
        initialRoute={{ name: 'HomePage' }}
      renderScene={ this.renderScene } />
    )
  }
}
class BackButtonEvent extends React.Component{
  handleHardwareBackPress(){
    if(this.sate.isOpen()){
      this.handleClose();
      return true;
    }
  }
}
var HomePage = React.createClass({
  _navigate(name) {
    this.props.navigator.push({
      name: 'FormBuilderPage',
      passProps: {
        name: name
  }
    })
  },
  render() {    
    return (
      <View style={styles.container}>        
        <ToolbarAndroid style = {styles.toolbar}>
          <Text style = {styles.titleText}> Data Collector </Text>
        </ToolbarAndroid>
         <ActionButton 
           source = {require('./icon_container/ic_plus_circle_add_new_form.png')} 
           onPress = {this._navigate}   
          >
         </ActionButton>
       </View>
    )
  }
})

var FormBuilderPage = React.createClass({

  render() {    
    return (
      <View style={styles.container}>
        <ToolbarAndroid style = {styles.toolbar}>
          <TextInput placeholder = "Text here"/>
        </ToolbarAndroid>
      </View>
    )
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  toolbar: {
    height: 56,
    backgroundColor: '#3F51B5'
  },
  titleText: {
    color: '#fff',
  }
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Answer 1

You need to use the API BackAndroidfor React Native. This is a snippet from my sample project.

BackAndroid.addEventListener('hardwareBackPress', () => {

    var flag = false;

    if(_route.name==="newbooking"){
        Alert.alert(
            "Confirmation", 
            "Are you sure you want to cancel?",
            [
                {text: 'No', onPress: () => console.log('OK Pressed!')},
                {text: 'Yes', onPress: () => {_navigator.pop();}}
            ]
        );
        return true;
    }
    else{
        flag = true;
    }
    if (_navigator.getCurrentRoutes().length === 1  ) {
        return false;
    }
    if(flag){

        _navigator.pop();
        return true;
    }

});

You can see how I implemented it here !