reactjsreact-nativereact-native-flatlistreact-native-scrollviewreact-native-modal

How to implement drag-down-to-close a React Native Modal?

I'm trying to achieve a feature similar to Tik-Tok's Comments Feature, press a button to open up a modal containing scrollview/flatlist, and we can drag the modal to close itself.

My Goal:

enter image description here

I did find anything about drag-to-close in React-Native Modal reference, please help me!

Code I have now (very basic):

    <Modal 
    animationType='slide'
    visible={isOpen}
    transparent
    >
                <View style={{ height: 100, position: 'absolute', bottom: 0 }}>
                    <FlatList .../>
                </View>
    </Modal>
Solution

  • Great solution provided by @Jatin Bhuva 's comment above, the drag-to-close feature of a modal can be achieved with React-Native-Bottom-Sheet by @gorhom! And in addition, the package allows integrations with flatlists or scrollables inside :)