Wednesday, 13 February, 2019 UTC


Summary

react-native-raw-bottom-sheet
sparkles Add Your Own Component To Bottom Sheet Whatever You Want (Android and iOS).
  • 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
Installation
npm i react-native-raw-bottom-sheet --save

or

yarn add react-native-raw-bottom-sheet
Example
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" }}>
        <Button
          title="OPEN BOTTOM SHEET"
          onPress={() => {
            this.RBSheet.open();
          }}
        />
        <RBSheet
          ref={ref => {
            this.RBSheet = ref;
          }}
          height={300}
          duration={250}
          customStyles={{
            container: {
              justifyContent: "center",
              alignItems: "center"
            }
          }}
        >
          <YourOwnComponent />
        </RBSheet>
      </View>
    );
  }
}

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

export default Example;
Props
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
}
Methods
Method Name Description
open Open Bottom Sheet
close Close Bottom Sheet

Note

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