React-native-slide-bottomsheet NPM

React Native Slide BottomSheet

React Native Slide BottomSheet is a customizable component for creating elegant bottom sheets in your React Native applications. It provides a great user experience with smooth animations and flexible height options.

Features

Customizable styles to match your app's design and theme.
Support for scrollable content within the bottom sheet.
Configurable backdrop with adjustable opacity and color.
Optional handle bar for easy interaction.
Responsive height options, including fixed height and percentage-based height.
Event callbacks for closing the bottom sheet and handling backdrop press.

Example

Installation

You can install package using npm or yarn:

npm install react-native-slide-bottomsheet

yarn add react-native-slide-bottomsheet

Usage

To use the BottomSheet component in your React Native application, simply import it and include it in your JSX:

import React from "react";
import { View, Text } from "react-native";
import BottomSheet from "react-native-slide-bottomsheet";

const App = () => {
  return (
    <View>
      <Text>React Native Slide Bottomsheet</Text>
      <BottomSheet
        visible={true}
        onClose={() => console.log("Bottom sheet closed")}
      >
        <View>
          <Text>Content inside the bottom sheet</Text>
        </View>
      </BottomSheet>
    </View>
  );
};

export default App;

Props

The following table describes the available props for the React Native BottomSheet component:

Prop	Type	Description
`visible`	boolean	Whether the bottom sheet is visible or not.
`onClose`	() => void	Callback function when the bottom sheet is closed.
`children`	React.ReactNode	Content of the bottom sheet.
`height`	number \| string	Height of the bottom sheet (can be a number or a string with percentage).
`scrollable`	boolean	Whether the content of the bottom sheet is scrollable.
`animationDuration`	number	Duration of the animation for opening/closing the bottom sheet.
`backdrop`	object	Configurations for the backdrop behind the bottom sheet.
`backdrop.backdropOpacity`	number	Opacity of the backdrop.
`backdrop.backdropColor`	string	Color of the backdrop.
`style`	object	Custom styles for the bottom sheet container.
`style.backgroundColor`	string	Background color of the bottom sheet.
`style.borderTopLeftRadius`	number	Top left border radius of the bottom sheet.
`style.borderTopRightRadius`	number	Top right border radius of the bottom sheet.
`style.borderColor`	string	Border color of the bottom sheet.
`style.borderWidth`	number	Border width of the bottom sheet.
`style.shadowColor`	string	Shadow color of the bottom sheet.
`style.shadowOffset`	{ width: number, height: number }	Shadow offset of the bottom sheet.
`style.shadowRadius`	number	Shadow radius of the bottom sheet.
`style.elevation`	number	Elevation of the bottom sheet (Android only).
`handleBarVisible`	boolean	Whether to show the handle bar at the top of the bottom sheet.
`handleBarStyle`	object	Custom styles for the handle bar.
`handleBarStyle.backgroundColor`	string	Background color of the handle bar.
`handleBarStyle.width`	number	Width of the handle bar.
`handleBarStyle.height`	number	Height of the handle bar.
`onBackdropPress`	() => void	Callback function when the backdrop is pressed.

Contributing

Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request. Let's make this package even better together!