bottom-sheet.tsx

type PopupBottomSheetModalProps = {
  children: ReactNode;
  header?: ReactNode;
}

export const PopupBottomSheetModal = forwardRef(
  ({ children, header }: PopupBottomSheetModalProps, ref: ForwardedRef<BottomSheetModal>) => {
    const sheetColor = useThemeColoring("primaryViewBackground");
    const textColor = useThemeColoring("primaryText");

    const renderBackground = useCallback(
      (props: BottomSheetBackgroundProps) => (
        <View
          {...props}
          style={[
            props.style,
            { backgroundColor: sheetColor },
            popupBottomSheetStyles.background,
          ]}
        />
      ),
      [sheetColor]
    );

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

    const renderHandle = useCallback(
      (props: any) => (
        <BottomSheetHandle
          {...props}
          style={[
            props.style,
            {
              ...popupBottomSheetStyles.handle,
            },
          ]}
          indicatorStyle={{
            backgroundColor: textColor,
            ...popupBottomSheetStyles.indicator,
          }}
        >
          {header}
        </BottomSheetHandle>
      ),
      [sheetColor, textColor, header]
    );

    return (
      <BottomSheetModal 
        ref={ref}
        backdropComponent={renderBackdrop}
        handleComponent={renderHandle}
        backgroundComponent={renderBackground}
      >
        <BottomSheetView
          style={[
            popupBottomSheetStyles.container,
            { backgroundColor: sheetColor },
          ]}
        >
          {children}
        </BottomSheetView>
      </BottomSheetModal>
    )
  }
)