BackHandler is not working in react-native side-menu when using react-native router-flux










9















I am working on react-native to develop a sample application. Here I got an issue when I was using backHandler in the react-native side-menu component.



Actually, the side menu contains more pages! But when clicking the Android back button in the side menu pages, only once the back handler works. Here I am using react-native router-flux.



Here the back button action is called only once!



This is my code:



componentDidMount() 
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);


componentWillUnmount()
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);


handleBackPress = () =>
let isGoback = this.props.isGoback
//alert("Hi " + isGoback)

if(isGoback === "Contact Us")
//alert("Hi: " + isGoback)
Actions.BasicSideMenuMain(selectedItem:'Home');
//Actions.replace('BasicSideMenuMain')











share|improve this question
























  • What do you mean by "once the back handler function calls here main screen is Home"? Can you fix it (by editing your question, not by responding here in comments)?

    – Peter Mortensen
    Nov 14 '18 at 6:39












  • Hi I don't know about this exactly

    – Lavaraju
    Nov 20 '18 at 4:47















9















I am working on react-native to develop a sample application. Here I got an issue when I was using backHandler in the react-native side-menu component.



Actually, the side menu contains more pages! But when clicking the Android back button in the side menu pages, only once the back handler works. Here I am using react-native router-flux.



Here the back button action is called only once!



This is my code:



componentDidMount() 
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);


componentWillUnmount()
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);


handleBackPress = () =>
let isGoback = this.props.isGoback
//alert("Hi " + isGoback)

if(isGoback === "Contact Us")
//alert("Hi: " + isGoback)
Actions.BasicSideMenuMain(selectedItem:'Home');
//Actions.replace('BasicSideMenuMain')











share|improve this question
























  • What do you mean by "once the back handler function calls here main screen is Home"? Can you fix it (by editing your question, not by responding here in comments)?

    – Peter Mortensen
    Nov 14 '18 at 6:39












  • Hi I don't know about this exactly

    – Lavaraju
    Nov 20 '18 at 4:47













9












9








9








I am working on react-native to develop a sample application. Here I got an issue when I was using backHandler in the react-native side-menu component.



Actually, the side menu contains more pages! But when clicking the Android back button in the side menu pages, only once the back handler works. Here I am using react-native router-flux.



Here the back button action is called only once!



This is my code:



componentDidMount() 
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);


componentWillUnmount()
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);


handleBackPress = () =>
let isGoback = this.props.isGoback
//alert("Hi " + isGoback)

if(isGoback === "Contact Us")
//alert("Hi: " + isGoback)
Actions.BasicSideMenuMain(selectedItem:'Home');
//Actions.replace('BasicSideMenuMain')











share|improve this question
















I am working on react-native to develop a sample application. Here I got an issue when I was using backHandler in the react-native side-menu component.



Actually, the side menu contains more pages! But when clicking the Android back button in the side menu pages, only once the back handler works. Here I am using react-native router-flux.



Here the back button action is called only once!



This is my code:



componentDidMount() 
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);


componentWillUnmount()
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);


handleBackPress = () =>
let isGoback = this.props.isGoback
//alert("Hi " + isGoback)

if(isGoback === "Contact Us")
//alert("Hi: " + isGoback)
Actions.BasicSideMenuMain(selectedItem:'Home');
//Actions.replace('BasicSideMenuMain')








react-native react-native-android react-native-navigation react-native-router-flux






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 7 '18 at 19:37









BSMP

2,60952435




2,60952435










asked Nov 14 '18 at 4:25









LavarajuLavaraju

9511723




9511723












  • What do you mean by "once the back handler function calls here main screen is Home"? Can you fix it (by editing your question, not by responding here in comments)?

    – Peter Mortensen
    Nov 14 '18 at 6:39












  • Hi I don't know about this exactly

    – Lavaraju
    Nov 20 '18 at 4:47

















  • What do you mean by "once the back handler function calls here main screen is Home"? Can you fix it (by editing your question, not by responding here in comments)?

    – Peter Mortensen
    Nov 14 '18 at 6:39












  • Hi I don't know about this exactly

    – Lavaraju
    Nov 20 '18 at 4:47
















What do you mean by "once the back handler function calls here main screen is Home"? Can you fix it (by editing your question, not by responding here in comments)?

– Peter Mortensen
Nov 14 '18 at 6:39






What do you mean by "once the back handler function calls here main screen is Home"? Can you fix it (by editing your question, not by responding here in comments)?

– Peter Mortensen
Nov 14 '18 at 6:39














Hi I don't know about this exactly

– Lavaraju
Nov 20 '18 at 4:47





Hi I don't know about this exactly

– Lavaraju
Nov 20 '18 at 4:47












1 Answer
1






active

oldest

votes


















1














I had the same issue this is how I solved it:
As you are using router-flux you can use Actions.currentScene to find which page you are on



handleBackPress = () => 
if(Actions.currentScene === 'mainPage') // 'mainPage' is kay of your scene
BackHandler.exitApp(); // or anything you want
return false;

Actions.pop(); // for all the pages beside mainPage in side menu always go back
return true;



Hope it works.






share|improve this answer






















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53293178%2fbackhandler-is-not-working-in-react-native-side-menu-when-using-react-native-rou%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    I had the same issue this is how I solved it:
    As you are using router-flux you can use Actions.currentScene to find which page you are on



    handleBackPress = () => 
    if(Actions.currentScene === 'mainPage') // 'mainPage' is kay of your scene
    BackHandler.exitApp(); // or anything you want
    return false;

    Actions.pop(); // for all the pages beside mainPage in side menu always go back
    return true;



    Hope it works.






    share|improve this answer



























      1














      I had the same issue this is how I solved it:
      As you are using router-flux you can use Actions.currentScene to find which page you are on



      handleBackPress = () => 
      if(Actions.currentScene === 'mainPage') // 'mainPage' is kay of your scene
      BackHandler.exitApp(); // or anything you want
      return false;

      Actions.pop(); // for all the pages beside mainPage in side menu always go back
      return true;



      Hope it works.






      share|improve this answer

























        1












        1








        1







        I had the same issue this is how I solved it:
        As you are using router-flux you can use Actions.currentScene to find which page you are on



        handleBackPress = () => 
        if(Actions.currentScene === 'mainPage') // 'mainPage' is kay of your scene
        BackHandler.exitApp(); // or anything you want
        return false;

        Actions.pop(); // for all the pages beside mainPage in side menu always go back
        return true;



        Hope it works.






        share|improve this answer













        I had the same issue this is how I solved it:
        As you are using router-flux you can use Actions.currentScene to find which page you are on



        handleBackPress = () => 
        if(Actions.currentScene === 'mainPage') // 'mainPage' is kay of your scene
        BackHandler.exitApp(); // or anything you want
        return false;

        Actions.pop(); // for all the pages beside mainPage in side menu always go back
        return true;



        Hope it works.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 6 at 11:41









        Pradnya ChoudhariPradnya Choudhari

        19614




        19614



























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53293178%2fbackhandler-is-not-working-in-react-native-side-menu-when-using-react-native-rou%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            How to read a connectionString WITH PROVIDER in .NET Core?

            Node.js Script on GitHub Pages or Amazon S3

            Museum of Modern and Contemporary Art of Trento and Rovereto