react-native-bottom-sheet-hook v1.1.0

react-native-bottom-sheet-hook

Features of this package :star_struck: :star_struck:

:sparkle: You can use useBottomSheet hook to control the bottom sheet from any component.

:sparkle: BottomSheetProvider higher order component helps to maintain clean code.

:sparkle: This package uses react-native-reanimated and react-native-gesture-handler for best performance.

:sparkle: All the animations are running on the main thread.

:sparkle: Customize the BottomSheet component the way you want. Pass props "globally" or override global props "locally".

Hey! Would you like to contribute to this package?! :raised_hands: :handshake:

Go ahead, fork the repo, and create many pull requests. :smile: :smile:

Installation Guide

install the package by running the below command

  npm install react-native-bottom-sheet-hook

or

  yarn add react-native-bottom-sheet-hook

Note: Since this package uses react-native-reanimated and react-native-gesture-handler, please follow the below steps

Wrap your root component with GestureHandlerRootView as below,

import { GestureHandlerRootView } from "react-native-gesture-handler";

return (
  <GestureHandlerRootView style={{ flex: 1 }}>  
    <NavigationContainer>
      <Stacks/>
    </NavigationContainer>
  </GestureHandlerRootView>
)

Add react-native-reanimated/plugin plugin to your babel.config.js

module.exports = {
    presets: [
      ... // don't add it here :)
    ],
    plugins: [
      ...
      // has to be listed last.
      'react-native-reanimated/plugin',
    ],
  };

How to use the package

Step 01

Wrap your screen component or the root component with BottomSheetProvider

import { BottomSheetProvider } from 'react-native-bottom-sheet-hook';

  <GestureHandlerRootView style={{ flex: 1 }}>
    <BottomSheetProvider>
      <NavigationContainer>
        <Stacks/>
      </NavigationContainer>
    </BottomSheetProvider>
  </GestureHandlerRootView>

Step 02

import the useBottomSheet and use bashow and hide functions. You need to pass the component to show in the bottom sheet as the argument to bashow function.

import React from "react";
import { View, StyleSheet, Button, Text } from "react-native";
import { useBottomSheet } from "react-native-bottom-sheet-hook";

export default function HomeScreen() {
  const { show, hide } = useBottomSheet();

  const renderBottomSheetComponent = () => {
    return (
      <View style={{ alignItems: "center" }}>
        <Text style={{ fontSize: 20, fontWeight: "bold" }}>Welcome to</Text>
        <Text style={{ fontSize: 18, fontWeight: "bold", marginTop: 20 }}>
          React Native Bottom Sheet Hook
        </Text>
        <Text style={{marginTop: 40, fontSize: 16}}>Use the "useBottomSheet" hook to control me</Text>
        <Button title="Close" color='red' onPress={hide} />
      </View>
    );
  };

  const handlePress = () => {
    show(renderBottomSheetComponent(), { height: 300 });
  };

  return (
    <View style={styles.container}>
      <Button title="Show bottom sheet" onPress={handlePress} />
    </View>
  );
}

Props

BottomSheetProvider Props

show method arguments

Configurations