registerNavigationButtonPressedListener is not triggered on iOS
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
The event is currently only emitted on Android.
Is there any ways to handle the default back action on iOS?
I also have use case for this in my current app wondering if support for ios can be added
I am using RNN version 7.8.4 and this event is already fired. Guess we can close this issue? cc @UtillYou @danilobuerger
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 }}>
)
}
}
@nelsonprsousa I am on version 7.28.0 . This still does not work on IOS. using Navigation.events().bindComponent(this)
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