React-native-navigation: How to override back button action [V2]

[andrei0807]

Issue Description

[ENTER DESCRIPTION HERE]
I am going to override back button's action.
I used BackHandler.
But I can not control back button's action, and backhandler was not called.
How to solve this problem?
Please help me.
Thanks.

---

Environment

• React Native Navigation version: 2.2.5
• React Native version: 0.57.8
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): All

[jinshin1013]

You will have to use a custom BackButton, RNN does not give you a way to listen or modify the stock BackButton.

[cinder92]

same issue here, how can i override BackHandler action in Android?

[marudy]

@andrei0807 @cinder92 you may find this article about android back button handling useful.

[cinder92]

@marudy this is not working with RNN V2

[Gujie-Novade]

I solved it by using a custom back button:

1. When pushing a new screen where I want to override the button, use the options

import Icon from 'react-native-vector-icons/MaterialIcons';
/* ... */
const backIcon = await Icon.getImageSource('arrow-back', 24, '#000');
const component = {
  id: screenID,
  name: screenID,
  passProps,
  options: {
    topBar: {
      leftButtons: [
        {
          id: 'backButton',
          icon: backIcon,
        },
      ],
    },
  }
};
return Navigation.push(componentId, { component });

1. Create a HOC to implement you custom back action

import React, { Component } from 'react';
import { Navigation } from 'react-native-navigation';

const getDisplayName = WrappedComponent => WrappedComponent.displayName || WrappedComponent.name || 'Component';

export default function withCustomBackButton(WrappedComponent) {
  class WithCustomBackButton extends Component {
    componentDidMount() {
      this.navigationEventListener = Navigation.events().bindComponent(this);
    }

    componentWillUnmount() {
      if (this.navigationEventListener) this.navigationEventListener.remove();
    }

    navigationButtonPressed() {
      // Your custom action
      const { componentId } = this.props;
      Navigation.pop(componentId);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  WithCustomBackButton.displayName = `WithCustomBackButton(${getDisplayName(WrappedComponent)})`;

  return WithCustomBackButton;
}

1. When registering the screen with the custom back button, wrap it in your HOC

import withCustomBackButton from '../components/hoc/WithCustomBackButton';
/* ... */
Navigation.registerComponent('selectLocation', () => withCustomBackButton(SelectLocation));

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[bneigher]

@Gujie-Novade I tried your solution but neither the default nor the custom back button is triggering the navigationButtonPressed for me. Do you know if this works with v3?

EDIT
Oh wait - I didn't read that we need to use leftButtons instead of backButton