@vaicar/react-native-bottom-sheet v1.0.4

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

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.