squirce-bottom-sheet.tsx

import { ForwardedRef, forwardRef, ReactNode, useCallback } from "react";
import {
  BottomSheetBackdrop,
  BottomSheetModal,
  BottomSheetView,
} from "@gorhom/bottom-sheet";
import { AppColor, shadeColor, useColor } from "@/theme/color";
import { StyleUtils } from "@/theme/style-utils";
import { StyleSheet } from "react-native";
import { View } from "@/theme";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { SquircleView } from "expo-squircle-view";

const popupBottomSheetModalStyles = StyleSheet.create({
  container: {
    marginHorizontal: "2%",
  },
  content: {
    ...StyleUtils.flexColumn(),
    alignItems: "center",
  },
  squircle: {
    flex: 1,
    borderRadius: 25,
    ...StyleUtils.flexColumn(),
    overflow: "hidden",
  },
  header: {
    ...StyleUtils.flexColumn(5),
    paddingTop: "2%",
    paddingBottom: "2%",
    alignItems: "center",
  },
  indicator: {
    width: "20%",
    height: 4,
  },
});

type PopupBottomSheetModalProps = {
  children: ReactNode;
  header?: ReactNode;
  onDismiss: () => void;
};

export const PopupBottomSheetModal = forwardRef(
  (
    { children, header, onDismiss }: PopupBottomSheetModalProps,
    ref: ForwardedRef<BottomSheetModal>
  ) => {
    const backgroundColor = useColor(AppColor.background);
    const handleColor = shadeColor(useColor(AppColor.background), 0.25);
    const insets = useSafeAreaInsets();

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

    return (
      <BottomSheetModal
        ref={ref}
        backdropComponent={renderBackdrop}
        handleComponent={null}
        backgroundComponent={null}
        detached={true}
        bottomInset={insets.bottom}
        style={popupBottomSheetModalStyles.container}
        onDismiss={onDismiss}
      >
        <BottomSheetView style={popupBottomSheetModalStyles.content}>
          <SquircleView
            style={[
              popupBottomSheetModalStyles.squircle,
              { backgroundColor },
            ]}
            cornerSmoothing={100}
          >
            <View style={popupBottomSheetModalStyles.header}>
              <View
                style={[
                  popupBottomSheetModalStyles.indicator,
                  { backgroundColor: handleColor },
                ]}
              />
              {header}
            </View>
            {children}
          </SquircleView>
        </BottomSheetView>
      </BottomSheetModal>
    );
  }
);