1

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>
Ryan Wang
  • 418
  • 7
  • 23
  • 2
    See this third party library it will help you, https://github.com/gorhom/react-native-bottom-sheet – Jatin Bhuva Jan 01 '23 at 04:33
  • you can add flatlist in https://www.npmjs.com/package/react-native-element-dropdown this –  Jan 01 '23 at 07:55

1 Answers1

0

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 :)

Ryan Wang
  • 418
  • 7
  • 23