react-native-swipe-down-modal

Swipable bottom drawer component like Instagram's comment component.

• Easy to use
• Easy to customize
• Smooth animation
• No dependency
• Works perfect with scrollview and flatlist
• Swipable and unswipable modes

Originated to this package: react-native-swipe-modal-up-down

Getting Started

$ npm install react-native-swipe-down-modal

Usage

import SwipeDownModal from 'react-native-swipe-down-modal';

  const SwipeDownTestScreen = () => {

    const [visible, setVisible] = useState(false)


    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <SwipeDownModal
                visible={visible}
                onClose={() => setVisible(false)}
            >
                <View
                    style={{
                        justifyContent: 'center',
                        alignItems: 'center',
                        flex: 1
                    }}>
                    <Text>Hello world</Text>
                </View>
            </SwipeDownModal>
            <Button
                title='Press to open'
                onPress={() => setVisible(true)}
            />
        </View>
    )

}

export default SwipeDownTestScreen;

Using customized header, customized style and closing programmatically

const SwipeDownTestScreen = () => {

    const [visible, setVisible] = useState(false)

    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <SwipeDownModal
                visible={visible}
                onClose={() => setVisible(false)}
                backgroundColor={'rgba(0,0,0,.5)'}
                drawerBackgroundColor={'green'}
                borderTopRadius={20}
                swipeDisabled={true}
                marginTop={Dimensions.get("screen").height - 500}
                customHeader={
                    <View
                        style={{
                            height: 70,
                            padding: 10,
                            borderBottomColor: 'yellow',
                            borderBottomWidth: 3,
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                        <Text>Foo</Text>
                        <TouchableOpacity
                            style={{
                                width: 32,
                                height: 32,
                                borderRadius: 16,
                                backgroundColor: 'black',
                                alignItems: 'center',
                                justifyContent: 'center',
                                right: 20,
                                top: 20,
                                position: 'absolute'
                            }}
                            onPress={() => setVisible(false)}
                        >
                            <Text style={{ color: 'wheat' }}>X</Text>
                        </TouchableOpacity>
                    </View>
                }
            >
                <View
                    style={{
                        justifyContent: 'center',
                        alignItems: 'center',
                        flex: 1
                    }}>
                    <Text>Hello world</Text>
                </View>
            </SwipeDownModal>
            <Button
                title='Press to open'
                onPress={() => setVisible(true)}
            />
        </View>
    )

}


export default SwipeDownTestScreen

Detailed styling and customizing

const SwipeDownTestScreen = () => {

    const [visible, setVisible] = useState(false)

    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <SwipeDownModal
                visible={visible}
                onClose={() => setVisible(false)}
                backgroundColor={'rgba(0,0,0,.5)'}
                borderTopRadius={20}
                marginTop={Dimensions.get("screen").height - 600}
                drawerBackgroundColor='transparent'
                customHeader={
                    <View
                        style={{
                            height: 60,
                            margin: 20,
                            backgroundColor: 'white',
                            alignItems: 'center',
                            justifyContent: 'center',
                            borderRadius: 5,
                            borderTopRightRadius: 15,
                            borderBottomLeftRadius: 15,
                            overflow: 'hidden'
                        }}>
                        <Text style={{ fontSize: 30, color: 'red' }}>Title</Text>
                        <TouchableOpacity
                            style={{
                                backgroundColor: 'black',
                                alignItems: 'center',
                                justifyContent: 'center',
                                right: 0,
                                position: 'absolute',
                                width: 50,
                                height: '100%',
                                borderBottomLeftRadius: 15,
                            }}
                            onPress={() => setVisible(false)}
                        >
                           <Text style={{ color: 'wheat', fontSize: 20 }}>X</Text>
                        </TouchableOpacity>
                    </View>
                }
            >
                <View
                    style={{
                        justifyContent: 'center',
                        alignItems: 'center',
                        flex: 1,
                        margin: 20,
                        marginTop: 30,
                        marginBottom: 50,
                        borderRadius: 20,
                        backgroundColor: 'wheat'
                    }}>
                    <Text style={{ fontSize: 30 }}>Hello world</Text>
                </View>
            </SwipeDownModal>
            <Button
                title='Press to open'
                onPress={() => setVisible(true)}
            />
        </View>
    )

}


export default SwipeDownTestScreen

props

Prop | Type | Default | Description ------------- | ------------- | ------------- | ------------- duration | number | 200 | Duration of swipe animation in milliseconds onClose | func | () => null | The function will be called after the modal closed customHeader | react element | null | Custom header element visible | boolean | false | Modal visibility swipeThreshold | number | 15 | Minimum dy value to trigger swipe animation marginTop | number | 71 | Margin to top of the screen. See image description. If you want to give certain height you can calculate it like this: marginTop={Dimensions.get("screen").height - yourHeight} swipableHeight | number | height of header component | Height of the area capturing the swipe. Outside of this area will not capture finger moves. See image description backgroundColor | color string | 'rgba(0, 0, 0, .9)' | Color of the empty area between the modal body and the top of the screen headerHeight | number | 40 | Height of the default header. This prop will take effect only if customHeader prop is null borderTopRadius | number | 38 | Border top right and left radius of drawer section drawerBackgroundColor | color string | '#ffffff' | Background color of drawer section swipeDisabled | boolean | false | When true, finger moves will not be captured

Image description