1

as the title states, I am attempting to implement a modal in such way that it only takes up some part of the screen so as to allow the user to be able to interact with some of the background components. For reference I am using the react-native-modal library. The current screen looks like this:

enter image description here

I would like to be able to interact with the icons in the header (both are already wrapped in Touchable components so already clickable). However when the Modal is visible I am unable to interact with those.

My implementation is as such:

<Modal
  isVisible={showModal}
  style={styles.modalContainer}
  customBackdrop={<CustomBackdrop />}
  onBackdropPress={() => setShowModal(false)}
  animationIn="fadeInDown"
  animationOut="fadeOutUp"
>
  <View style={styles.container}>
    <TouchableOpacity style={styles.itemContainer}>
      <Text style={styles.label}>A</Text>
    </TouchableOpacity>

    <TouchableOpacity style={styles.itemContainer}>
      <Text style={styles.label}>B</Text>
    </TouchableOpacity>

    <TouchableOpacity style={styles.itemContainer}>
      <Text style={styles.label}>C</Text>
    </TouchableOpacity>

    <TouchableOpacity style={styles.itemContainer}>
      <Text style={styles.label}>D</Text>
    </TouchableOpacity>

    <TouchableOpacity
      style={[
        styles.itemContainer,
        { borderBottomLeftRadius: 16, borderBottomRightRadius: 16 },
      ]}
    >
      <Text style={styles.label}>E</Text>
    </TouchableOpacity>
  </View>
</Modal>

And my custom background looks like this:

<View
  style={{
    marginTop: hp("50%"),
    flex: 1,
  }}
>
  <TouchableWithoutFeedback onPress={() => setShowModal(false)}>
    <View
      style={{ backgroundColor: "#000", height: hp("50%"), width: wp("100%") }}
    />
  </TouchableWithoutFeedback>
</View>
Sankomil
  • 55
  • 1
  • 7
  • Check this, it might help you https://stackoverflow.com/a/67030316/6382890 – Bader Serhan Sep 07 '21 at 08:22
  • @BaderSerhan I tried using that but zIndex always throws me for a loop. Setting `zIndex:9999;position:'absolute` doesn't really seem to work and pushes all the other components down when the modal appears. – Sankomil Sep 07 '21 at 09:19
  • No what you need to do is to create a normal view with absolute positioning and zIndex, not a modal. I don't think there's a way to interact with a view that's behind a modal. – Bader Serhan Sep 08 '21 at 10:16

1 Answers1

0

I defined two properties and it worked for me:

<Modal
   hasBackdrop={false}
   coverScreen={false}

Remembering that there are two modals, one native and one external. These properties only exist in the external, so you need to install

npm install react-native-modal

And import

import Modal from 'react-native-modal'
Mateus Enrick Pitura
  • 1