0%
October 21, 2023

@gorhom/bottom-sheet

react-native

Contents

The Package

This package is already in typescript, let's

yarn add @gorhom/bottom-sheet

Wrap our Stack Element in Root Level _layout.tsx

import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';

function RootLayoutNav() {
    ...
    return (
        <BottomSheetModalProvider>
            ...
        </BottomSheetModalProvider>
    )
}

Our own Wrapper

import { BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModal } from "@gorhom/bottom-sheet"
import { ReactNode, useCallback, useMemo, useRef, useState } from "react"

export type WbBottomSheetProps = {
    index?: number
}

class WbBottomSheet {
    public static close = () => { }
    public static open = () => { }
    public static setContent = (content: ReactNode) => { };

    public static instance = (props: WbBottomSheetProps) => {
        const [content, setContent] = useState<ReactNode>(null);
        const { index = 1, } = props;
        const snapPoints = useMemo(() => ['50%', '75%', "100%"], []);
        const modalref = useRef<BottomSheetModal>(null);
        const open = () => {
            modalref.current?.present();
        }
        const close = () => {
            modalref.current?.dismiss();
        }
        this.open = open;
        this.close = close;
        this.setContent = setContent

        const renderBackdrop = useCallback(
            (props: BottomSheetBackdropProps) => (
                <>
                    <BottomSheetBackdrop
                        {...props}
                        disappearsOnIndex={-1}
                        appearsOnIndex={1}
                    />
                </>
            ), []
        );

        return (
            <BottomSheetModal
                backgroundStyle={{ backgroundColor: "rgb(255,255,255)", }}
                containerStyle={{ backgroundColor: "transparent", borderRadius: 20 }}
                handleStyle={{ backgroundColor: "transparent" }}
                style={{ borderRadius: 20 }}
                enablePanDownToClose={true}
                backdropComponent={renderBackdrop}
                ref={modalref}
                index={index}
                snapPoints={snapPoints}
            >
                {content}
            </BottomSheetModal>
        )
    }
}

export default WbBottomSheet