Clean way to implement a common components that provides you a bunch of options to choose from, like menu , action-sheets, etc

ActionSheetRenderer.tsx

// ActionSheetRenderer.tsx
import _ from 'lodash';
import React, { FC, ReactElement } from 'react';
import { Icon } from 'react-native-paper';
import { useDisclose } from '../../hooks';
import { CustomBottomSheet } from '../../pages';
import { ActionSheetItem } from '../events';
import { VStack } from '../layout';

export interface ActionSheetRendererProps {
  options: Array<{
    icon: string;
    text: string;
    onPress: () => void;
  }>;
  trigger: ReactElement;
  shouldCloseOnPress?: boolean;
}

export const ActionSheetRenderer: FC<ActionSheetRendererProps> = ({
  options,
  trigger,
  shouldCloseOnPress = true,
}) => {
  const { isOpen, onClose, onOpen } = useDisclose();

  return (
    <>
      {React.cloneElement(trigger, { onPress: onOpen })}
      <CustomBottomSheet isOpen={isOpen} onClose={onClose}>
        <VStack pointerEvents='box-none'>
          {_.map(options, option => {
            return (
              <ActionSheetItem
                title={option.text}
                Icon={<Icon size={25} source={option.icon} />}
                onPress={() => {
                  option.onPress();
                  shouldCloseOnPress && onClose();
                }}
              />
            );
          })}
        </VStack>
      </CustomBottomSheet>
    </>
  );
};