@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 |