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

layout.mddocs/

Layout Components

Core layout and structure components for building responsive user interfaces with flexbox-based layouts and precise spacing control.

Capabilities

Box Component

The fundamental layout component that renders as a View with styling capabilities.

/**
 * Basic layout container component with styling props
 * @param props - Box component props including styling and layout options
 * @returns JSX element representing a styled container 
 */
function Box(props: IBoxProps): JSX.Element;

interface IBoxProps extends StyledProps {
  children?: React.ReactNode;
  // Flexbox properties
  alignItems?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "stretch" | "baseline">;
  justifyContent?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly">;
  flex?: ResponsiveValue<number>;
  flexDirection?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
  flexWrap?: ResponsiveValue<"wrap" | "nowrap" | "wrap-reverse">;
  // Layout properties
  position?: ResponsiveValue<"absolute" | "relative">;
  top?: ResponsiveValue<string | number>;
  right?: ResponsiveValue<string | number>;
  bottom?: ResponsiveValue<string | number>;
  left?: ResponsiveValue<string | number>;
  zIndex?: ResponsiveValue<number>;
}

Usage Examples:

import { Box } from "native-base";

// Basic container
<Box bg="blue.500" p={4}>
  <Text>Content</Text>
</Box>

// Flexbox layout
<Box flex={1} alignItems="center" justifyContent="center">
  <Text>Centered content</Text>
</Box>

// Responsive properties
<Box 
  w={{ base: "100%", md: "50%" }}
  bg={{ base: "red.100", dark: "red.800" }}
>
  <Text>Responsive box</Text>
</Box>

Flex Component

Shorthand for Box with display flex properties.

/**
 * Flex container component with flexbox properties
 * @param props - Flex component props extending Box props
 * @returns JSX element with flex display
 */
function Flex(props: IFlexProps): JSX.Element;

interface IFlexProps extends IBoxProps {
  direction?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
  wrap?: ResponsiveValue<"wrap" | "nowrap" | "wrap-reverse">;
  align?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "stretch" | "baseline">;
  justify?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly">;
}

Stack Components

Layout components for organizing children with consistent spacing.

/**
 * Generic stack component for arranging children with spacing
 * @param props - Stack component props
 * @returns JSX element with children arranged in specified direction
 */
function Stack(props: IStackProps): JSX.Element;

/**
 * Vertical stack component arranging children vertically
 * @param props - Stack component props
 * @returns JSX element with vertical layout
 */
function VStack(props: IStackProps): JSX.Element;

/**
 * Horizontal stack component arranging children horizontally  
 * @param props - Stack component props
 * @returns JSX element with horizontal layout
 */
function HStack(props: IStackProps): JSX.Element;

/**
 * Z-axis stack component for layering children
 * @param props - ZStack component props
 * @returns JSX element with z-index based layering
 */
function ZStack(props: IZStackProps): JSX.Element;

interface IStackProps extends IBoxProps {
  space?: ResponsiveValue<string | number>;
  divider?: JSX.Element;
  reversed?: boolean;
}

interface IZStackProps extends IBoxProps {
  reversed?: boolean;
}

Usage Examples:

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

// Vertical stack with spacing
<VStack space={4} alignItems="center">
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Button>Action</Button>
</VStack>

// Horizontal stack with divider
<HStack space={2} divider={<Divider />}>
  <Text>Left</Text>
  <Text>Right</Text>
</HStack>

Center Component

Component for centering content both horizontally and vertically.

/**
 * Centers its children both horizontally and vertically
 * @param props - Center component props
 * @returns JSX element with centered content
 */
function Center(props: ICenterProps): JSX.Element;

/**
 * Square container that centers content
 * @param props - Square component props
 * @returns JSX element with equal width/height
 */
function Square(props: ISquareProps): JSX.Element;

/**
 * Circular container that centers content
 * @param props - Circle component props  
 * @returns JSX element with circular shape
 */
function Circle(props: ICircleProps): JSX.Element;

interface ICenterProps extends IBoxProps {}

interface ISquareProps extends ICenterProps {
  size?: ResponsiveValue<string | number>;
}

interface ICircleProps extends ISquareProps {}

Column and Row Components

Simple layout components for basic grid-like arrangements.

/**
 * Column layout component
 * @param props - Box component props
 * @returns JSX element with column layout
 */
function Column(props: IBoxProps): JSX.Element;

/**
 * Row layout component
 * @param props - Box component props
 * @returns JSX element with row layout
 */
function Row(props: IBoxProps): JSX.Element;

Container Component

Responsive container component with max-width constraints.

/**
 * Responsive container with max-width constraints
 * @param props - Container component props
 * @returns JSX element with responsive container behavior
 */
function Container(props: IContainerProps): JSX.Element;

interface IContainerProps extends IBoxProps {
  centerContent?: boolean;
  maxW?: ResponsiveValue<string | number>;
}

Spacer Component

Flexible space component that expands to fill available space.

/**
 * Flexible spacer component that fills available space
 * @returns JSX element that expands to fill space
 */
function Spacer(): JSX.Element;

Aspect Ratio Component

Component for maintaining specific aspect ratios.

/**
 * Maintains aspect ratio for its children
 * @param props - AspectRatio component props
 * @returns JSX element with specified aspect ratio
 */
function AspectRatio(props: IAspectRatioProps): JSX.Element;

interface IAspectRatioProps extends IBoxProps {
  ratio?: number;
}

Usage Example:

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

<AspectRatio w="100%" ratio={16/9}>
  <Image source={{ uri: "https://example.com/image.jpg" }} alt="Image" />
</AspectRatio>

Divider Component

Visual separator component for organizing content.

/**
 * Visual divider for separating content
 * @param props - Divider component props
 * @returns JSX element representing a divider line
 */
function Divider(props: IDividerProps): JSX.Element;

interface IDividerProps extends IBoxProps {
  orientation?: "horizontal" | "vertical";
  thickness?: ResponsiveValue<string | number>;
}

Wrap Component

Component for wrapping children with flexible layouts.

/**
 * Wraps children with flexible layout and spacing
 * @param props - Wrap component props
 * @returns JSX element with wrapped layout
 */
function Wrap(props: IWrapProps): JSX.Element;

interface IWrapProps extends IBoxProps {
  spacing?: ResponsiveValue<string | number>;
  spacingX?: ResponsiveValue<string | number>;
  spacingY?: ResponsiveValue<string | number>;
  shouldWrapChildren?: boolean;
}

SimpleGrid Component

Simple grid layout component with responsive columns.

/**
 * Simple grid layout with responsive column support
 * @param props - SimpleGrid component props
 * @returns JSX element with grid layout
 */
function SimpleGrid(props: ISimpleGridProps): JSX.Element;

interface ISimpleGridProps extends IBoxProps {
  columns?: ResponsiveValue<number>;
  spacing?: ResponsiveValue<string | number>;
  spacingX?: ResponsiveValue<string | number>;
  spacingY?: ResponsiveValue<string | number>;
  minChildWidth?: ResponsiveValue<string | number>;
}

Usage Example:

import { SimpleGrid, Box } from "native-base";

<SimpleGrid columns={2} spacing={4}>
  <Box bg="red.100" p={4}>Item 1</Box>
  <Box bg="blue.100" p={4}>Item 2</Box>
  <Box bg="green.100" p={4}>Item 3</Box>
  <Box bg="yellow.100" p={4}>Item 4</Box>
</SimpleGrid>

Pressable Component

Fundamental interaction component that wraps React Native's Pressable with enhanced styling and state management capabilities.

/**
 * Interactive component that responds to touch and keyboard events
 * @param props - Pressable component props
 * @returns JSX element representing a pressable interaction area
 */
function Pressable(props: IPressableProps): JSX.Element;

interface IPressableProps extends PressableProps, StyledProps {
  children?: React.ReactNode | ((state: PressableState) => React.ReactNode);
  onPress?: () => void;
  onPressIn?: () => void;
  onPressOut?: () => void;
  onHoverIn?: () => void;
  onHoverOut?: () => void;
  onFocus?: () => void;
  onBlur?: () => void;
  isDisabled?: boolean;
  isHovered?: boolean;
  isPressed?: boolean;
  isFocused?: boolean;
  isFocusVisible?: boolean;
  _hover?: Partial<IPressableProps>;
  _pressed?: Partial<IPressableProps>;
  _focus?: Partial<IPressableProps>;
  _focusVisible?: Partial<IPressableProps>;
  _disabled?: Partial<IPressableProps>;
}

interface PressableState {
  isPressed: boolean;
  isHovered: boolean;
  isFocused: boolean;
}

Usage Examples:

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

// Basic pressable area
<Pressable onPress={() => console.log("Pressed!")}>
  <Box p={4} bg="blue.500" rounded="md">
    <Text color="white">Press me</Text>
  </Box>
</Pressable>

// Pressable with state-based styling
<Pressable
  onPress={() => console.log("Card pressed")}
  _pressed={{ bg: "gray.100" }}
  _hover={{ bg: "gray.50" }}
  _focus={{ bg: "gray.100", borderColor: "blue.500", borderWidth: 2 }}
>
  <Box p={4} borderWidth={1} borderColor="gray.200" rounded="lg">
    <Text>Interactive card</Text>
  </Box>
</Pressable>

// Pressable with render function for dynamic children
<Pressable>
  {({ isPressed, isHovered }) => (
    <Box 
      p={4} 
      bg={isPressed ? "red.600" : isHovered ? "red.500" : "red.400"}
      rounded="md"
      transform={[{ scale: isPressed ? 0.95 : 1 }]}
    >
      <Text color="white">
        {isPressed ? "Pressing..." : "Press me"}
      </Text>
    </Box>
  )}
</Pressable>

// Disabled pressable
<Pressable 
  isDisabled 
  _disabled={{ opacity: 0.5 }}
  onPress={() => console.log("This won't fire")}
>
  <Box p={4} bg="gray.300" rounded="md">
    <Text>Disabled button</Text>
  </Box>
</Pressable>

Hidden Component

Utility component for conditionally hiding content based on breakpoints, color modes, or platforms.

/**
 * Utility component for responsive and conditional visibility
 * @param props - Hidden component props
 * @returns JSX element that conditionally renders children
 */
function Hidden(props: IHiddenProps): JSX.Element;

interface IHiddenProps {
  from?: "base" | "sm" | "md" | "lg" | "xl";
  till?: "base" | "sm" | "md" | "lg" | "xl";
  only?: "base" | "sm" | "md" | "lg" | "xl" | Array<"base" | "sm" | "md" | "lg" | "xl">;
  colorMode?: "light" | "dark";
  platform?: "ios" | "android" | "web" | Array<"ios" | "android" | "web">;
  children: React.ReactElement | null;
  isSSR?: boolean;
}

Usage Examples:

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

// Hide content on specific breakpoints
<Hidden from="md">
  <Box p={4} bg="blue.500">
    <Text color="white">Hidden on medium screens and up</Text>
  </Box>
</Hidden>

<Hidden till="sm">
  <Box p={4} bg="green.500">
    <Text color="white">Hidden until small screens</Text>
  </Box>
</Hidden>

// Hide content only on specific breakpoints
<Hidden only={["sm", "md"]}>
  <Box p={4} bg="red.500">
    <Text color="white">Hidden only on small and medium screens</Text>
  </Box>
</Hidden>

// Hide content based on color mode
<Hidden colorMode="dark">
  <Box p={4} bg="yellow.400">
    <Text>Only visible in light mode</Text>
  </Box>
</Hidden>

<Hidden colorMode="light">
  <Box p={4} bg="gray.700">
    <Text color="white">Only visible in dark mode</Text>
  </Box>
</Hidden>

// Hide content on specific platforms
<Hidden platform="web">
  <Box p={4} bg="purple.500">
    <Text color="white">Hidden on web, visible on mobile</Text>
  </Box>
</Hidden>

<Hidden platform={["ios", "android"]}>
  <Box p={4} bg="orange.500">
    <Text color="white">Only visible on web</Text>
  </Box>
</Hidden>

// Complex responsive layout
<Box>
  <Hidden till="md">
    <Text fontSize="xs">Mobile layout</Text>
  </Hidden>
  <Hidden from="md" till="lg">
    <Text fontSize="sm">Tablet layout</Text>
  </Hidden>
  <Hidden from="lg">
    <Text fontSize="md">Desktop layout</Text>
  </Hidden>
</Box>

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