react-native-easy-bottomsheet

Get Started

Installation

npm install react-native-easy-bottomsheet

Usage

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;

Usage

Available props

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

Author

Feel free to ask me questions here - @kedar09!