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

media-data.mddocs/

Media & Data Display

Images, icons, avatars, lists, and data presentation components for rich content display and user interface elements.

Capabilities

Image Component

Image display component with responsive sizing and loading states.

/**
 * Image component with responsive sizing and loading states
 * @param props - Image component props
 * @returns JSX element representing an image
 */
function Image(props: IImageProps): JSX.Element;

interface IImageProps extends StyledProps {
  source: { uri: string } | number;
  alt: string;
  size?: ResponsiveValue<string | number>;
  htmlWidth?: string | number;
  htmlHeight?: string | number;
  fallbackSrc?: string;
  fallback?: JSX.Element;
  ignoreFallback?: boolean;
  loading?: "eager" | "lazy";
  crossOrigin?: string;
  referrerPolicy?: string;
  // React Native Image props
  resizeMode?: "cover" | "contain" | "stretch" | "repeat" | "center";
  onLoad?: () => void;
  onError?: () => void;
  onLoadStart?: () => void;
  onLoadEnd?: () => void;
  onProgress?: (event: any) => void;
  testID?: string;
  accessibilityLabel?: string;
  blurRadius?: number;
  capInsets?: { top: number; left: number; bottom: number; right: number };
  defaultSource?: { uri: string } | number;
  loadingIndicatorSource?: { uri: string } | number;
  progressiveRenderingEnabled?: boolean;
  fadeDuration?: number;
}

Usage Examples:

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

function ImageExamples() {
  return (
    <VStack space={4}>
      {/* Basic image */}
      <Image 
        source={{ uri: "https://example.com/image.jpg" }}
        alt="Example image"
        size="lg"
      />
      
      {/* Responsive image */}
      <Image 
        source={{ uri: "https://example.com/hero.jpg" }}
        alt="Hero image"
        w={{ base: "100%", md: "50%" }}
        h={{ base: "200", md: "300" }}
        resizeMode="cover"
      />
      
      {/* Image with fallback */}
      <Image 
        source={{ uri: "https://broken-link.jpg" }}
        fallbackSrc="https://via.placeholder.com/150"
        alt="Image with fallback"
        size="md"
      />
      
      {/* Image with custom fallback element */}
      <Image 
        source={{ uri: "https://broken-link.jpg" }}
        fallback={
          <Box bg="gray.100" size="150" alignItems="center" justifyContent="center">
            <Text>No Image</Text>
          </Box>
        }
        alt="Custom fallback"
      />
      
      {/* Circular image */}
      <Image 
        source={{ uri: "https://example.com/profile.jpg" }}
        alt="Profile"
        size="100"
        borderRadius="full"
      />
    </VStack>
  );
}

Icon Component

Icon display component with extensive icon library and customization options.

/**
 * Icon component for displaying vector icons
 * @param props - Icon component props
 * @returns JSX element representing an icon
 */
function Icon(props: IIconProps): JSX.Element;

/**
 * Create custom icon component from SVG path
 * @param options - Icon creation options
 * @returns Custom icon component
 */
function createIcon(options: IconOptions): React.ComponentType<IIconProps>;

interface IIconProps extends StyledProps {
  name?: string;
  size?: ResponsiveValue<string | number>;
  color?: ResponsiveValue<string>;
  as?: React.ComponentType<any>;
  viewBox?: string;
  children?: React.ReactNode;
  focusable?: boolean;
  role?: string;
  // Accessibility
  accessibilityLabel?: string;
}

interface IconOptions {
  displayName?: string;
  viewBox?: string;
  path?: JSX.Element | JSX.Element[];
  d?: string;
  defaultProps?: Partial<IIconProps>;
}

Usage Examples:

import { Icon, HStack, VStack, createIcon } from "native-base";
import { AddIcon, SearchIcon, StarIcon } from "native-base";

// Create custom icon
const CustomIcon = createIcon({
  viewBox: "0 0 24 24",
  d: "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
});

function IconExamples() {
  return (
    <VStack space={4}>
      {/* Built-in icons */}
      <HStack space={3} alignItems="center">
        <AddIcon size="sm" />
        <SearchIcon size="md" />
        <StarIcon size="lg" />
      </HStack>
      
      {/* Colored icons */}
      <HStack space={3} alignItems="center">
        <AddIcon color="blue.500" />
        <SearchIcon color="green.500" />
        <StarIcon color="yellow.500" />
      </HStack>
      
      {/* Responsive icons */}
      <Icon 
        as={StarIcon}
        size={{ base: "sm", md: "lg" }}
        color={{ base: "gray.400", _dark: "gray.600" }}
      />
      
      {/* Custom icon */}
      <CustomIcon size="xl" color="purple.500" />
    </VStack>
  );
}

Avatar Component

Avatar component for user profile images and initials.

/**
 * Avatar component for user profile representation
 * @param props - Avatar component props
 * @returns JSX element representing a user avatar
 */
function Avatar(props: IAvatarProps): JSX.Element;

interface IAvatarProps extends StyledProps {
  name?: string;
  source?: { uri: string } | number;
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | string | number;
  showBorder?: boolean;
  borderColor?: ResponsiveValue<string>;
  borderWidth?: ResponsiveValue<string | number>;
  _text?: ITextProps;
  children?: React.ReactNode;
  // Fallback props
  getInitials?: (name: string) => string;
  ignoreFallback?: boolean;
}

Usage Examples:

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

function AvatarExamples() {
  return (
    <VStack space={4}>
      {/* Avatar sizes */}
      <HStack space={2} alignItems="center">
        <Avatar size="xs" name="John Doe" />
        <Avatar size="sm" name="Jane Smith" />
        <Avatar size="md" name="Bob Johnson" />
        <Avatar size="lg" name="Alice Brown" />
        <Avatar size="xl" name="Charlie Wilson" />
      </HStack>
      
      {/* Avatar with image */}
      <Avatar 
        source={{ uri: "https://example.com/profile.jpg" }}
        name="John Doe"
        size="lg"
      />
      
      {/* Avatar with border */}
      <Avatar 
        name="Jane Smith"
        size="xl"
        showBorder
        borderColor="blue.500"
        borderWidth="2"
      />
      
      {/* Avatar group */}
      <Avatar.Group spacing={-2} max={3}>
        <Avatar name="John Doe" />
        <Avatar name="Jane Smith" />
        <Avatar name="Bob Johnson" />
        <Avatar name="Alice Brown" />
        <Avatar name="Charlie Wilson" />
      </Avatar.Group>
      
      {/* Custom avatar */}
      <Avatar bg="purple.500" size="lg">
        <Avatar.Badge bg="green.500" />
        <Text color="white" fontSize="lg" fontWeight="bold">
          JD
        </Text>
      </Avatar>
    </VStack>
  );
}

List Component

List component for displaying structured data with various layouts.

/**
 * List component for displaying structured data
 * @param props - List component props
 * @returns JSX element representing a structured list
 */
function List(props: IListProps): JSX.Element;

interface IListProps extends StyledProps {
  spacing?: ResponsiveValue<string | number>;
  children?: React.ReactNode;
}

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

Usage Examples:

import { List, HStack, VStack, Text, Icon, CheckIcon } from "native-base";

function ListExamples() {
  return (
    <VStack space={4}>
      {/* Basic list */}
      <List spacing={2}>
        <List.Item>
          <Text>First item</Text>
        </List.Item>
        <List.Item>
          <Text>Second item</Text>
        </List.Item>
        <List.Item>
          <Text>Third item</Text>
        </List.Item>
      </List>
      
      {/* List with icons */}
      <List spacing={3}>
        <List.Item>
          <HStack space={2} alignItems="center">
            <CheckIcon size="sm" color="green.500" />
            <Text>Completed task</Text>
          </HStack>
        </List.Item>
        <List.Item>
          <HStack space={2} alignItems="center">
            <CheckIcon size="sm" color="green.500" />
            <Text>Another completed task</Text>
          </HStack>
        </List.Item>
      </List>
      
      {/* Complex list items */}
      <List spacing={3}>
        <List.Item>
          <HStack space={3} alignItems="center">
            <Avatar size="sm" name="John Doe" />
            <VStack flex={1}>
              <Text fontWeight="bold">John Doe</Text>
              <Text fontSize="sm" color="gray.500">
                Software Engineer
              </Text>
            </VStack>
            <Badge colorScheme="success">Online</Badge>
          </HStack>
        </List.Item>
        <List.Item>
          <HStack space={3} alignItems="center">
            <Avatar size="sm" name="Jane Smith" />
            <VStack flex={1}>
              <Text fontWeight="bold">Jane Smith</Text>
              <Text fontSize="sm" color="gray.500">
                Product Manager
              </Text>
            </VStack>
            <Badge colorScheme="gray">Offline</Badge>
          </HStack>
        </List.Item>
      </List>
    </VStack>
  );
}

Card Component

Card component for grouping related content with consistent styling.

/**
 * Card component for content grouping
 * @param props - Card component props
 * @returns JSX element representing a content card
 */
function Card(props: ICardProps): JSX.Element;

interface ICardProps extends IBoxProps {
  variant?: "outline" | "filled" | "elevated" | "unstyled";
  children?: React.ReactNode;
}

Usage Examples:

import { Card, Text, Image, VStack, HStack, Button } from "native-base";

function CardExamples() {
  return (
    <VStack space={4}>
      {/* Basic card */}
      <Card>
        <Card.Body>
          <Text fontWeight="bold" fontSize="lg">
            Card Title
          </Text>
          <Text>
            This is the card content. It can contain any type of content.
          </Text>
        </Card.Body>
      </Card>
      
      {/* Card with header and footer */}
      <Card>
        <Card.Header>
          <Text fontWeight="bold" fontSize="lg">
            Article Title
          </Text>
        </Card.Header>
        <Card.Body>
          <Text>
            Article content goes here. This is a longer description of the article.
          </Text>
        </Card.Body>
        <Card.Footer>
          <HStack space={2}>
            <Button size="sm" variant="ghost">
              Read More
            </Button>
            <Button size="sm">
              Share
            </Button>
          </HStack>
        </Card.Footer>
      </Card>
      
      {/* Card with image */}
      <Card maxW="sm">
        <Image 
          source={{ uri: "https://example.com/image.jpg" }}
          alt="Card image"
          w="100%"
          h="200"
        />
        <Card.Body>
          <VStack space={2}>
            <Text fontWeight="bold" fontSize="lg">
              Image Card
            </Text>
            <Text>
              Card with an image at the top.
            </Text>
          </VStack>
        </Card.Body>
      </Card>
      
      {/* Elevated card */}
      <Card variant="elevated" shadow="lg">
        <Card.Body>
          <Text fontWeight="bold">Elevated Card</Text>
          <Text>This card has elevation and shadow.</Text>
        </Card.Body>
      </Card>
    </VStack>
  );
}

Code Component

Code display component for syntax highlighting and code snippets.

/**
 * Code component for displaying code snippets
 * @returns JSX element representing formatted code
 */
function Code(): JSX.Element;

Usage Example:

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

function CodeExample() {
  return (
    <VStack space={3}>
      <Text>Inline code: <Code>console.log('hello')</Code></Text>
      
      <Code>
        {`function greet(name) {
  return \`Hello, \${name}!\`;
}`}
      </Code>
    </VStack>
  );
}

Tag Component

Tag component for labels, categories, and metadata.

/**
 * Tag component for labels and categories
 * @param props - Tag component props
 * @returns JSX element representing a tag
 */
function Tag(props: ITagProps): JSX.Element;

interface ITagProps extends StyledProps {
  children?: React.ReactNode;
  variant?: "solid" | "subtle" | "outline";
  colorScheme?: string;
  size?: "sm" | "md" | "lg";
  startIcon?: JSX.Element;
  endIcon?: JSX.Element;
  onClose?: () => void;
  isDisabled?: boolean;
  _text?: ITextProps;
}

Usage Examples:

import { Tag, HStack, VStack, CloseIcon } from "native-base";

function TagExamples() {
  return (
    <VStack space={4}>
      {/* Basic tags */}
      <HStack space={2} flexWrap="wrap">
        <Tag>Default</Tag>
        <Tag colorScheme="blue">Blue</Tag>
        <Tag colorScheme="green">Green</Tag>
        <Tag colorScheme="red">Red</Tag>
      </HStack>
      
      {/* Tag variants */}
      <HStack space={2} flexWrap="wrap">
        <Tag variant="solid" colorScheme="blue">Solid</Tag>
        <Tag variant="subtle" colorScheme="blue">Subtle</Tag>
        <Tag variant="outline" colorScheme="blue">Outline</Tag>
      </HStack>
      
      {/* Tag sizes */}
      <HStack space={2} alignItems="center">
        <Tag size="sm">Small</Tag>
        <Tag size="md">Medium</Tag>
        <Tag size="lg">Large</Tag>
      </HStack>
      
      {/* Closable tags */}
      <HStack space={2} flexWrap="wrap">
        <Tag>
          <Tag.Label>Closable Tag</Tag.Label>
          <Tag.CloseButton />
        </Tag>
        <Tag colorScheme="green">
          <Tag.Label>Another Tag</Tag.Label>
          <Tag.CloseButton />
        </Tag>
      </HStack>
    </VStack>
  );
}

Data Display Patterns

Data Tables

Creating table-like layouts with NativeBase components:

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

function DataTable() {
  const data = [
    { name: "John Doe", role: "Developer", status: "Active" },
    { name: "Jane Smith", role: "Designer", status: "Active" },
    { name: "Bob Johnson", role: "Manager", status: "Inactive" },
  ];
  
  return (
    <VStack space={2}>
      {/* Header */}
      <HStack space={4} p={2} bg="gray.100">
        <Text flex={2} fontWeight="bold">Name</Text>
        <Text flex={2} fontWeight="bold">Role</Text>
        <Text flex={1} fontWeight="bold">Status</Text>
      </HStack>
      
      <Divider />
      
      {/* Data rows */}
      {data.map((item, index) => (
        <VStack key={index}>
          <HStack space={4} p={2}>
            <Text flex={2}>{item.name}</Text>
            <Text flex={2}>{item.role}</Text>
            <Badge 
              flex={1} 
              colorScheme={item.status === 'Active' ? 'success' : 'gray'}
            >
              {item.status}
            </Badge>
          </HStack>
          {index < data.length - 1 && <Divider />}
        </VStack>
      ))}
    </VStack>
  );
}

Gallery Layouts

Creating image galleries and media grids:

import { SimpleGrid, Image, AspectRatio } from "native-base";

function ImageGallery() {
  const images = [
    "https://example.com/image1.jpg",
    "https://example.com/image2.jpg",
    "https://example.com/image3.jpg",
    "https://example.com/image4.jpg",
  ];
  
  return (
    <SimpleGrid columns={2} spacing={4}>
      {images.map((src, index) => (
        <AspectRatio key={index} ratio={1}>
          <Image source={{ uri: src }} alt={`Image ${index + 1}`} />
        </AspectRatio>
      ))}
    </SimpleGrid>
  );
}

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