CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-native-base

Essential cross-platform UI components for React Native with comprehensive theming and accessibility support

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

overlays.mddocs/

Overlay Components

Modal dialogs, popovers, tooltips, drawers, and overlay management components for complex user interactions.

Capabilities

Modal Component

Full-screen or centered modal dialog component.

/**
 * Modal dialog component for overlaying content
 * @param props - Modal component props
 * @returns JSX element representing a modal dialog
 */
function Modal(props: IModalProps): JSX.Element;

interface IModalProps extends StyledProps {
  isOpen: boolean;
  onClose: () => void;
  initialFocusRef?: React.RefObject<any>;
  finalFocusRef?: React.RefObject<any>;
  avoidKeyboard?: boolean;
  closeOnOverlayClick?: boolean;
  isKeyboardDismissable?: boolean;
  overlayVisible?: boolean;
  backdropVisible?: boolean;
  animationPreset?: "slide" | "fade";
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
  children?: React.ReactNode;
  useRNModal?: boolean;
  _backdrop?: IBackdropProps;
  _fade?: IFadeProps;
  _slide?: ISlideProps;
}

Usage Example:

import { Modal, Button, Text, VStack } from "native-base";

function ModalExample() {
  const [showModal, setShowModal] = React.useState(false);
  
  return (
    <>
      <Button onPress={() => setShowModal(true)}>Open Modal</Button>
      <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
        <Modal.Content maxWidth="400px">
          <Modal.CloseButton />
          <Modal.Header>Contact us</Modal.Header>
          <Modal.Body>
            <VStack space={3}>
              <Text>Modal body content goes here</Text>
            </VStack>
          </Modal.Body>
          <Modal.Footer>
            <Button.Group space={2}>
              <Button variant="ghost" onPress={() => setShowModal(false)}>
                Cancel
              </Button>
              <Button onPress={() => setShowModal(false)}>
                Save
              </Button>
            </Button.Group>
          </Modal.Footer>
        </Modal.Content>
      </Modal>
    </>
  );
}

Popover Component

Contextual popup component that appears relative to a trigger element.

/**
 * Popover component for contextual content display
 * @param props - Popover component props
 * @returns JSX element representing a popover
 */
function Popover(props: IPopoverProps): JSX.Element;

interface IPopoverProps extends StyledProps {
  isOpen?: boolean;
  defaultIsOpen?: boolean;
  onOpen?: () => void;
  onClose?: () => void;
  trigger?: (props: any) => JSX.Element;
  placement?: 
    | "auto"
    | "auto-start"
    | "auto-end"
    | "top"
    | "top-start" 
    | "top-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end"
    | "right"
    | "right-start"
    | "right-end"
    | "left"
    | "left-start"
    | "left-end";
  closeOnBlur?: boolean;
  initialFocusRef?: React.RefObject<any>;
  finalFocusRef?: React.RefObject<any>;
  isKeyboardDismissable?: boolean;
  shouldOverlapWithTrigger?: boolean;
  crossOffset?: number;
  offset?: number;
  children?: React.ReactNode;
  trapFocus?: boolean;
}

Usage Example:

import { Popover, Button, Text, Box } from "native-base";

function PopoverExample() {
  return (
    <Popover 
      trigger={(triggerProps) => (
        <Button {...triggerProps}>Open Popover</Button>
      )}
    >
      <Popover.Content accessibilityLabel="Welcome Message" w="56">
        <Popover.Arrow />
        <Popover.CloseButton />
        <Popover.Header>Welcome!</Popover.Header>
        <Popover.Body>
          <Text>This is the popover content</Text>
        </Popover.Body>
        <Popover.Footer justifyContent="flex-end">
          <Button.Group size="xs">
            <Button variant="ghost">Cancel</Button>
            <Button>Apply</Button>
          </Button.Group>
        </Popover.Footer>
      </Popover.Content>
    </Popover>
  );
}

Tooltip Component

Simple tooltip component for hover or focus states.

/**
 * Tooltip component for contextual help text
 * @param props - Tooltip component props
 * @returns JSX element representing a tooltip
 */
function Tooltip(props: ITooltipProps): JSX.Element;

interface ITooltipProps extends StyledProps {
  label: string;
  children: React.ReactElement;
  isOpen?: boolean;
  defaultIsOpen?: boolean;
  onOpen?: () => void;
  onClose?: () => void;
  placement?: 
    | "auto"
    | "auto-start"
    | "auto-end"
    | "top"
    | "top-start" 
    | "top-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end"
    | "right"
    | "right-start"
    | "right-end"
    | "left"
    | "left-start"
    | "left-end";
  hasArrow?: boolean;
  arrowSize?: number;
  arrowShadowColor?: string;
  bg?: ResponsiveValue<string>;
  backgroundColor?: ResponsiveValue<string>;
  openDelay?: number;
  closeDelay?: number;
  closeOnClick?: boolean;
  shouldWrapChildren?: boolean;
  offset?: number;
  crossOffset?: number;
  isDisabled?: boolean;
}

Usage Example:

import { Tooltip, Button } from "native-base";

<Tooltip label="This is a tooltip" placement="top">
  <Button>Hover me</Button>
</Tooltip>

Drawer Component

Side panel drawer component for navigation or content.

/**
 * Drawer component for side panel content
 * @param props - Drawer component props
 * @returns JSX element representing a side drawer
 */
function Drawer(props: IDrawerProps): JSX.Element;

interface IDrawerProps extends StyledProps {
  isOpen: boolean;
  onClose: () => void;
  placement?: "top" | "right" | "bottom" | "left";
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
  initialFocusRef?: React.RefObject<any>;
  finalFocusRef?: React.RefObject<any>;
  isKeyboardDismissable?: boolean;
  overlayVisible?: boolean;
  backdropVisible?: boolean;
  closeOnOverlayClick?: boolean;
  children?: React.ReactNode;
  _backdrop?: IBackdropProps;
  _content?: IBoxProps;
  _body?: IBoxProps;
}

Usage Example:

import { Drawer, Button, VStack } from "native-base";

function DrawerExample() {
  const [isOpen, setIsOpen] = React.useState(false);
  
  return (
    <>
      <Button onPress={() => setIsOpen(true)}>Open Drawer</Button>
      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} size="md">
        <Drawer.Content>
          <Drawer.CloseButton />
          <Drawer.Header>Menu</Drawer.Header>
          <Drawer.Body>
            <VStack space={4}>
              <Button variant="ghost">Home</Button>
              <Button variant="ghost">About</Button>
              <Button variant="ghost">Contact</Button>
            </VStack>
          </Drawer.Body>
        </Drawer.Content>
      </Drawer>
    </>
  );
}

AlertDialog Component

Alert dialog component for important confirmations or warnings.

/**
 * Alert dialog component for critical user confirmations
 * @returns JSX element representing an alert dialog
 */
function AlertDialog(): JSX.Element;

Actionsheet Component

Bottom sheet component for contextual actions on mobile.

/**
 * Action sheet component for mobile-friendly action selection
 * @param props - Actionsheet component props
 * @returns JSX element representing a bottom action sheet
 */
function Actionsheet(props: IActionsheetProps): JSX.Element;

interface IActionsheetProps extends StyledProps {
  isOpen: boolean;
  onClose: () => void;
  hideDragIndicator?: boolean;
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
  disableOverlay?: boolean;
  children?: React.ReactNode;
  _backdrop?: IBackdropProps;
}

interface IActionsheetContentProps extends IBoxProps {
  children?: React.ReactNode;
}

interface IActionsheetItemProps extends IPressableProps {
  children?: React.ReactNode;
  isDisabled?: boolean;
  startIcon?: JSX.Element;
  endIcon?: JSX.Element;
  _text?: ITextProps;
  _icon?: IIconProps;
}

Usage Example:

import { Actionsheet, Button, VStack, Text } from "native-base";

function ActionsheetExample() {
  const [isOpen, setIsOpen] = React.useState(false);
  
  return (
    <>
      <Button onPress={() => setIsOpen(true)}>Open Actionsheet</Button>
      <Actionsheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <Actionsheet.Content>
          <VStack w="100%" space={2}>
            <Actionsheet.Item onPress={() => console.log("Delete")}>
              <Text>Delete</Text>
            </Actionsheet.Item>
            <Actionsheet.Item onPress={() => console.log("Share")}>
              <Text>Share</Text>
            </Actionsheet.Item>
            <Actionsheet.Item onPress={() => console.log("Edit")}>
              <Text>Edit</Text>
            </Actionsheet.Item>
          </VStack>
        </Actionsheet.Content>
      </Actionsheet>
    </>
  );
}

Backdrop Component

Backdrop overlay component used by modals and other overlay components.

/**
 * Backdrop component for overlay backgrounds
 * @returns JSX element representing overlay backdrop
 */
function Backdrop(): JSX.Element;

interface IBackdropProps extends IPressableProps {
  bg?: ResponsiveValue<string>;
  backgroundColor?: ResponsiveValue<string>;
  opacity?: ResponsiveValue<number>;
}

Overlay Management Patterns

Managing Multiple Overlays

When working with multiple overlays, consider z-index stacking and focus management:

import { Modal, Popover, useDisclose } from "native-base";

function MultipleOverlaysExample() {
  const { isOpen: isModalOpen, onOpen: onModalOpen, onClose: onModalClose } = useDisclose();
  const { isOpen: isPopoverOpen, onOpen: onPopoverOpen, onClose: onPopoverClose } = useDisclose();
  
  return (
    <>
      <Button onPress={onModalOpen}>Open Modal</Button>
      
      <Modal isOpen={isModalOpen} onClose={onModalClose}>
        <Modal.Content>
          <Modal.Header>Modal with Popover</Modal.Header>
          <Modal.Body>
            <Popover 
              isOpen={isPopoverOpen} 
              onClose={onPopoverClose}
              trigger={(triggerProps) => (
                <Button {...triggerProps} onPress={onPopoverOpen}>
                  Open Popover
                </Button>
              )}
            >
              <Popover.Content>
                <Popover.Body>
                  <Text>Nested overlay content</Text>
                </Popover.Body>
              </Popover.Content>
            </Popover>
          </Modal.Body>
        </Modal.Content>
      </Modal>
    </>
  );
}

Focus Management

Proper focus management for accessibility:

import { Modal, Input } from "native-base";

function FocusManagedModal() {
  const [isOpen, setIsOpen] = React.useState(false);
  const initialRef = React.useRef(null);
  const finalRef = React.useRef(null);
  
  return (
    <>
      <Button ref={finalRef} onPress={() => setIsOpen(true)}>
        Open Modal
      </Button>
      
      <Modal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
        initialFocusRef={initialRef}
        finalFocusRef={finalRef}
      >
        <Modal.Content>
          <Modal.Header>Focus Management</Modal.Header>
          <Modal.Body>
            <Input ref={initialRef} placeholder="This input gets focus" />
          </Modal.Body>
        </Modal.Content>
      </Modal>
    </>
  );
}

docs

animations.md

basic-components.md

forms.md

hooks-utilities.md

index.md

layout.md

media-data.md

navigation-feedback.md

overlays.md

theme.md

typography.md

tile.json