The smart 😎, tiny 📦, and flexible 🎗 bottom sheet your app craves 🚀

• 📦 Very tiny and lightweight
• 0️⃣ No dependency (yeah!, just plug and play 😎)
• ✨ Modal and standard (non-modal) bottom sheet support
• ⌨ Smart & automatic keyboard and orientation handling for iOS & Android
• 💪 Imperative calls
• 📜 Supports FlatList, SectionList, ScrollView & View scrolling interactions
• 📟 Handles layout & orientation changes smartly
• 💯 Compatible with Expo
• 🔧 Flexible config
• 🚀 Supports props live update
• 🎞 Configurable animation
• 🎨 Follows Material Design principles
• 🌐 Runs on the web
• ✅ Written in TypeScript

npm install @devvie/bottom-sheet

or

yarn add @devvie/bottom-sheet

Opening and closing the bottom sheet is done imperatively, so just pass a ref to the bottom sheet and call the open or close methods via the ref instance to open and close the bottom sheet respectively.

import React, { useRef } from 'react';
import BottomSheet, { BottomSheetMethods } from '@devvie/bottom-sheet';
import { Button, View } from 'react-native';

const App = () => {
  const sheetRef = useRef<BottomSheetMethods>(null);
  return (
    <View>
      <Button title="Open" onPress={() => sheetRef.current?.open()} />
      <BottomSheet ref={sheetRef}>
        <Text>
          The smart 😎, tiny 📦, and flexible 🎗 bottom sheet your app craves 🚀
        </Text>
      </BottomSheet>
    </View>
  );
};

export default App;

import React, { useRef } from 'react';
import BottomSheet, { BottomSheetMethods } from '@devvie/bottom-sheet';
import { Button, View } from 'react-native';

const App = () => {
  const sheetRef = useRef(null);
  return (
    <View>
      <Button title="Open" onPress={() => sheetRef.current?.open()} />
      <BottomSheet ref={sheetRef}>
        <Text>
          The smart 😎, tiny 📦, and flexible 🎗 bottom sheet your app craves 🚀
        </Text>
      </BottomSheet>
    </View>
  );
};

The bottom sheet component uses and handles pan gestures internally, so to avoid scroll/pan misbehavior with its container, DO NOT put it inside a container that supports panning e.g ScrollView. You can always put it just next to the ScrollView and use React Fragment or a View to wrap them and everything should be okay.

<ScrollView>
  <BottomSheet>...</BottomSheet>
</ScrollView>

<>
  <ScrollView>...</ScrollView>

  <BottomSheet>...</BottomSheet>
</>

The bottom sheet is highly configurable via props. All props works for both Android and iOS except those prefixed with android_ and ios_, which works for only Android and iOS respectively.

Flexibility is a focus for this bottom sheet, these few examples shows certain behaviors of the bottom sheet and what can be achieved by tweaking its props.

Android	iOS

Android	iOS

See the contributing guide to learn how to contribute to the repository and the development workflow.

MIT

see LICENSE

</> with 💖 by Devvie ✌