react-native-raw-bottom-sheet

react-native-raw-bottom-sheet

Hooray! The new version 3 has been released.

Please pay close attention if you are upgrading the RBSheet from version 2 to version 3.

• Functional Components: Starting from v3.0.0, RBSheet has been completely rewritten using Functional Components. This improves performance and aligns with modern React practices.
• Prop Removal & Renaming: Several props have been removed and renamed for improved clarity and maintainability. Please refer to the updated documentation for a complete list of available props and their intended behavior.

---

• Super Lightweight Component
• Add Your Own Component To Bottom Sheet
• Customize Whatever You Like
• Support Drag Down Gesture
• Support All Orientations
• Support Both Android And iOS
• Smooth Animation
• Zero Configuration
• Zero dependency
• Millions of Downloads

Showcase iOS	Showcase Android

Installation

npm i react-native-raw-bottom-sheet --save

or

yarn add react-native-raw-bottom-sheet

Example

Please check the example folder to explore more example codes.

Single Bottom Sheet

import React, {useRef} from 'react';
import {View, Button} from 'react-native';
import RBSheet from 'react-native-raw-bottom-sheet';

export default function Example() {
  const refRBSheet = useRef();

  return (
    <View style={{flex: 1}}>
      <Button
        title="OPEN BOTTOM SHEET"
        onPress={() => refRBSheet.current.open()}
      />
      <RBSheet
        ref={refRBSheet}
        useNativeDriver={true}
        customStyles={{
          wrapper: {
            backgroundColor: 'transparent',
          },
          draggableIcon: {
            backgroundColor: '#000',
          },
        }}
        customModalProps={{
          animationType: 'slide',
          statusBarTranslucent: true,
        }}
        customAvoidingViewProps={{
          enabled: false,
        }}>
        <YourOwnComponent />
      </RBSheet>
    </View>
  );
}

Multiple Bottom Sheet

const refRBSheet = useRef([]);

const renderItem = ({item, index}) => {
  return (
    <View>
      <TouchableOpacity
        style={styles.button}
        onPress={() => refRBSheet.current[index].open()}>
        <Text style={styles.buttonText}>ITEM {item + 1}</Text>
      </TouchableOpacity>

      <RBSheet ref={ref => (refRBSheet.current[index] = ref)}>
        <View style={styles.bottomSheetContainer}>
          <Text style={styles.bottomSheetText}>I AM ITEM {item + 1}</Text>
        </View>
      </RBSheet>
    </View>
  );
};

Props

Props	Type	Description	Default
height	number	The height of bottom sheet.	260
openDuration	number	Duration of the animation when opening bottom sheet.	300 (ms)
closeDuration	number	Duration of the animation when closing bottom sheet.	200 (ms)
closeOnPressMask	boolean	Press the outside area (mask) to close bottom sheet.	true
closeOnPressBack	boolean	Press hardware back android to close bottom sheet (Android only).	false
draggable	boolean	Enable the drag-down gesture to close the bottom sheet.	false
dragOnContent	boolean	The draggable is only worked on the draggable icon. Set this to true if you want to drag on the content as well (doesn't work with ScrollView).	false
useNativeDriver	boolean	Use the native driver to run smoother animation.	false
customStyles	object	Add custom styles to bottom sheet.	{}
customModalProps	object	Add custom props to modal.	{}
customAvoidingViewProps	object	Add custom props to KeyboardAvoidingView.	{}
onOpen	function	Callback function that will be called after the bottom sheet has been opened.	null
onClose	function	Callback function that will be called after the bottom sheet has been closed.	null

Available Custom Style

customStyles: {
  wrapper: {...}, // The Root of component (Change the mask's background color here).
  container: {...}, // The Container of bottom sheet (The animated view that contains your component).
  draggableIcon: {...} // The style of Draggable Icon (If you set `draggable` to `true`).
}

Methods

Method Name	Description	Usage
open	The method to open bottom sheet.	refRBSheet.current.open()
close	The method to close bottom sheet.	refRBSheet.current.close()

CONTRIBUTING

I'm really glad you're reading this, because we need volunteer developers to help bring this project to life.

How to contribute:

1. Clone this repository
2. Open project, then run yarn to install devDependencies
3. Add your magic code for contribution
4. Test your code
   • Navigate to example folder
   • Run yarn & yarn start to run the example project
   • Test your code in example/App.js
5. Update README.md to update documentation (Optional)
6. Write unit testing in __tests__ folder (Optional)
7. Update index.d.ts to update typing (Optional)
8. Make a pull request, Genius!

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Author

Made with ❤️ by NY Samnang.