navigationButtonPressed event not firing

[amypellegrini]

What happened?

Package versions:

• react: 18.2.0
• react-native: 0.72.6
• react-native-navigation: ^7.37.1

I've following the docs to setup custom back navigation for the Android hardware back button. I'm quite new to RNN so I'm not sure if this is actually a bug or some setup missing from the docs. If it turns out I'm just missing some configuration I'll be very happy to do a PR and amend the docs myself to make this more explicit.

Here are the docs I'm following:

• https://wix.github.io/react-native-navigation/docs/customBackNavigation
• https://wix.github.io/react-native-navigation/api/events/#navigationbuttonpressed-event

Here is the Navigation setup from my index.js file:

Navigation.registerComponent('com.myApp.WelcomeScreen', () => App);
Navigation.registerComponent('com.myApp.Practice', () => Practice);
Navigation.registerComponent(
  'com.myApp.PracticeSummary',
  () => PracticeSummary,
);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setDefaultOptions({
    topBar: {
      visible: false,
      drawBehind: true,
      animate: false,
    },
    // Hardwarde back button setup as described in the docs
    hardwareBackButton: {
      dismissModalOnPress: false,
      popStackOnPress: false,
    },
  });
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'com.myApp.WelcomeScreen',
            },
          },
        ],
      },
    },
  });
});

Here is the component where the event is being handled:

class PracticeSummary extends React.Component<Props> {
  navigationEventListener: EventSubscription;

  componentDidMount() {
    this.navigationEventListener = Navigation.events().bindComponent(this);
  }

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

  navigationButtonPressed({buttonId}) {
    // this is never logged when pressing the back button
    console.log('Navigation button pressed!');
  }

  render() {
      // ...render component here
  }
}

What was the expected behaviour?

When I reach this screen and press the hardware back button in Android, the event is never fired. I know my logs are working fine because I can see the logs from anywhere else in the app. The hardware back button continues to work as normal.

I've searched through the web for better information about how to do this setup, or any known issues. I've found several recipes, some using class components and others functional components. What I'm sharing here is what I was able to do based on the available documentation. I tried other solutions as well but nothing seems to work.

Thanks so much for your patience.

Was it tested on latest react-native-navigation?

• I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

You can see the actual branch with the code here: https://github.com/amypellegrini/mpapp/tree/react-navigation-issue

Just do the usual setup for any RN application and launch on Android.

Steps:

• Add some text in the Entry title input
• Press "Start practice"
• Press "Stop"
• Press the Android hardware back button

In what environment did this happen?

React Native Navigation version: 7.37.1
React Native version: 0.72.6
Has Fabric (React Native's new rendering system) enabled: No
Node version: 18.17.1
Device model: Galaxy S10
Android version: 12