How to detect the hardwareBackPress event with React Native when you have an open Modal

Question

Hello, there is 1 week that I am trying to find this problem and I can not solve... I have an application that at a certain time opens a modal that overlaps the main screen. Here are my codes...

Main Screen (Lanlistscreen)

default class LanListScreen extends React.Component {

  render() {

    return (
      <View>
        <HeaderBar />
        <SubHeaderBar />
        <AddLanModal visible={!!this.props.AddLanIsOpen} />
      </View>
    )
  }

  componentWillMount = () => {
    BackHandler.addEventListener('hardwareBackPress', () => {
      this.props.lanToggleAdd();
      return true;
    });
  }

}

const mstp = state => {
  return { AddLanIsOpen: state.lanReducer.AddLanIsOpen }
};

const mdtp = {
  lanToggleAdd
}

export default connect(mstp, mdtp)(LanListScreen);

Modal (Addlanmodal)

class AddLanModal extends React.Component {

  render() {
    return (
      <Modal
        animationType="fade"
        transparent={true}
        visible={this.props.visible}
        onRequestClose={() => null}>
        <View>
          <View>
            <Text>teste</Text>
          </View>
        </View>
      </Modal>
    )
  }

  componentWillMount = () => {
    BackHandler.addEventListener('hardwareBackPress', () => {
      this.props.lanToggleAdd();
      return true;
    });
  }

}

const styles = { ... }

const mdtp = {
  lanToggleAdd
}

export default connect(null, mdtp)(AddLanModal);

My problem is this, when I’m on any screen and try to use the feature BackHandler It works perfectly by changing the state of my Redux and (in the case of this screen) opening my modal. The problem is, when I open this modal, the back button stops working...

I tried to add the event again inside the modal but without success... I even thought that the modal could be interfering in the backbutton, being on top of somehow and nothing... I also tried to add the event of going back to the view that represents my fashionBackdrop and still nothing...

What I need to do so I can use the Backbutton inside a <Modal/> with React Native?

EDIT

The problem was even mentioned here:

• https://github.com/wix/react-native-navigation/issues/2840

Does anyone have any idea how to solve this?

Answer 1

After read that issue of own react-navigation, found that Modal blocks access to hardwareBackPress. So I had to take and transform my Modal into an absolute component and make this change manually. So:

class LanListScreen extends React.Component {

  render(){

    const AddLan = !!this.props.AddLanIsOpen ? <AddLanModal /> : null;

    return (
      <View style={{ ...styles.container }}>

        <HeaderBar />
        <SubHeaderBar />

        <Transition appear="bottom" style={{ ...styles.container }}>
          <LanList style={styles.container} openDetailItem={this.openDetailItem} />
        </Transition>

        {AddLan}

      </View>

  }

}

Within AddLanModal I encapsulated everything inside a View and defined for her the following properties:

const styles = {
  wrapper: {
    position: 'absolute',
    top: 0, left: 0, bottom: 0, right: 0,
    zIndex: 11,
  }
  ...
}

By doing this, I can control whether or not the modal is active within the Redux, in a boleana variable. so from anywhere I can call you and hide you, including in the BackHandler.

Answer 2

In your Main Screen file (Lanlistscreen)

You could try some of that in componentWillMount

componentWillMount = () => {
  if(this.props.AddLanIsOpen){
    // AQUI ELE ENTRARIA NESSA LOGICA QUANDO O MODAL VISIBLE FOSSE TRUE
    // PODERIA DISPARAR UMA ACTION PARA TORNAR MODAL VISIBLE FALSE
    // ASSIM FARIA COM QUE O BACK BUTTON QUANDO CLICASSE COM A MODAL ABERTA ELA IRIA SE FECHARIA
  }
  else{
    // AQUI VOCE CONTROLARIA O BACK BUTTON SEM SER NA MODAL
    BackHandler.addEventListener('hardwareBackPress', () => {
      this.props.lanToggleAdd();
      return true;
    });
  }
}