react-native-navigation icon indicating copy to clipboard operation
react-native-navigation copied to clipboard

registerNavigationButtonPressedListener is not triggered on iOS

Open UtillYou opened this issue 5 years ago • 7 comments

Issue Description

registerNavigationButtonPressedListener is not triggered on iOS. I registered the registerNavigationButtonPressedListener globally in the entrance file which has a name of index.js. However, when I pressed the back icon in a screen on iOS, the event was not triggered at all. On Android, it worked very well.

Steps to Reproduce / Code Snippets / Screenshots


// In index.js of a new project
const {Navigation} = require('react-native-navigation');
const React = require('react');
const {View, Text, Button, StyleSheet} = require('react-native');

const styles = StyleSheet.create({
 root: {
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center',
   backgroundColor: 'whitesmoke',
 },
});

// Home screen declaration
const HomeScreen = (props) => {
 return (
   <View style={styles.root}>
     <Text>Hello React Native Navigation 👋</Text>
     <Button
       title="Push Settings Screen"
       color="#710ce3"
       onPress={() =>
         Navigation.push(props.componentId, {
           component: {
             name: 'Settings',
             options: {
               topBar: {
                 title: {
                   text: 'Settings',
                 },
               },
             },
           },
         })
       }
     />
   </View>
 );
};
HomeScreen.options = {
 topBar: {
   title: {
     text: 'Home',
     color: 'white',
   },
 },
};

// Settings screen declaration - this is the screen we'll be pushing into the stack
const SettingsScreen = () => {
 return (
   <View style={styles.root}>
     <Text>Settings Screen</Text>
   </View>
 );
};

Navigation.registerComponent('Home', () => HomeScreen);
Navigation.registerComponent('Settings', () => SettingsScreen);

Navigation.events().registerAppLaunchedListener(async () => {
 Navigation.setRoot({
   root: {
     stack: {
       children: [
         {
           component: {
             name: 'Home',
           },
         },
       ],
     },
   },
 });
});

Navigation.events().registerNavigationButtonPressedListener(({buttonId}) => {
 console.log('BACK FIRED:', buttonId);
});


Environment

  • React Native Navigation version: 5.0.0
  • React Native version: 0.63.2
  • Platform(s) (iOS, Android, or both?): iOS only
  • Device info (Simulator/Device? OS version? Debug/Release?): Both Simulator and Device, iOS 13, Both Debug and Release

UtillYou avatar Sep 09 '20 08:09 UtillYou

The event is currently only emitted on Android.

danilobuerger avatar Sep 11 '20 11:09 danilobuerger

Is there any ways to handle the default back action on iOS?

UtillYou avatar Sep 11 '20 11:09 UtillYou

I also have use case for this in my current app wondering if support for ios can be added

aliraza-noon avatar Jan 13 '21 15:01 aliraza-noon

I am using RNN version 7.8.4 and this event is already fired. Guess we can close this issue? cc @UtillYou @danilobuerger

nelsonprsousa avatar Mar 18 '21 15:03 nelsonprsousa

The code below , I have the same problem for IOS. navigationButtonPressed is called on ANDROID but not on IOS

class SavedBillsScreen extends Component<SavedBillsScreenProps, SavedBillsScreenState> {
  constructor(props: SavedBillsScreenProps) {
    super(props)
    this.state = {
      selectedBill: undefined,
      editModalVisible: false,
    }
    Navigation.events().bindComponent(this)
  }
  
  public static options() {
    return isAndroid
      ? { fab: FAB_PLUS_BUTTON(addBillButtonId) }
      : { topBar: { rightButtons: [NAV_ICON_BUTTON(addBillButtonId, 'nav-add')] } }
  }

navigationButtonPressed = ({ buttonId }: NavigationButtonPressedEvent) => {
    if (buttonId === addBillButtonId) {
      this.goToChooseBillTypeScreen()
    }
  }
  
  public render() {
    const { bills } = this.props

    return (
      <View style={{ flex: 1 }}>
      )
      
      }
}

jacqueswho avatar Jun 27 '22 10:06 jacqueswho

@nelsonprsousa I am on version 7.28.0 . This still does not work on IOS. using Navigation.events().bindComponent(this)

jacqueswho avatar Jun 27 '22 19:06 jacqueswho

React Native Navigation version: 7.28.0 React Native version: 0.68.2 Platform(s) (iOS, Android, or both?): both Device info (Simulator/Device? OS version? Debug/Release?): Both Simulator and Device, iOS 13, Both Debug and Release

jacqueswho avatar Jun 27 '22 19:06 jacqueswho