Have ideas to improve npm?Join in the discussion! »

    react-native-swipeable-bottom-sheet

    1.1.0 • Public • Published

    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.

    Note

    • If you have used elevation property (android) in your code, then you may need to set same elevation value to the backDropView of bottomSheet.

    License

    This project is licensed under the GNU General Public License v3.0

    Author

    Made by Travancore Analytics.

    Install

    npm i react-native-swipeable-bottom-sheet

    DownloadsWeekly Downloads

    12

    Version

    1.1.0

    License

    GNU GPL V3

    Unpacked Size

    46.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar