I am unable to set event listeners using the react-native BackHandler in a component that is placed inside a modal. I suspect that this happens because the modal is listening to the method that is passed on the onRequestClose prop.
Well, I am not sure if this is a bug or a feature request but I would suggest that you allowed us to pass a certain value (e.g null) to the onRequestClose prop as a way of flagging that there might be BackHandler event listeners being set in the Modal's child components, and that these listeners have priority (i.e override the onRequestClose of the Modal).
Environment
Environment:
- OS: macOS High Sierra 10.13.3
- Node: 9.2.0
- Yarn: 0.24.6
- npm: 5.6.0
- Watchman: 4.7.0
- Xcode: Xcode 9.2 Build version 9C40b
- Android Studio: 3.0 AI-171.4408382
Packages: (wanted => installed)
- react: 16.2.0 => 16.2.0
react-native: 0.53.0
=> 0.53.0
Steps to Reproduce
Below there is the instructions inside the child component:
class ChildComponent extends Component {
componentDidMount () {
BackHandler.addEventListener('hardwareBackPress', this._onBackPress)
}
componentWillUnmount () {
BackHandler.removeEventListener('hardwareBackPress', this._onBackPress)
}
_onBackPress = () => {
console.log('Event was triggered')
return true
}
render () {
return (
<Text>{'Some Text'}</Text>
)
}
}
export default ChildComponent
The component that has the Modal (parent) has the following instructions:
class ParentComponentWithModal extends Component {
constructor (props) {
super(props)
this.state = {
modalVisible: true
}
}
render () {
const { modalVisible } = this.state
return (
<View>
<Modal
visible={modalVisible}
onRequestClose={() => console.log('onRequestClose')}
>
<ChildComponent />
</Modal>
</View>
)
}
}
export default ParentComponentWithModal
Expected Behavior
The _onBackPress method added to hardwareBackPressed listener should be executed when the back button is pressed.
Actual Behavior
When the back button is pressed, the function defined on the onRequestClose prop is triggered. Even if no function is defined on the onRequestClose prop, the methods attached to the event listeners defined in the modal's children are not executed.