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

Question

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

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Hello, I have been trying for 1 week to find this problem and I can not solve it ... I have an application that, at some point, opens a modal that overlays the main screen. Here are my codes ...

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 am in any Screen and I try to use the BackHandler feature it works perfectly by changing the status of my redux and (in the case of this screen) opening my modal. The problem is that when I open this modal, the back button stops working ...

I tried to add the event again in the modal but without success ... until I thought that the modal could be interfering in the backbutton, being over somehow and nothing ... I also tried to add the event back to the view which represents my modalBackdrop and anyway nothing ...

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

EDIT

The problem has even been quoted here:

link

Does anyone have any idea how to solve this?

react-native

asked by anonymous 13.11.2018 / 00:27

2 answers

1

In your Main Screen (LanListScreen) file

You could try some of this in the 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;
    });
  }
}

14.11.2018 / 21:02

Enable select when selecting with jQuery Placing Javascript in Div [closed]

score 1 · Accepted Answer

After read this Issue from react-navigation itself, I discovered that Modal blocks the access to hardwareBackPress . So I had to pick up 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 within a View and set it the following properties:

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

When doing this, I can control whether or not the modal is active within the redux, in a boolean variable. so from anywhere I can call it and hide it, even in BackHandler .