Is there anyway for onsen-UI-react to handle the android hardware back button on device?

[geohuz]

@munsterlander I guess I’ve found some clue, i just have to include cordova.js in the index.html,

<script type="text/javascript" src="cordova.js"></script>

what I want to do now is exam the current page, if the page is homepage then exit app, otherwise go to previous page, I found a script like this, I’m not sure if it’s ok to use it in onsen ui:

document.addEventListener("backbutton", function(e){
       if($.mobile.activePage.is('#homepage')){
           e.preventDefault();
           navigator.app.exitApp();
       }
       else {
           navigator.app.backHistory()
       }
    }, false);

[munsterlander]

@geohuz What you are describing is the default behavior of the back button of Android and Onsen which should not need to be coded. Is it for some reason not working?

[geohuz]

@munsterlander , as I described, the device back button always exits the app by default. For example, I have several pages which are linked by pushPage(), and I have also coded the onsen backbutton on the top of the screen to navigate back to the home, the problem is on the backbutton at the bottom of the screen, which is the android device backbutton, and tapping the button will exit the app, regardless of the navigation path. What I want is to make the device backbutton just like the onsen backbutton on the top, back to the previous page until we reach the home, and only if we are at home page, the device backbutton exit the app on tapping.

[geohuz]

@munsterlander, as you said the behavior is the onsen default, do you mean the device backbutton by default will NOT exit app? I just tried example from official documentation and found that was NOT the case, or is the problem only with onsen-react?

[munsterlander]

@geohuz This is interesting because in the apps I have developed for Android, the default behavior is to poppage until none exist then exit app. If it is always exiting the app, it sounds like (to me) that maybe the navigation structure is incorrect. How is your app setup, i.e. tabbar with embedded navigator or navigator with pages, etc?

[geohuz]

@munsterlander , here is my code (main.js), actually it is copied from official document, and I just tested, the android device backbutton always exits the app

import React from 'react';
import ReactDOM from 'react-dom';
import {Page, Tabbar, Tab, Toolbar, Navigator, Button, BackButton} from 'react-onsenui';
import 'onsenui'

var index = 0;

var MyPage = React.createClass({
  renderToolbar: function(route, navigator) {
    const backButton = route.hasBackButton
      ? <BackButton onClick={this.handleClick.bind(this, navigator)}>Back</BackButton>
      : null;

    return (
      <Toolbar>
        <div className='left'>{backButton}</div>
        <div className='center'>{route.title}</div>
      </Toolbar>
    );
  },

  handleClick: function(navigator) {
          navigator.popPage();
  },

  pushPage: function(navigator) {
    navigator.pushPage({
      title: `Another page ${index}`,
      hasBackButton: true
    });

    index++;
  },

  renderPage: function(route, navigator) {
    return (
      <Page key={route.title} renderToolbar={this.renderToolbar.bind(this, route, navigator)}>
        <section style={{margin: '16px', textAlign: 'center'}}>
          <Button onClick={this.pushPage.bind(this, navigator)}>
            Push Page
          </Button>
        </section>
      </Page>
    );
  },

  render: function() {
    return (
      <Navigator
        renderPage={this.renderPage}
        initialRoute={{
          title: 'First page',
          hasBackButton: false
        }}
      />
    );
  }
});


ReactDOM.render(<MyPage />, document.getElementById('app'));

[munsterlander]

@geohuz I am uncertain about your code as I assume there is more somewhere else (some declarations seem to be missing but I am not a React expert, so…) Here is a working codepen I just revised from the tutorial.onsen.io site.

https://codepen.io/anon/pen/RRrqyL

https://onsen.io/tutorial/index.html?framework=react&category=Reference&module=navigator

[geohuz]

@munsterlander ， yeah It is working as the backbutton in the page, but my concern is that you deploy the app to the device or simulator, the hardware backbutton(on the bottom of the device screen) just exits app(it doesn’t go back to the previous page). Not sure if you have understood the case.

[munsterlander]

@geohuz I understood the case. The aforementioned code I ran in the debugger app on Android, and it worked fine. That was why I was posting it.

[Leandro Dela Peña Norcio]

You can do it by using e.preventDefault();
Refer to the first answer in this topic and change the ‘backbutton’ function with.

function(e) {
e.preventDefault();
//do something
}

This would prevent the app from exiting after tapping the hardware back button. Hope it helps.