Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

A lightweight and animated bottom drawer for react native 🚀

NotificationsYou must be signed in to change notification settings

AtharvaDeolalikar/react-native-animated-bottom-drawer

Repository files navigation

A lightweight and highly performant bottom drawer for react native

Features

  • Extremely lightweight (~20 KB) and highly performant
  • Support for snapping (multi height bottom drawer)
  • Smooth Animations and Gestures
  • Completely Customisable
  • Automatic Keyboard Handling
  • useBottomDrawer hook to allow the bottom drawer child components to access bottom drawer methods
  • Written in Typescript

Installation

using npm

npm i react-native-animated-bottom-drawer

using yarn

yarn add react-native-animated-bottom-drawer

Usage

importReact,{useRef}from'react';import{View,Text,StyleSheet,Button,SafeAreaView}from'react-native';importBottomDrawer,{BottomDrawerMethods,}from'react-native-animated-bottom-drawer';constApp=()=>{// refconstbottomDrawerRef=useRef<BottomDrawerMethods>(null);// rendersreturn(<SafeAreaViewstyle={styles.container}><Buttontitle="Open"onPress={()=>bottomDrawerRef.current.open()}/><BottomDrawerref={bottomDrawerRef}openOnMount><Viewstyle={styles.contentContainer}><Text>Awesome 🎉</Text></View></BottomDrawer></SafeAreaView>);};conststyles=StyleSheet.create({container:{flex:1,padding:24,},contentContainer:{flex:1,alignItems:'center',},});exportdefaultApp;

Available Props

NameTypeDefaultDescriptionRequired
gestureModehandle | content | nonehandleThis prop determines where to apply the gesturesNo
openDurationnumber450Animation duration when the bottom drawer is openedNo
closeDurationnumber300Animation duration when the bottom drawer is closedNo
onOpenfunctionnullCallback function when the bottom drawer is openedNo
onClosefunctionnullCallback function when the bottom drawer is closedNo
onBackdropPressfunctiontrueCallback function when the backdrop is pressedNo
onBackPressfunctionnullCallback function when the hardware back button is pressedNo
closeOnPressBackbooleantrueSetting this true will allow the bottom drawer to close when hardware back is pressed (only on android)No
closeOnBackdropPressbooleantrueSetting this true will allow the bottom drawer to close when backdrop is pressedNo
openOnMountbooleanfalseSetting this true will automatically open the bottom drawer when the parent component is mountedNo
enableSnappingbooleanfalseSet this to true when you want to snap the bottom drawer to multiple heightsNo
snapPointsnumber[][400]Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number. Example:[300, 500, 700]Yes, ifenableSnapping istrue
backdropColorstring#000Color of the backdropNo
backdropOpacitynumber0.5Opacity of the backdropNo
customStylesobject{}Add your custom styles here!No
overDragbooleantrueSetting this true will allow the bottom sheet to be overdraggedNo
initialIndexnumber0The initial index out ofsnapPoints when the bottom sheet is openedNo
initialHeightnumber420The initial height of the bottom sheet when opened.Note: This prop is not available whenenableSnapping is set totrueNo
safeTopOffsetnumber50Minimum safe distance from top while dragging the sheet or keyboard is openedNo

Available Methods

These methods can be accessed by bottom drawer reference oruseBottomDrawer hook.

open

Opens the bottom drawer

typeopen=(// open at provided sheetHeightsheetHeight?:number,)=>void;

NOTE:sheetHeight is only read whenenableSnapping is set tofalse. IfenableSnapping istrue, then the bottom sheet will be opened at index 0 out ofsnapPoints.

close

Closes the bottom drawer

typeclose=()=>void;

snapToPosition

Snaps the bottom drawer to given position

typesnapToPosition=(sheetHeight:number,config?:{resetLastPosition?:boolean;},)=>void;

snapToIndex

Snaps the bottom drawer to given index out of snapPoints (requiresenableSnapping to betrue)

typesnapToIndex=(index:number)=>void;

NOTE: This method is only accessible whenenableSnapping is set totrue.

About

A lightweight and animated bottom drawer for react native 🚀

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
[8]ページ先頭
©2009-2025 Movatter.jp