@big-toni/react-native-bottom-sheet v1.0.0

@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

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

Methods

Use ref to get the component reference.