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

navigation-feedback.mddocs/

Navigation & Feedback

Navigation aids, alerts, progress indicators, user feedback components, and status communication elements.

Capabilities

Alert Component

Alert component for displaying important messages and notifications.

/**
 * Alert component for displaying important messages
 * @param props - Alert component props
 * @returns JSX element representing an alert message
 */
function Alert(props: IAlertProps): JSX.Element;

interface IAlertProps extends StyledProps {
  status?: "info" | "warning" | "success" | "error";
  variant?: "solid" | "left-accent" | "top-accent" | "subtle";
  colorScheme?: string;
  children?: React.ReactNode;
  flexDirection?: "row" | "column";
}

Usage Examples:

import { Alert, VStack } from "native-base";

function AlertExamples() {
  return (
    <VStack space={3}>
      {/* Status alerts */}
      <Alert status="info">
        <Alert.Icon />
        <Alert.Title>Info Alert</Alert.Title>
        <Alert.Description>
          This is an informational message.
        </Alert.Description>
      </Alert>
      
      <Alert status="warning">
        <Alert.Icon />
        <Alert.Title>Warning Alert</Alert.Title>
        <Alert.Description>
          This is a warning message.
        </Alert.Description>
      </Alert>
      
      <Alert status="success">
        <Alert.Icon />
        <Alert.Title>Success Alert</Alert.Title>
        <Alert.Description>
          Operation completed successfully.
        </Alert.Description>
      </Alert>
      
      <Alert status="error">
        <Alert.Icon />
        <Alert.Title>Error Alert</Alert.Title>
        <Alert.Description>
          An error has occurred.
        </Alert.Description>
      </Alert>
      
      {/* Variant alerts */}
      <Alert variant="left-accent" status="info">
        <Alert.Icon />
        <Alert.Title>Left Accent Alert</Alert.Title>
      </Alert>
      
      <Alert variant="solid" status="success">
        <Alert.Icon />
        <Alert.Title>Solid Alert</Alert.Title>
      </Alert>
    </VStack>
  );
}

Badge Component

Badge component for status indicators and labels.

/**
 * Badge component for status indicators and labels
 * @param props - Badge component props
 * @returns JSX element representing a badge
 */
function Badge(props: IBadgeProps): JSX.Element;

interface IBadgeProps extends StyledProps {
  children?: React.ReactNode;
  variant?: "solid" | "outline" | "subtle";
  colorScheme?: string;
  startIcon?: JSX.Element;
  endIcon?: JSX.Element;
  leftIcon?: JSX.Element;
  rightIcon?: JSX.Element;
  _text?: ITextProps;
  _icon?: IIconProps;
}

Usage Examples:

import { Badge, HStack, Text, CheckIcon } from "native-base";

function BadgeExamples() {
  return (
    <VStack space={3}>
      {/* Basic badges */}
      <HStack space={2}>
        <Badge>Default</Badge>
        <Badge colorScheme="primary">Primary</Badge>
        <Badge colorScheme="success">Success</Badge>
        <Badge colorScheme="warning">Warning</Badge>
        <Badge colorScheme="danger">Danger</Badge>
      </HStack>
      
      {/* Variant badges */}
      <HStack space={2}>
        <Badge variant="solid" colorScheme="info">Solid</Badge>
        <Badge variant="outline" colorScheme="info">Outline</Badge>
        <Badge variant="subtle" colorScheme="info">Subtle</Badge>
      </HStack>
      
      {/* Badges with icons */}
      <HStack space={2}>
        <Badge leftIcon={<CheckIcon size="xs" />} colorScheme="success">
          Completed
        </Badge>
        <Badge rightIcon={<Icon name='star' size="xs" />} colorScheme="warning">
          Featured  
        </Badge>
      </HStack>
      
      {/* Badges in context */}
      <HStack space={2} alignItems="center">
        <Text>Status:</Text>
        <Badge colorScheme="success">Active</Badge>
      </HStack>
    </VStack>
  );
}

Progress Components

Progress indicators for showing task completion and loading states.

/**
 * Linear progress indicator component
 * @returns JSX element representing a progress bar
 */
function Progress(): JSX.Element;

/**
 * Circular progress indicator component
 * @returns JSX element representing a circular progress indicator
 */
function CircularProgress(): JSX.Element;

Usage Examples:

import { Progress, CircularProgress, VStack, Text } from "native-base";

function ProgressExamples() {
  const [progress, setProgress] = React.useState(45);
  
  return (
    <VStack space={4}>
      {/* Linear progress */}
      <VStack space={2}>
        <Text>Upload Progress: {progress}%</Text>
        <Progress value={progress} mx={4} />
      </VStack>
      
      {/* Colored progress */}
      <Progress value={75} colorScheme="success" />
      
      {/* Circular progress */}
      <CircularProgress value={progress} />
      
      {/* Indeterminate progress */}
      <Progress isIndeterminate />
    </VStack>
  );
}

Toast Component and Hook

Toast notifications for temporary messages and feedback.

/**
 * Toast component for displaying temporary notifications
 * @param props - Toast component props
 * @returns JSX element representing a toast notification
 */
function Toast(props: IToastProps): JSX.Element;

/**
 * Hook for managing toast notifications
 * @returns Toast management functions
 */
function useToast(): ToastFunction;

interface IToastProps extends StyledProps {
  id?: string | number;
  title?: string;
  description?: string;
  status?: "info" | "warning" | "success" | "error";
  duration?: number;
  isClosable?: boolean;
  placement?: "top" | "top-right" | "top-left" | "bottom" | "bottom-left" | "bottom-right";
  render?: (props: any) => JSX.Element;
  onCloseComplete?: () => void;
  variant?: "solid" | "subtle" | "left-accent" | "top-accent" | "outline";
  accessibilityAnnouncement?: string;
  accessibilityLiveRegion?: "polite" | "assertive";
}

interface ToastFunction {
  show: (props: IToastProps) => string | number;
  close: (id: string | number) => void;
  closeAll: () => void;
  update: (id: string | number, props: Partial<IToastProps>) => void;
  isActive: (id: string | number) => boolean;
}

Usage Examples:

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

function ToastExamples() {
  const toast = useToast();
  
  const showSuccessToast = () => {
    toast.show({
      title: "Success",
      description: "Operation completed successfully",
      status: "success",
      duration: 3000,
      isClosable: true,
    });
  };
  
  const showErrorToast = () => {
    toast.show({
      title: "Error",
      description: "Something went wrong",
      status: "error",
      placement: "top",
    });
  };
  
  const showCustomToast = () => {
    toast.show({
      render: ({ id }) => (
        <Box bg="blue.500" px={4} py={2} rounded="md">
          <Text color="white">Custom toast content</Text>
        </Box>
      ),
    });
  };
  
  return (
    <VStack space={3}>
      <Button onPress={showSuccessToast}>Show Success Toast</Button>
      <Button onPress={showErrorToast}>Show Error Toast</Button>
      <Button onPress={showCustomToast}>Show Custom Toast</Button>
      <Button onPress={() => toast.closeAll()}>Close All Toasts</Button>
    </VStack>
  );
}

Breadcrumb Component

Navigation breadcrumb component for hierarchical navigation.

/**
 * Breadcrumb navigation component
 * @param props - Breadcrumb component props
 * @returns JSX element representing navigation breadcrumbs
 */
function Breadcrumb(props: IBreadcrumbProps): JSX.Element;

interface IBreadcrumbProps extends StyledProps {
  separator?: JSX.Element | string;
  spacing?: ResponsiveValue<string | number>;
  children?: React.ReactNode;
}

Usage Examples:

import { Breadcrumb, ChevronRightIcon } from "native-base";

function BreadcrumbExamples() {
  return (
    <VStack space={4}>
      {/* Basic breadcrumb */}
      <Breadcrumb>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Category</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item isCurrentPage>
          <Breadcrumb.Link>Current Page</Breadcrumb.Link>
        </Breadcrumb.Item>
      </Breadcrumb>
      
      {/* Custom separator */}
      <Breadcrumb separator={<ChevronRightIcon size="xs" />}>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Components</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item isCurrentPage>
          <Breadcrumb.Link>Breadcrumb</Breadcrumb.Link>
        </Breadcrumb.Item>
      </Breadcrumb>
    </VStack>
  );
}

Skeleton Component

Skeleton loader component for loading states.

/**
 * Skeleton loader component for loading states
 * @param props - Skeleton component props
 * @returns JSX element representing a skeleton loader
 */
function Skeleton(props: ISkeletonProps): JSX.Element;

interface ISkeletonProps extends StyledProps {
  children?: React.ReactNode;
  isLoaded?: boolean;
  fadeDuration?: number;
  speed?: number;
  colorScheme?: string;
  startColor?: string;
  endColor?: string;
  size?: string | number;
  height?: ResponsiveValue<string | number>;
  width?: ResponsiveValue<string | number>;
}

Usage Examples:

import { Skeleton, VStack, HStack, Text } from "native-base";

function SkeletonExamples() {
  const [isLoaded, setIsLoaded] = React.useState(false);
  
  React.useEffect(() => {
    const timer = setTimeout(() => setIsLoaded(true), 3000);
    return () => clearTimeout(timer);
  }, []);
  
  return (
    <VStack space={4}>
      {/* Basic skeleton */}
      <Skeleton h="20" />
      
      {/* Skeleton with content */}
      <Skeleton isLoaded={isLoaded}>
        <Text>This content will show after loading</Text>
      </Skeleton>
      
      {/* Skeleton composition */}
      <VStack space={3}>
        <HStack space={2}>
          <Skeleton size="40" rounded="full" />
          <VStack space={2} flex={1}>
            <Skeleton h="3" />
            <Skeleton h="3" w="70%" />
          </VStack>
        </HStack>
        
        <Skeleton h="32" />
        
        <HStack space={2}>
          <Skeleton h="3" flex={1} />
          <Skeleton h="3" flex={1} />
          <Skeleton h="3" flex={1} />
        </HStack>
      </VStack>
      
      {/* Custom colors */}
      <Skeleton 
        h="20" 
        startColor="coolGray.100" 
        endColor="warmGray.300" 
      />
    </VStack>
  );
}

Spinner Component

Loading spinner component for indicating activity.

/**
 * Loading spinner component
 * @param props - Spinner component props
 * @returns JSX element representing a loading spinner
 */
function Spinner(props: ISpinnerProps): JSX.Element;

interface ISpinnerProps extends StyledProps {
  size?: "sm" | "lg" | number;
  color?: ResponsiveValue<string>;
  thickness?: string;
  speed?: string;
  emptyColor?: string;
  label?: string;
  accessibilityLabel?: string;
}

Usage Examples:

import { Spinner, HStack, VStack, Text } from "native-base";

function SpinnerExamples() {
  return (
    <VStack space={4}>
      {/* Basic spinners */}
      <HStack space={4} alignItems="center">
        <Spinner size="sm" />
        <Spinner />
        <Spinner size="lg" />
      </HStack>
      
      {/* Colored spinners */}
      <HStack space={4} alignItems="center">
        <Spinner color="blue.500" />
        <Spinner color="green.500" />
        <Spinner color="red.500" />
      </HStack>
      
      {/* Spinner with text */}
      <HStack space={2} alignItems="center">
        <Spinner color="blue.500" />
        <Text>Loading...</Text>
      </HStack>
      
      {/* Custom spinner */}
      <Spinner 
        thickness="4px"
        speed="0.65s"
        emptyColor="gray.200"
        color="blue.500"
        size="xl"
      />
    </VStack>
  );
}

Feedback Patterns

Loading States

Common patterns for handling loading states:

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

function LoadingStates() {
  const [isLoading, setIsLoading] = React.useState(false);
  const [data, setData] = React.useState(null);
  
  const loadData = async () => {
    setIsLoading(true);
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));
      setData("Loaded data");
    } finally {
      setIsLoading(false);
    }
  };
  
  return (
    <VStack space={4}>
      <Button onPress={loadData} isLoading={isLoading}>
        Load Data
      </Button>
      
      <Skeleton isLoaded={!isLoading}>
        <Text>{data || "No data loaded"}</Text>
      </Skeleton>
    </VStack>
  );
}

Status Communication

Comprehensive status communication patterns:

import { Alert, Badge, Toast, useToast, VStack, HStack } from "native-base";

function StatusCommunication() {
  const toast = useToast();
  
  const showStatus = (status: string) => {
    toast.show({
      title: `Status: ${status}`,
      status: status as any,
      duration: 2000,
    });
  };
  
  return (
    <VStack space={4}>
      {/* Persistent status */}
      <Alert status="info">
        <Alert.Icon />
        <Alert.Title>System Status</Alert.Title>
        <Alert.Description>All systems operational</Alert.Description>
      </Alert>
      
      {/* Quick status indicators */}
      <HStack space={2} alignItems="center">
        <Text>Server:</Text>
        <Badge colorScheme="success">Online</Badge>
        <Text>Database:</Text>
        <Badge colorScheme="warning">Slow</Badge>
      </HStack>
      
      {/* Temporary feedback */}
      <HStack space={2}>
        <Button onPress={() => showStatus('success')}>Success</Button>
        <Button onPress={() => showStatus('error')}>Error</Button>
        <Button onPress={() => showStatus('warning')}>Warning</Button>
      </HStack>
    </VStack>
  );
}

Fab Component

Floating Action Button component for primary actions that remain accessible throughout the user's journey.

/**
 * Floating Action Button for primary actions
 * @param props - Fab component props
 * @returns JSX element representing a floating action button
 */
function Fab(props: IFabProps): JSX.Element;

interface IFabProps extends IButtonProps {
  placement?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
  label?: JSX.Element | string;
  icon?: JSX.Element;
  renderInPortal?: boolean;
}

Usage Examples:

import { Fab, AddIcon, EditIcon } from "native-base";

// Basic FAB
<Fab
  icon={<AddIcon />}
  onPress={() => console.log("Add new item")}
/>

// FAB with label
<Fab
  icon={<AddIcon />}
  label="Add Item"
  onPress={() => console.log("Add new item")}
/>

// FAB with custom placement
<Fab
  placement="top-right"
  icon={<EditIcon />}
  colorScheme="blue"
  onPress={() => console.log("Edit mode")}
/>

// FAB with custom styling
<Fab
  icon={<AddIcon />}
  bg="gradient.500"
  shadow={4}
  size="lg"
  _pressed={{ bg: "gradient.600" }}
  onPress={() => console.log("Create something")}
/>

// FAB rendered outside portal (for specific layout needs)
<Fab
  icon={<AddIcon />}
  renderInPortal={false}
  placement="bottom-right"
  onPress={() => console.log("Add in context")}
/>

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