Override back press react native router flux

Question

I am using react native router flux in my react native app. I want to override the back button press event as I want to add confirmation popup before going back. I have searched a lot but all the links I found was for overriding hardware back button press of Android. I not only want to override the hardware back press but also want to override the back button press event in the navigation bar (for both Android and iOS). Please help me out here.

Edit: I found one way to override the back press event by adding two props in my scene back and onBack. But now problem is I want this backpress to be conditional. I am passing a boolean prop edit to this scene. If the edit is true then only I want to override the backpress otherwise I just want the default one. So how can I change the Scene parameter in my Router.js using the props being passed to that scene?

sudo code

if(edit){
   openConfirmationDialog();
} else {
   Actions.pop();
}

Answer 1

To me, the above solution by @Raj Suvariya worked but only if I added a 'renderBackButton' callback to the scene whose 'onBack' I wanted to customize (the 'Home' scene in Raj's example): So this was added to the scene's definition:

renderBackButton={()=>{}}

And this was added upon navigation to the page, same as in Raj's answer above:

Actions.Home({onBack: () => console.log('custom back callback') });