Add Your Own Component To Bottom Sheet Whatever You Want (Android and iOS)
Branch: master
Clone or download
Latest commit 28ae7c7 Feb 9, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Upgrade to v1.1.0 Feb 8, 2019
.gitignore Initial commit Jan 20, 2019
LICENSE Initial commit Jan 20, 2019 Upgrade to v1.1.0 Feb 8, 2019
index.js Initial commit Jan 20, 2019
package-lock.json Initial commit Jan 20, 2019
package.json Upgrade to v1.1.0 Feb 8, 2019


npm version npm downloads

  • Super Lightweight Component
  • Smooth Animation
  • Add Your own Component To Bottom Sheet
  • Customize Whatever You Like
  • Support Gesture Swipe Down
  • Support All Orientations
  • Support Both Android And iOS
Showcase iOS Showcase Android


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


yarn add react-native-raw-bottom-sheet


import React, { Component } from "react";
import { View, Text, Button } from "react-native";
import RBSheet from "react-native-raw-bottom-sheet";

class Example extends Component {
  render() {
    return (
      <View style={{ flex: 1, marginTop: 50, alignItems: "center" }}>
          title="OPEN BOTTOM SHEET"
          onPress={() => {
          ref={ref => {
            this.RBSheet = ref;
            container: {
              justifyContent: "center",
              alignItems: "center"
          <YourOwnComponent />

const YourOwnComponent = () => <Text>Your Pretty Component Goes Here</Text>;

export default Example;


Prop Type Description Default
height number Height of Bottom Sheet 260
duration number Duration of Bottom Sheet animation 300 (ms)
closeOnSwipeDown boolean Use gesture swipe down to close Bottom Sheet true
closeOnPressMask boolean Press the area outside to close Bottom Sheet true
onClose function Callback function when Bottom Sheet was closed
customStyles object Custom style to Bottom Sheet {}

Available Custom Style

customStyles: {
  wrapper: {...}, // The Background of Component
  container: {...} // The Container of Bottom Sheet


Method Name Description
open Open Bottom Sheet
close Close Bottom Sheet


Always set ref to RBSheet and call each method by using this.RBSheet.methodName() like example above.

Give me a Star

If you think this project is helpful just give me a ⭐️ Star is enough because i don't drink coffee :D


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


Made with ❤️ by NY Samnang.