Place the `CROSS` outside the modal

Question

I use react-native-modal and how can I place the CROSS outside the modal, in the corner of the backdrop? If I use absolute positioning, then the CROSS is found under the background layer.

      <>
        <TouchableOpacity style={styles.cross}>
          <Image source={CROSS} />
        </TouchableOpacity>
        <Modal>
         {....}
        </Modal>
      </>

const styles = StyleSheet.create({
  cross: {
    position: 'absolute',
    zIndex: 100,
    elevation: 100,
  },
});

Vladimír · Accepted Answer · 2020-09-11T12:07:11.693

0

You must place cross inside modal. Modal takes whole screen. And other content of modal content place next to cross as sibling. :

<Modal>
  <TouchableOpacity style={styles.cross}>
    <Image source={CROSS} />
  </TouchableOpacity>
 {....}
</Modal>

edited Sep 11 '20 at 12:07

answered Sep 11 '20 at 11:53

Vladimír

701
1
7
24

not working. The background takes up the entire screen space, no matter where the cross is – never_give_up Sep 11 '20 at 11:57
1

Then you must place cross inside modal. Modal takes whole screen. And other content of modal content place next to cross as sibling. – Vladimír Sep 11 '20 at 12:02

Place the `CROSS` outside the modal

1 Answers1