CODEWITHSUNDEEP
react-nativereact-native-modal
Paresh chavda
Paresh chavda

Reputation: 345

How to implement modal swipe to down like instagram?

I'm currently working on an React Native project. I need to implement a feature similar to "Swipe Down To close Modal" on Instagram

Upvotes: 1

Views: 12609

Answers (1)

Selim
Selim

Reputation: 88

I believe that you're using @react-native-community/react-native-modal package. In the library documents, you can see that there is a property called swipeDirection which is either a string or an array that can be one or many of the following options; 'up', 'down', 'left' or 'right.

You can also set the threshold required swipe action to be completed by using swipeThreshold property. The default is 100 according to the library documents.

Here's an example of the modal;

import React from 'react';
import {View, Text} from 'react-native;
import Modal from 'react-native-modal';

const ModalComponent = props => {
    const [isVisible, setIsVisible] = useState(true);

    return (
        <Modal isVisible={isVisible}
               swipeDirection="down"
               //swipeDirection={["up", "down", "left", "right"]}
               onSwipeComplete={(e) => { setIsVisible(false); })
               style={{ justifyContent: 'flex-end', margin: 0, }} >
            <View style={{ backgroundColor: 'steelblue' }}>
                <Text>Hello Modal</Text>
            </View>
        </Modal>
    );
};

export {ModalComponent};

Upvotes: 6

Related Questions