react-native - Swipe down modal only when at the top of FlatList

Question

I am trying to clone TikTok comments modal (see gif below) where users should be able to scroll down to view more comments and once they scroll up and reach the top, they modal will be pulled down instead.

In my code, I enclosed the FlatList with PanGestureHandler. Currently, once the user reach the top of the comments and tried to swipe down, the modal does not move.

Answer 1

你可以使用 https://github.com/gorhom/react-native-bottom-sheet，这个 repo 提供的BottomSheetFlatList正是你所需要的

Answer 2

您可以检查滚动值，并在此值的基础上应用向下滚动条件。在 FlatList 中使用它并相应地设置状态。希望这会对您有很大帮助

 onMomentumScrollEnd={(event) => { 
      if(event.nativeEvent.contentOffset.y > 105){
        setselectedbutton(2)
      }else if(event.nativeEvent.contentOffset.y < 105){
        setselectedbutton(1)
      }
   }}