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

1import React from 'react';
2import { StyleSheet,Dimensions,Text } from 'react-native';
3import BottomSheet from "react-native-swipeable-bottom-sheet"
4
5export default class BottomSwipeView extends React.Component {
6    constructor(props){
7        super(props)
8    }
9
10    openPopUp(){
11        this.bottomSheet.open()
12    }
13
14    render() {
15        return(
16            <BottomSheet
17                ref = {ref => this.bottomSheet = ref}
18                height = {400}
19                closeOnDragDown = {true}
20                closeOnPressMask = {true}
21                topBarStyle = {styles.topBarStyle}
22                backDropStyle = {{elevation:5}}
23                sheetStyle = {{borderRadius:50}}
24            >
25                <Text> react-native-swipeable-bottom-sheet </Text>
26
27            </BottomSheet>
28        )
29    }
30}
31
32const styles                    = StyleSheet.create({
33    topBarStyle                 : {
34        width                   : 50,
35        height                  : 5,
36        borderRadius            : 2.5,
37        backgroundColor         : "#000000"
38    }
39})
40

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.