2

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>
Improve this question
2

2 Answers 2

Reset to default
5

In case you're looking for a simple implementation

You can use PanResponder and Animated from the standard react-native lib. No need to install new packages, pretty easy to use.

Example

Take as an example my recent implementation, it's a generic bottom modal component that closes by swiping to the bottom of the screen:

A gif image from a screen recording that depicts the bottom of an iOS emulator, where a modal is present and it is closed by dragging it down. It shows the clicks of the mouse dragging it down.

Code

import { Animated, Dimensions, StyleSheet, PanResponder } from 'react-native';

// ... rest of the code ...

const AnimatedModal: React.FC<AnimatedModalProps> = ({ variant, children }) => {
  // ... rest of the code ...

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: Animated.event([null, { dy: translateY }], { useNativeDriver: false }),
    onPanResponderRelease: (e, gestureState) => {
      if (gestureState.dy > 50) {
        handleAnimationClose();
      } else {
        Animated.spring(translateY, {
          toValue: 0,
          tension: 1,
          friction: 20,
          useNativeDriver: true,
        }).start();
      }
    },
  });

  // ... rest of the code ...

  return (
    <Animated.View
      {...panResponder.panHandlers}
      style={[
        styles.container,
        variant === 'bottom' && { transform: [{ translateY }], bottom: 0 },
      ]}>
      {children}
    </Animated.View>
  );
};

// ... rest of the code ...
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

would you like to explain, what are expected props for AnimatedModalProps and translateY ( it looks like delta Y , may be % of modal view height threshold to animate ) and I believe handleAnimationClose() define as to call function to close to modal finally..
@AbdulWahab You are the one who creates the interface AnimatedModalProps, so you dictate what goes on it. On my project I had to expand it to 15 props, but the most important ones are isClosed, setIsClosed, hasClosedCallback and children: ReactNode; And yes, In the case of handleAnimationClosed, you can just close it withAnimated.timing, in my case I use two different libs for each so it's easier to differentiate platforms by splitting and specializing the functions. And translateY can be defined as useRef(new Animated.Value(windowHeight)).current;
1

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

Improve this answer

1 Comment

Commenting in 2025 to confirm for anyone that has a FlashList inside a modal and needs a smooth drag-to-close, this is the right answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.