react-native-bottom-sheet

Simple and fast bottom sheet for react-native. Built with react-native-reanimated and react-native-gesture-handler.

This library is compatible with Expo.

Table of Contents

• react-native-bottom-sheet
  • Installation
  • Setup
  • Usage
  • Props
  • Methods
    • open()
    • close()
  • TODO

Installation

npm install @vaicar/react-native-bottom-sheet

or if you use yarn:

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

If you are not using Expo, make sure to install react-native-reanimated and react-native-gesture-handler .

Setup

If you want the bottom sheet to be in front of everything (like header, bottom tabs, etc), you will have to wrap your root navigation component with the BottomSheetPortalHost component, like that:

import { BottomSheetPortalHost } from '@vaicar/react-native-bottom-sheet';  
<BottomSheetPortalHost>  
   <Navigation ... />  
</BottomSheetPortalHost>  

Usage

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import BottomSheet from '@vaicar/react-native-bottom-sheet';

export default class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.bottomSheetRef = React.createRef();
  }

  openBottomSheet = () => {
    this.bottomSheetRef.current.open();
  };

  closeBottomSheet = () => {
    this.bottomSheetRef.current.close();
  };

  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={this.openBottomSheet}
        >
          <Text>Open bottom sheet</Text>
        </TouchableOpacity>
        <BottomSheet
          closeOnDragDown
          ref={this.bottomSheetRef}
          height={400}
          duration={200}
          onClose={() => {
            console.log('Bottom sheet closed!');
          }}
          onOpen={() => {
            console.log('Bottom sheet opened!');
          }}
        >
          <Text>Hello world!</Text>
        </BottomSheet>
      </View>
    );
  }
}

If you're not using BottomSheetPortalHost, make sure to set the property usePortal to false.

Props

name	required	default	description
height	yes		Bottom sheet's height
duration	no	300	The open/close animation's duration (in ms)
closeOnDragDown	no	true	Closes the bottom sheet on drag down
closeOnPressMask	no	true	Closes the bottom sheet when the user clicks on the background mask
fadeMask	no	true	fade the background when bottom sheet is opened/closed or moved
onClose	no	() => {}	Called when the bottom sheet finishes the closing animation.
onOpen	no	() => {}	Called when the bottom sheet finishes the opening animation.
usePortal	no	true	If true, the bottom sheet will use the BottomSheetPortalHost component, to move the bottom-sheet on top of everything.

Methods

open()

Opens the bottom-sheet. Returns a promise, that's resolved when the bottom sheet finishes the opening animation.

this.bottomSheetRef.current.open().then(() => {
 // bottom sheet finished the opening animation
})

close()

Closes the bottom-sheet. Returns a promise, that's resolved when the bottom sheet finishes the closing animation.

this.bottomSheetRef.current.close().then(() => {
 // bottom sheet finished the closing animation
})

TODO

1. Add examples;
2. Add tests;
3. Improve documentation
4. Add more props to make the component more customizable.