nysamnang / react-native-raw-bottom-sheet

Add Your Own Component To Bottom Sheet Whatever You Want (Android and iOS)
https://npmjs.com/package/react-native-raw-bottom-sheet
MIT License
1.09k stars 195 forks source link
action-sheet bottom-animated bottom-drawer bottom-sheet modal picker raw-bottom-sheet react-native

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.


NPM Version npm downloads GitHub Actions Workflow Status codecov

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.