npm install react-native-easy-bottomsheet
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 (
<View style={styles.centeredView}>
<BottomSheet
bottomSheetTitle={"Notifications"}
bottomSheetIconColor="#0A2463"
bottomSheetStyle={{
backgroundColor: "white",
maxHeight: "20%",
minHeight: "15%",
}}
bottomSheetTitleStyle={{color: '#0A2463'}}
onRequestClose={() => setVisible(!isVisible)}
bottomSheetVisible={isVisible}
>
<ScrollView>
<Text>Hi</Text>
<Text>I'm, kedar09</Text>
</ScrollView>
</BottomSheet>
<Pressable
style={[styles.button, styles.buttonOpen]}
onPress={() => {
setModalVisible(true);
}}
>
<Text style={styles.textStyle}>Show BottomSheet</Text>
</Pressable>
</View>
);
};
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;
Simple Example |
List Example |
Form Example |
|
|
|
Name | Type | Default |
---|---|---|
bottomSheetStyle |
style | |
bottomSheetTitleStyle |
style | |
bottomSheetTitle |
string | |
bottomSheetIconColor |
string | #000 |
bottomSheetVisible |
bool | false |
onRequestClose |
function | |
onBackdropPress |
bool | false |
Feel free to ask me questions here - @kedar09!