Napolean Paced Mischeviously
Miss any of our Open RFC calls?Watch the recordings here! »

react-native-swipeable-bottom-sheet

1.0.8 • 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

2

Version

1.0.8

License

GNU GPL V3

Unpacked Size

46.7 kB

Total Files

5

Last publish

Collaborators

  • avatar