React-native: BackAndroid/BackHandler Event Listeners are not Triggered when set in a Modal's Child Component

[dvuvne]

• [X] I have reviewed the documentation
• [X] I have searched existing issues
• [X] I am using the latest React Native version

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.

As I am unsure if this issued should be posted here just on StackOverflow, I will also create a post there.

[react-native-bot]

Thanks for posting this! It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

Thank you for your contributions.

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

[jerolimov]

@dauane can you check if my PR #19077 helps here?

[dvuvne]

Apologies for the late response @jerolimov. I'll check it out and get back to you.

[xSmoggeRx]

I have the same problem. If i register the EvenListener in a Modal Component I won't trigger.

[ismcodes]

Having the same problem, the event listener is not mounted within the modal component but the modal being displayed seems to completely block the event listener function from being called

[xiaoyanzheng]

i have the same problem, because of Modal，react-native version is 0.48.1

[ronal2do]

• 1

[VektorTech]

I have similar issue as well

[szemannp]

We've faced the same issue using react-native-router-flux. The solution was that we implemented back handling in the router instead the component where it was actually needed (and checked currentScene whether to proceed). Works like a charm, sadly, can't provide solution for different navigations.

[mbillard]

This is documented but I'm not sure why it's implemented that way:

onRequestClose
The onRequestClose callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that BackHandler events will not be emitted as long as the modal is open.

[Abhishekgarg727]

Is there any workaround to handle back press on react native model ?

[ronal2do]

@Abhishekgarg727 onRequestClose you need to put the same method to close

[jerolimov]

PR #19077 is merged and is finally part of the latest RN release 0.58+

I hope for all of you that this issue here is fixed when you upgrade your RN version. 😄

[kelset]

Awesome! I'm going to close this for the time being, if the issue is still present please submit a new issue :)

Thanks @jerolimov!