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();
}
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();
}
4 Answers
Reset to default 5To 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') });
React Native | react-native-router-flux | Redux | Android Back button listener ,handle back press on android while using react native.
// below code works with Android + react native + react-native-router-flux
// this is final index.js file code from where control whole app navigation
import { BackHandler, ToastAndroid } from 'react-native';
import React,{Component} from 'react';
import { Router, Scene, Actions } from 'react-native-router-flux';
import { Provider } from 'react-redux';
// as per your poenents import them accordingly
import Home from './home';
import OtherScreen from './OtherScreen';
//variable
var backButtonPressedOnceToExit = false;
export default class App extends Component {
ponentWillMount(){
BackHandler.addEventListener('hardwareBackPress', this.onBackPress.bind(this));
}
ponentWillUnmount(){
BackHandler.removeEventListener('hardwareBackPress', this.onBackPress.bind(this));
}
onBackPress() {
if (backButtonPressedOnceToExit) {
BackAndroid.exitApp();
} else {
if (Actions.currentScene !== 'Home') {
Actions.pop();
return true;
} else {
backButtonPressedOnceToExit = true;
ToastAndroid.show("Press Back Button again to exit",ToastAndroid.SHORT);
//setting timeout is optional
setTimeout( () => { backButtonPressedOnceToExit = false }, 2000);
return true;
}
}
}
render() {
return(
<Provider store={store}>
<Router backAndroidHandler={this.onBackPress} >
<Scene key="root" }>
<Scene key="Home" ponent={Home} initial={true} />
<Scene key="OtherScreen" ponent={OtherScreen} />
</Scene>
</Router>
</Provider>
);
}
}
AppRegistry.registerComponent('YourAppNameAccordingToPackageJSON', () => App);
Alright! I found the way to it.
From wherever I am opening this scene I can pass onBack callback like this Actions.Home({onBack: () => console.log('custom back callback') });
This way I can provide dynamic back callback every time I open that scene.
face this problem too, but i did not add onBack in props as Raj post, if you have many places to override ,it will be very annoying to add onBack prop. What i do is to override RNRF's default onBackPress function.
//App.js
<Router
scenes={scenes}
createReducer={reducerCreate}
getSceneStyle={getSceneStyle}
backAndroidHandler={() => {
let cs = Actions.currentScene;
if (cs === 'sc1' || cs === 'sc2') {
} else {
// default, pop back
Actions.pop();
}
return true;
}}
/>
//ponent1.js, "ponent1" is a key in scenes registered.
handleBackAction = () => {
if (Actions.currentScene === "ponent1") {
// do something you want and return true to intercept back event.
return true;
}
return false;
}
ponentDidMount() {
this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackAction);
}
ponentWillUnmount() {
this.backHandler.remove();
}