React-native-swipeable-bottom-sheet NPM

react-native-swipeable-bottom-sheet

Highly customisable Bottom sheet
Add Your own Component To Bottom Sheet
Support Drag Down Gesture
Support Both Android And iOS
Smooth Animation
Zero Configuration
Zero dependency

Installation

npm i react-native-swipeable-bottom-sheet --save

or

yarn add react-native-swipeable-bottom-sheet

Example

Class component

import React from 'react';
import { StyleSheet,Dimensions,Text } from 'react-native';
import BottomSheet from "react-native-swipeable-bottom-sheet"

export default class BottomSwipeView extends React.Component {
    constructor(props){
        super(props)
    }

    openPopUp(){
        this.bottomSheet.open()
    }

    render() {
        return(
            <BottomSheet
                ref = {ref => this.bottomSheet = ref}
                height = {400}
                closeOnDragDown = {true}
                closeOnPressMask = {true}
                topBarStyle = {styles.topBarStyle}
                backDropStyle = {{elevation:5}}
                sheetStyle = {{borderRadius:50}}
            >
                <Text> react-native-swipeable-bottom-sheet </Text>

            </BottomSheet>
        )
    }
}

const styles                    = StyleSheet.create({
    topBarStyle                 : {
        width                   : 50,
        height                  : 5,
        borderRadius            : 2.5,
        backgroundColor         : "#000000"
    }
})

Props

Props	Type	Description	Default
height	number	Height of Bottom Sheet	200
closeOnDragDown	boolean	Use gesture drag down to close Bottom Sheet	true
closeOnPressMask	boolean	Press the area outside to close Bottom Sheet	true
topBarStyle	object	Custom style to topBar of Bottom Sheet	{}
backDropStyle	object	Custom style to backDropView of Bottom Sheet	{}
sheetStyle	object	Custom style to Bottom Sheet	{}
hideTopBar	object	hide topBar component	false

Methods

Method Name	Description	parameters
open	Open Bottom Sheet	callback - function that will be called after popup opened
close	Close Bottom Sheet	callback - function that will be called after popup closed.