@big-toni/react-native-bottom-sheet

Features

NO DEPENDENCIES

• Smooth movement animations
• Plain simple and flexible APIs
• Customizable backdrop opacity and color
• Listeners for the sheet state and position changes
• Swipeable

Setup

This library is available on npm, install it with: npm i @big-toni/react-native-bottom-sheet or yarn add @big-toni/react-native-bottom-sheet.

Usage

Import @big-toni/react-native-bottom-sheet and wrap your content inside it:

import React, { useRef } from 'react';
import { Dimensions, Text } from 'react-native';
import { BottomSheet } from '@big-toni/react-native-bottom-sheet';

const { height, width } = Dimensions.get('screen');

const DRAWER_CLOSED = 0;
const DRAWER_PEEK = height * 0.3;
const DRAWER_OPEN = height * 0.8;
...

const sheetRef = useRef(null);

<BottomSheet
  handle={
    <View style={{ height: 60, width }}>
      <Text onPress={() => sheetRef.current?.open()}>Open</Text>
    </View>
  }
  onMove={(y) => console.log('Drawer moved to: ', y)}
  onStateChange={(y) => console.log('Drawer new state: ', y)}
  ref={sheetRef}
  yPositions={[DRAWER_CLOSED, DRAWER_PEEK, DRAWER_OPEN]}
>
  <View>
    <Text onPress={() => sheetRef.current?.close()}>Close</Text>
  </View>
</BottomSheet>

Available props

| Prop | Type | Default | Description | | ----------------- | -------- | ------------ | -------------------------------------------------------------------- | | backdropColor | string | null | The backdrop background color, if not privided, there is no backdrop | | children | node | REQUIRED | The sheet content | | handle | node | null | Sheet handle node and pan responder gets attached to it * | | onMove | func | () => null | Called when the sheet moves | | onStateChange | func | () => null | Called when the sheet state changes | | ref | func | () => null | Catch the reference of the component. | | style | any | null | Style applied to the sheet | | useNativeDriver | bool | false | Defines if animations should use native driver | | yPositions | array | REQUIRED | Y positions array |

* When no handle provided, panResponder is attached to children node

Methods

Use ref to get the component reference.

| Method | Parameter | Description | | ---------- | ------------- | ------------------------------------- | | close | null | Moves sheet to the lowest y position | | moveTo | number | Moves sheet to specified y position | | open | null | Moves sheet to the highest y position |