javascriptreact-nativereact-native-modal

Place the `CROSS` outside the modal


enter image description hereI 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,
  },
});

Solution

  • 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>