@nonam4/react-native-bottom-sheet

react-native-bottom-sheet

• 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

Showcase iOS	Showcase Android

Installation

npm i @nonam4/react-native-bottom-sheet --save

or

yarn add @nonam4/react-native-bottom-sheet

Example

Class component

import React, { Component } from "react";
import { View, Button } from "react-native";
import RBSheet from "@nonam4/react-native-bottom-sheet";

export default class Example extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Button title="OPEN BOTTOM SHEET" onPress={() => this.RBSheet.open()} />
        <RBSheet
          ref={ref => {
            this.RBSheet = ref;
          }}
          height={300}
          openDuration={250}
          customStyles={{
            container: {
              justifyContent: "center",
              alignItems: "center"
            }
          }}
        >
          <YourOwnComponent />
        </RBSheet>
      </View>
    );
  }
}

Functional component

import React, { useRef } from "react";
import { View, Button } from "react-native";
import RBSheet from "@nonam4/react-native-bottom-sheet";

export default function Example() {
  const refRBSheet = useRef<RBSheet | null>(null);
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#000"
      }}
    >
      <Button title="OPEN BOTTOM SHEET" onPress={() => refRBSheet.current?.open()} />
      <RBSheet
        ref={refRBSheet}
        closeOnDragDown={true}
        closeOnPressMask={false}
        customStyles={{
          wrapper: {
            backgroundColor: "transparent"
          },
          draggableIcon: {
            backgroundColor: "#000"
          }
        }}
      >
        <YourOwnComponent />
      </RBSheet>
    </View>
  );
}

Dynamic Bottom Sheet

renderItem = (item, index) => (
  <View>
    <Button title={`OPEN BOTTOM SHEET-${index}`} onPress={() => this[RBSheet + index].open()} />
    <RBSheet
      ref={ref => {
        this[RBSheet + index] = ref;
      }}
    >
      <YourOwnComponent onPress={() => this[RBSheet + index].close()} />
    </RBSheet>
  </View>
);

Props

Props	Type	Description	Default
animationType	string	Background animation ("none", "fade", "slide")	"none"
height	number	Height of Bottom Sheet	260
minClosingHeight	number	Minimum height of Bottom Sheet before close	0
minStartHeight	number	Minimum starting height of the bottom sheet before opening	0
openDuration	number	Open Bottom Sheet animation duration	300 (ms)
closeDuration	number	Close Bottom Sheet animation duration	200 (ms)
closeOnDragDown	boolean	Use gesture drag down to close Bottom Sheet	false
dragFromTopOnly	boolean	Drag only the top area of the draggableIcon to close Bottom Sheet instead of the whole content	false
closeOnPressMask	boolean	Press the area outside to close Bottom Sheet	true
closeOnPressBack	boolean	Press back android to close Bottom Sheet (Android only)	true
onOpen	function	Callback function when Bottom Sheet has opened	null
onClose	function	Callback function when Bottom Sheet has closed	null
customStyles	object	Custom style to Bottom Sheet	{}
keyboardAvoidingViewEnabled	boolean	Enable KeyboardAvoidingView	true (ios)

Available Custom Style

customStyles: {
  wrapper: {...}, // The Root of Component (You can change the `backgroundColor` or any styles)
  container: {...}, // The Container of Bottom Sheet
  draggableIcon: {...} // The Draggable Icon (If you set closeOnDragDown to true)
}

Methods

Method Name	Description
open	Open Bottom Sheet
close	Close Bottom Sheet

Note

• If you combind RBSheet with react-native-gesture-handler, the components inside RBSheet will not fire onPress event on Android #37.
• The demo source codes are in example folder.

License

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

Author

Made with ❤️ by NY Samnang.

Edited/updated by NoNam4.