❀Nearly Post-Money

    @breeffy/react-native-bottom-sheet
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.0Β β€’Β PublicΒ β€’Β Published

    React Native Bottom Sheet

    npm npm npm

    A performant interactive bottom sheet with fully configurable options πŸš€

    Initially, this project was a cloned of react-native-bottom-sheet by @gorhom ❀️. However, it is been fully re-written to add extra functionalities and simplify the approach.


    Table of Contents

    1. Features
    2. Installation
    3. Usage
    4. Props
    5. Methods
    6. Hooks
    7. Scrollables
    8. To Do
    9. FAQ
    10. Credits
    11. License

    Features

    • Smooth interactions & snapping animations.
    • Support FlatList, SectionList, ScrollView & View scrolling interactions.
    • Support React Navigation Integration.
    • Compatible with Reanimated v1 & v2.
    • Compatible with Expo.
    • Written in TypeScript.

    Installation

    yarn add @breeffy/react-native-bottom-sheet
    # or
    npm install @breeffy/react-native-bottom-sheet

    ⚠️ You need to install react-native-reanimated v2 & react-native-gesture-handler and follow their installation instructions.

    Usage

    import React, { useCallback, useMemo, useRef } from 'react';
    import { View, StyleSheet } from 'react-native';
    import { BottomSheet, SnapPoint } from '@breeffy/react-native-bottom-sheet';
    
    const App = () => {
      // hooks
      const bottomSheetRef = useRef<BottomSheet>(null);
    
      // variables
      const snapPoints = useMemo<SnapPoint[]>(
        () => [
          { relativeTo: 'content', percentagesOf: 30 },
          { relativeTo: 'content', percentagesOf: 70 },
          { relativeTo: 'content', percentagesOf: 100 }
        ],
        []
      );
    
      // callbacks
      const handleSheetChanges = useCallback((index: number) => {
        console.log('handleSheetChanges', index);
      }, []);
    
      // renders
      return (
        <View style={styles.container}>
          <BottomSheet
            ref={bottomSheetRef}
            initialSnapIndex={1}
            snapPoints={snapPoints}
            onChange={handleSheetChanges}
          >
            {/* INSERT A SCROLLABLE HERE */}
          </BottomSheet>
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 24
      }
    });
    
    export default App;

    Props

    initialSnapIndex

    Initial snap index. You also could provide {-1} to initiate bottom sheet in closed state.

    required: NO | type: number | default: 0

    snapPoints

    Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number, string or mix. String values should be a percentage.

    required: YES | type: SnapPoint[]
    example: [{ relativeTo: 'window', percentagesOf: 10 },{ relativeTo: 'content', percentagesOf: 70 }, { relativeTo: 'content', percentagesOf: 100 }]

    topInset

    Top inset value helps to calculate percentage snap points values. usually comes from @react-navigation/stack hook useHeaderHeight or from react-native-safe-area-context hook useSafeArea.

    required: NO | type: number | default: 0

    animationDuration

    Snapping animation duration.

    required: NO | type: number | default: 500

    animationEasing

    Snapping animation easing function.

    required: NO | type: Animated.EasingFunction | default: Easing.out(Easing.back(0.75))

    animatedPosition

    Animated shared value to be used as a callback for the position node internally.

    required: NO | type: Animated.SharedValue

    animatedPositionIndex

    Animated shared value to be used as a callback for the position index node internally.

    required: NO | type: Animated.SharedValue

    handleComponent

    Component to be placed as a sheet handle.

    required: NO | type: () => JSX.Element

    backgroundComponent

    Component to be placed as a background.

    required: NO | type: React.FC

    onAnimateDistinct

    Determine will onAnimate() callback is called if animating to the same snap point.

    required: NO | type: boolean | default: true

    onAnimate

    Callback when the sheet about to animate to a new position.

    required: NO | type: (fromIndex: number, toIndex: number) => void

    onChange

    Callback when sheet position changed to a provided point.

    required: NO | type: (index: number) => void

    children

    A scrollable node or normal view.

    required: YES | type: () => React.ReactNode | React.ReactNode[] | React.ReactNode

    Methods

    snapTo

    Snap to one of the provided points from snapPoints.

    type: (index: number) => void

    expand

    Snap to the maximum provided point from snapPoints.

    type: () => void

    collapse

    Snap to the minimum provided point from snapPoints.

    type: () => void

    close

    Close the bottom sheet.

    type: () => void

    Hooks

    useBottomSheet

    The library provide useBottomSheet hook to provide the bottom sheet methods, anywhere inside the sheet content.

    type: BottomSheetMethods

    Scrollables

    This library provides a pre-integrated views that utilise an internal functionalities with the bottom sheet to allow smooth interactions. These views i called them Scrollables and they are:

    To Do

    • [ ] Add tablets support.
    • [x] Add Reanimated v2 support.

    FAQ

    How this library differ from reanimated-bottom-sheet or react-native-scroll-bottom-sheet?

    This library was built to provide the most native-like experience and could fit any use-case that developers wants it to be.

    While both libraries providing similar experience, but they still missing the following:

    • reanimated-bottom-sheet
      • Seamless gesture interaction between the sheet and the content.
    • react-native-scroll-bottom-sheet
      • Extracting scrollable content to allow developers customize the sheet content, like integrate React Navigation as the sheet content.

    Both libraries are great! and I have used both of them at my work ❀️

    How can I integrate React Navigation?

    here you go React Navigation Integration :)

    Will this library support Reanimated v2?

    Yes πŸŽ‰

    Built With ❀️

    License

    Apache-2.0

    Liked the library? πŸ˜‡

    Buy Me A Coffee


    Install

    npm i @breeffy/react-native-bottom-sheet

    DownloadsWeekly Downloads

    12

    Version

    0.4.0

    License

    Apache-2.0

    Unpacked Size

    451 kB

    Total Files

    430

    Last publish

    Collaborators

    • victor.malov