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



  • Couldn’t find a reference in the onsen react documentation, looked the source code and still couldn’t get a clue. But I saw some solutions in the forum but related to onsen-javascript. Could somebody point out the official way to do this? Thanks a lot!



  • @geohuz From my SO answer:

    Assuming you are using version 2, the following documents will aid you:

    https://onsen.io/v2/docs/js/ons.html#method-setDefaultDeviceBackButtonListener

    This is commonly utilized like this:

    ons.ready(function () {
        ons.disableDeviceBackButtonHandler();
        document.addEventListener('backbutton', function () {}, false);
    });
    

    Feel free to put in the empty function whatever code you want or a call to your navigation function.



  • @munsterlander, thanks for your information! Now my question is, where should I put this event handler in the react source code? Thanks



  • Ok, I tried to put the code in to the main.js which is auto generated from the onsen-react template, but it seems that the device backbutton didn’t get disabled.



  • @geohuz Can you post your JS code?



  • Here you go:

    I tried adding the following code into the main.js (in the onsen react scaffoldings) :

    import ons from 'onsenui'
    ...
    
    ons.ready(function () {
        ons.disableDeviceBackButtonHandler();
        document.addEventListener('backbutton', function () {}, true);
    });
    
    

    But it doesn’t work, the app just exits upon tapping the device back button



  • @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);
    


  • @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?



  • @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.



  • @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?



  • @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?



  • @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'));
    


  • @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



  • @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.



  • @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.


Log in to reply