CODEWITHSUNDEEP
javascriptreact-nativeonbackpressedreact-native-router-flux
Raj Suvariya
Raj Suvariya

Reputation: 1664

Override back press react native router flux

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();
}

Upvotes: 5

Views: 10716

Answers (4)

wkm
wkm

Reputation: 407

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;
        }}
    />

    //component1.js, "component1" is a key in scenes registered.

    handleBackAction = () => {
        if (Actions.currentScene === "component1") {
            // do something you want and return true to intercept back event.
            return true;
        }
        return false;
    }
    componentDidMount() {
        this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackAction);
    }

    componentWillUnmount() {
        this.backHandler.remove();
    }

Upvotes: 0

Abhishek Garg
Abhishek Garg

Reputation: 3242

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 compoenents import them accordingly
import Home from './home';
import OtherScreen from './OtherScreen';
//variable 
var backButtonPressedOnceToExit = false;

export default class App extends Component {

  componentWillMount(){
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress.bind(this));
  }

  componentWillUnmount(){
    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" component={Home} initial={true}  />
              <Scene key="OtherScreen" component={OtherScreen}  />
            </Scene>
          </Router>
        </Provider>
      );
    }
}

AppRegistry.registerComponent('YourAppNameAccordingToPackageJSON', () => App);

Upvotes: 4

arenarius
arenarius

Reputation: 71

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') });

Upvotes: 5

Raj Suvariya
Raj Suvariya

Reputation: 1664

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.

Upvotes: 2

Related Questions