Nefarious Plastic Mannequins

    react-native-gesture-bottom-sheet

    1.1.0 • Public • Published

    React Native Gesture Bottom Sheet

    Need a lightweight and easy-to-use bottom sheet component? Here it is!

    A cross-platform Bottom Sheet component which supports gestures.

    • Checkout the example/ folder for use example.

    Features

    • Smooth animations and gestures
    • Highly customizable
    • Very lightweight

    Installation

    Open a Terminal in the project root and run:

    yarn add react-native-gesture-bottom-sheet

    Quick Start

    import React, { useRef } from "react";
    import { SafeAreaView, TouchableOpacity, Text, StyleSheet } from "react-native";
    import BottomSheet from "react-native-gesture-bottom-sheet";
    
    const Example = () => {
      // Needed in order to use .show()
      const bottomSheet = useRef();
    
      return (
        <SafeAreaView style={styles.container}>
          <BottomSheet hasDraggableIcon ref={bottomSheet} height={600} />
          <TouchableOpacity
            style={styles.button}
            onPress={() => bottomSheet.current.show()}
          >
            <Text style={styles.text}>Open modal</Text>
          </TouchableOpacity>
        </SafeAreaView>
      );
    };
    
    const styles = StyleSheet.create({
      button: {
        height: 50,
        width: 150,
        backgroundColor: "#140078",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 20,
        shadowColor: "#8559da",
        shadowOpacity: 0.7,
        shadowOffset: {
          height: 4,
          width: 4,
        },
        shadowRadius: 5,
        elevation: 6,
      },
      text: {
        color: "white",
        fontWeight: "600",
      },
      container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      },
    });
    
    export default Example;

    Props

    name required default Type description
    height Yes integer Determines the panel size.
    radius No 10 integer Determines the radius of the top borders.
    hasDraggableIcon No false boolean Controls visibility of the draggable icon on top of the modal.
    draggable No true boolean Specify whether the panel is draggable or not.
    backgroundColor No #25252599 string Change the color of the overlay.
    sheetBackgroundColor No #F3F3F3 string Change the background of the panel.

    Install

    npm i react-native-gesture-bottom-sheet

    DownloadsWeekly Downloads

    1,418

    Version

    1.1.0

    License

    ISC

    Unpacked Size

    1.78 MB

    Total Files

    8

    Last publish

    Collaborators

    • kcotias
    • victorcosta12