• Stars
    star
    252
  • Rank 161,312 (Top 4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 1 year ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The tiny ๐Ÿ“ฆ, smart ๐Ÿ˜Ž, and flexible ๐ŸŽ— bottom sheet your app craves

React Native Bottom Sheet ๐Ÿ’–

GitHub GitHub Workflow Status (with event) runs with expo GitHub code size in bytes npm bundle size (scoped) npm downloads

The smart ๐Ÿ˜Ž, tiny ๐Ÿ“ฆ, and flexible ๐ŸŽ— bottom sheet your app craves ๐Ÿš€


๐Ÿ‘‰๐Ÿพ ๐Ÿ‘ˆ๐Ÿพ

Preview for Android & iOS

Web Preview

โœจFeatures

  • ๐Ÿ“ฆ 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

๐Ÿ’ป Installation

npm install @devvie/bottom-sheet

or

yarn add @devvie/bottom-sheet

๐Ÿ“ฑ Minimal Usage

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.

Examples

Typescript

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;

Javascript

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>
  );
};

โš  Warning

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.

โŒ Don't do this

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

โœ… Do this

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

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

๐Ÿ›  Props

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.

Property Type Default Description Required
android_backdropMaskRippleColor string | OpaqueColorValue Color of the ripple effect when backdrop mask is pressed (Android Only). No
android_closeOnBackPress boolean true Determines whether the sheet will close when the device back button is pressed (Android Only). No
animationType 'slide' | 'spring' | 'fade' | ANIMATIONS 'slide' Animation to use when opening and closing the bottom sheet. No
backdropMaskColor string | OpaqueColorValue '#00000052' Color of the scrim or backdrop mask. No
children ViewProps['children'] | React.FunctionComponent<{_animatedHeight: Animated.Value}> null Contents of the bottom sheet. Yes
closeDuration number 500 Duration for sheet closing animation. No
closeOnBackdropPress boolean true Determines whether the bottom sheet will close when the scrim or backdrop mask is pressed. No
closeOnDragDown boolean true Determines whether the bottom sheet will close when dragged down. No
containerHeight ViewStyle['height'] DEVICE SCREEN HEIGHT Height of the bottom sheet's overall container. No
customBackdropComponent React.FunctionComponent<{_animatedHeight: Animated.Value}> null Custom component for sheet's scrim or backdrop mask. No
customBackdropPosition "top" | "behind" 'behind' Determines the position of the custom scrim or backdrop component. 'behind' puts it behind the keyboard and `'top'`` puts it atop the keyboard. No
customDragHandleComponent React.FC<{_animatedHeight: Animated.Value}> Custom drag handle component to replace the default bottom sheet's drag handle. No
customEasingFunction AnimationEasingFunction ANIMATIONS.SLIDE Custom easing function for driving sheet's animation. No
disableBodyPanning boolean false Prevents the bottom sheet from being dragged/panned down on its body. No
disableDragHandlePanning boolean false Prevents the bottom sheet from being panned down by dragging its drag handle. No
dragHandleStyle ViewStyle Extra styles to apply to the drag handle. No
height number | string '50%' Height of the bottom sheet when opened. Relative to containerHeight prop No
hideDragHandle boolean false When true, hides the sheet's drag handle. No
modal boolean true Determines whether the sheet is a modal. A modal sheet has a scrim or backdrop mask, while a standard (non-modal) sheet doesn't. No
openDuration number 500 Duration for sheet opening animation. No
style Omit<ViewStyle, 'height' | 'minHeight' | 'maxHeight' | 'transform:[{translateY}]'> Extra styles to apply to the bottom sheet. No

Examples

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.

1๏ธโƒฃ Smart response to keyboard pop ups and orientation changes (automatic behavior)

Android iOS
Preview for keyboard handling (Android) Preview for keyboard handling (iOS)

2๏ธโƒฃ Handles deeply nested list and scroll views interactions (automatic beavior)

Android iOS
Preview for scroll handling (Android) Preview for scroll handling (iOS)

3๏ธโƒฃ Auto adjusts layout when height and containerHeight props change (automatic behavior)

4๏ธโƒฃ Extend sheet height when its content is scrolled

5๏ธโƒฃ Use as SnackBar

6๏ธโƒฃ Custom Drag Handle Animation Interpolation

7๏ธโƒฃ Custom Scrim/Backdrop Mask

More Examples and code samples coming soon...

Contributing

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

License

MIT

see LICENSE


Support

Buy Me A Coffee

</> with ๐Ÿ’– by Devvie โœŒ

More Repositories