How to add Android Back Handler for a particular screen? - react-native

Question

I have three screens MyVault, Add Doc and Add Repo. From Myvault there is one button add new doc by clicking on that Add Doc will open. Now in Add doc if user presses Back button then I want a confirmation pop up. I have one button inside add doc screen which opens Add repo screen where user can select one repo and when they click add that screen will be popped and add doc screen will be refreshed with the repo data. If I add a listener in ComponentDidMount and then remove it in ComponentWillUnmount then the issue is that even when I press back on Add repo then also the popup comes. I don't want popup on any other screens, I just want it on Add doc.
Note: I am using react native router flux for routing
I have posted this issue on this link also : https://github.com/facebook/react-native/issues/15248

Answer 1

As per react-native-router-flux documentation, event handlers can be added to buttons. You can use onExit, onLeft or onRight. Something like:
<Scene
key="AddDoc"
component={AddDoc}
onExit={() => console.log('your modal pop up logic')}
/>

Answer 2

I was able to do it with the help of onEnter and onExit props of react-native-router-flux

Answer 3

Try the below method
import React from 'react';
import {View, Text, AlertPlatform,BackAndroid} from 'react-native';
class App extends React.Component {
constructor(props) {
super(props);
}
onBackAndroid = () => {
backButtonPressedOnceToExit ? BackAndroid.exitApp() : "";
backButtonPressedOnceToExit = true;
setTimeout(() => {backButtonPressedOnceToExit = false;}, 2000);
return true;
}
componentWillMount = () => BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid.bind(this));
componentWillUnmount = () => {
BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid.bind(this));
}
render() {
return (
// Your code
);
}
}
export default App;