Skip to content

nysamnang/react-native-raw-bottom-sheet

Repository files navigation

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.

NPM Version npm downloads GitHub Actions Workflow Status codecov

  • 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.