React Native Modal 背景无法正常工作

Question

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

Answer 1

After reading the documentation and common problems:

The solution was to change the visible prop to isVisible

isVisible={modalVisible}

Answer 2

We can use the npm package to show the bottom sheet in the app.

Have a try with the below npm package.

https://www.npmjs.com/package/react-native-raw-bottom-sheet