Fully customizable BottomSheet for React Native
js
npm install react-native-easy-bottomsheet
`$3
`js
import React, { useState } from "react";
import { Text, Pressable, View, ScrollView } from "react-native";
import BottomSheet from "react-native-easy-bottomsheet";const App = () => {
const [isVisible, setVisible] = useState(false);
return (
bottomSheetTitle={"Notifications"}
bottomSheetIconColor="#0A2463"
bottomSheetStyle={{
backgroundColor: "white",
maxHeight: "20%",
minHeight: "15%",
}}
bottomSheetTitleStyle={{color: '#0A2463'}}
onRequestClose={() => setVisible(!isVisible)}
bottomSheetVisible={isVisible}
>
Hi
I'm, kedar09
style={[styles.button, styles.buttonOpen]}
onPress={() => {
setModalVisible(true);
}}
>
Show BottomSheet
);
};
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22,
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen: {
backgroundColor: "#3E92CC",
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center",
},
});
export default App;
`$3
Simple Example
List Example
Form Example



$3
| Name | Type | Default |
|---------------------------|-----------| ------------ |
|
bottomSheetStyle | style | |
| bottomSheetTitleStyle | style | |
| bottomSheetTitle | string | |
| bottomSheetIconColor | string | #000 |
| bottomSheetVisible | bool | false |
| onRequestClose | function | |
| onBackdropPress ` | bool | false |