Swipeable, Animated, Compact - Bottom sheet for react native project

Usage no npm install needed!

<script type="module">
  import reactNativeAnimatedBottomSheet from '';



npm-version Download-status License
Github followers Repo Start User stars

Swipeable, Animated, Compact - Bottom sheet for react native project.

⚡️ Features

  • Swipeable: swipe down or up to handle component.
  • Animated: Moving component, Changing backdrop opacity with Smooth Animation
  • Compact: Two props, Two methods, ready to use.
  • Backdrop: Touch Backdrop to close the botton sheet.
  • Customize: Customize events with onSwipe parameter that indicates swiping event.

🛠 Installation

Open a Terminal in the project root and run:

npm i react-native-animated-bottom-sheet --save

Now we need to install react-native-gesture-handler

npm i react-native-gesture-handler --save

📝 Requirements

🏗 Examples

import BottomSheet from 'react-native-animated-bottom-sheet';
import React, {useState, useRef} from 'react';
import { StyleSheet, Text, View, Button, Dimensions, TouchableOpacity } from 'react-native';

const App = () => {
    const bottomSheetRef: any = useRef();
    const renderBottomSheetContent = (onSwipe: boolean) => (
                flex: 1, 
                alignItems: 'center', 
                justifyContent: 'center'}}>
            <Text>{onSwipe ? 'swiping' : 'not swiping'}</Text>
    return (
        <View style={{flex: 1}}>
        <TouchableOpacity onPress={() =>}>
            onClose={() => console.log('bottomSheet closed!')}

export default App

🧬 Props

Name Type Require Description
renderContent (onSwipe: boolean) => any true Function that returns child component to render. you can use onSwipe value to handle swipe event.
visibleHeight number true Value that defines height to show from end of the window.
onClose () => void false Function that will be invoked when after bottom sheet has closed.

🪡 Methods

show(value?: number)

Shows the bottom sheet to value with Animation.

  • value: The value that the bottom sheet will move to(px from the bottom of the window)

Note: Calling show() without any parameter will show the bottom sheet to visibleHeight


Closes the bottom sheet to bottom with Animation.

✏️ Todo

  • Add callback to close
  • Make it work when content is ScrollView or FlatList
  • Add swipe-up event handler to switch sheet to full screen

⚖️ License

This project is licensed under the MIT License - see the LICENSE file for details