react-native-bottom-sheets

A lightweight, developer-friendly wrapper around @gorhom/bottom-sheet that simplifies the integration of multiple bottom sheets in React Native projects.

{width=300}

Features

• No context providers needed: Use bottom sheets anywhere in your app without wrapping your code in context providers
• Easy-to-use API for managing multiple bottom sheets across your app
• Simplified state management for bottom sheets
• Seamless integration with @gorhom/bottom-sheet
• TypeScript support
• Event-based communication for opening and closing bottom sheets

Installation

1npm install react-native-bottom-sheets @gorhom/bottom-sheet

or

1yarn add react-native-bottom-sheets @gorhom/bottom-sheet

Usage

1. Add the BottomSheets component to your app's root component:

1import { GestureHandlerRootView } from "react-native-gesture-handler";
2import { BottomSheets } from "react-native-bottom-sheets";
3import YourBottomSheets from "./YourBottomSheets";
4
5const bottomSheets = {
6  FilterBottomSheet,
7  WelcomeBottomSheet,
8  AuthBottomSheet,
9  // add your bottom sheets here
10};
11
12export default function App() {
13  return (
14    <GestureHandlerRootView>
15      <YourApp />
16      <BottomSheets sheets={bottomSheets} />
17    </GestureHandlerRootView>
18  );
19}

Note: No need to wrap your app with any additional context providers!

2. Create your bottom sheet components:

1import { StyleSheet, View, Text } from "react-native";
2import { BottomSheetProps, BottomSheet } from "react-native-bottom-sheets";
3
4const AuthBottomSheet = ({ defaultProps, params }: BottomSheetProps) => {
5  return (
6    <BottomSheet snapPoints={["30%"]} {...defaultProps}>
7      <View style={styles.container}>
8        <Text>Auth Bottom Sheet</Text>
9        <Text>{JSON.stringify(params, null, 2)}</Text>
10      </View>
11    </BottomSheet>
12  );
13};
14
15const styles = StyleSheet.create({
16  container: {
17    flex: 1,
18    justifyContent: "center",
19    alignItems: "center",
20  },
21});
22
23export default AuthBottomSheet;

3. Use the useBottomSheets hook to manage bottom sheets from anywhere in your app:

1import { useBottomSheets } from "react-native-bottom-sheets";
2
3const YourComponent = () => {
4  const { openBottomSheet, closeBottomSheet } = useBottomSheets();
5
6  const handleOpenBottomSheet = () => {
7    openBottomSheet("AuthBottomSheet", { someParam: "value" }, () => {
8      console.log("Bottom sheet opened");
9    });
10  };
11
12  return <Button title="Open Auth Sheet" onPress={handleOpenBottomSheet} />;
13};

Why use react-native-bottom-sheets?

1. No Context Providers: Unlike many state management solutions, this doesn't require you to wrap your app in context providers. This means less boilerplate and easier integration.

2. Simplified API: Manage your bottom sheets with a clean, intuitive API.

3. Global State Management: Control your bottom sheets from anywhere in your app without prop drilling or complex state management.

4. TypeScript Support: Enjoy full TypeScript support for a better development experience.

5. Flexible and Powerful: While simplifying the API, we maintain full access to @gorhom/bottom-sheet's props and features.

API

useBottomSheets Hook

• openBottomSheet(name: string, params?: any, callback?: () => void): Opens a bottom sheet
• closeBottomSheet(callback?: () => void): Closes the currently open bottom sheet

BottomSheet Component

Wrapper for the @gorhom/bottom-sheet component

• ...all props from @gorhom/bottom-sheet

BottomSheets Component

• sheets: Record<string, React.ComponentType<any>>: Object containing all your bottom sheet components

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.