Search code examples
javascriptreactjsreact-nativemodal-dialogreact-native-modal

React Native Modal background doesn't work properly

Im using react-native-modal

This was my modal

import Modal from 'react-native-modal';
..
....
..
   <Modal
      visible={modalVisible} //this one was the issue (should be isVisible)
      animationType={'slide'}
      swipeDirection="down"
      transparent={true}
      onRequestClose={() => closeModal()}
      onSwipeComplete={() => closeModal()}
      style={{justifyContent: 'flex-end', margin: 0}}
    >
    </Modal>

So as you can see, my idea was to open it half way and slide it down to close

My problem was that it was acting weird, the modal wasn't updating properly, sometimes the modal opened way less than it was supposed to

Solution

  • After reading the documentation and common problems:

    The solution was to change the visible prop to isVisible

    isVisible={modalVisible}