react-native-swipeable-bottom-sheet
v1.1.0
Published
Customisable bottom sheet component for react-native. Works both on iOS and android.You can add your own components inside sheet.
Downloads
19
Maintainers
Readme
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.