or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animations.mdbasic-components.mdforms.mdhooks-utilities.mdindex.mdlayout.mdmedia-data.mdnavigation-feedback.mdoverlays.mdtheme.mdtypography.md
tile.json

tessl/npm-native-base

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/native-base@3.4.x

To install, run

npx @tessl/cli install tessl/npm-native-base@3.4.0

index.mddocs/

NativeBase

NativeBase is a comprehensive, mobile-first component library for React Native that provides essential cross-platform UI components for building consistent design systems. It offers around 40 production-ready components including layout elements, forms, data display, feedback, typography, overlays, and media components, all with built-in accessibility support through React ARIA integration.

Package Information

  • Package Name: native-base
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install native-base react-native-svg react-native-safe-area-context

Core Imports

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

For CommonJS:

const { NativeBaseProvider, Box, Text, Button } = require("native-base");

Basic Usage

import React from 'react';
import { NativeBaseProvider, Box, Text, Button, VStack } from "native-base";

function App() {
  return (
    <NativeBaseProvider>
      <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
        <VStack space={4} alignItems="center">
          <Text fontSize="lg">Welcome to NativeBase</Text>
          <Button onPress={() => console.log("Button pressed")}>
            Click me
          </Button>
        </VStack>
      </Box>
    </NativeBaseProvider>
  );
}

Architecture

NativeBase is built around several key architectural components:

  • Provider System: NativeBaseProvider wraps your app and provides theme context, color mode, and configuration
  • Styled System: Utility-style props powered by a custom styled system for rapid UI development
  • Component Library: Three tiers of components (Basic, Primitives, Composites) with consistent APIs
  • Theme Engine: Comprehensive theming capabilities with design tokens, color modes, and responsive breakpoints
  • Accessibility First: Built-in accessibility support through React ARIA integration
  • Cross-Platform: Single codebase for React Native, iOS, Android, and Web platforms

Capabilities

Layout Components

Core layout and structure components for building responsive user interfaces and interactions.

function Box(props: IBoxProps): JSX.Element;
function Flex(props: IFlexProps): JSX.Element;
function VStack(props: IStackProps): JSX.Element;
function HStack(props: IStackProps): JSX.Element;
function Stack(props: IStackProps): JSX.Element;
function Center(props: ICenterProps): JSX.Element;
function Pressable(props: IPressableProps): JSX.Element;
function Hidden(props: IHiddenProps): JSX.Element;

Layout Components

Form Components

Input controls, buttons, and form management components with built-in validation support.

function Input(props: IInputProps): JSX.Element;
function Button(props: IButtonProps): JSX.Element;
function IconButton(props: IIconButtonProps): JSX.Element;
function Checkbox(props: ICheckboxProps): JSX.Element;
function Radio(props: IRadioProps): JSX.Element;
function Select(props: ISelectProps): JSX.Element;
function FormControl(props: IFormControlProps): JSX.Element;

Form Components

Typography Components

Text display and typography components with theme integration.

function Text(props: ITextProps): JSX.Element;
function Heading(props: IHeadingProps): JSX.Element;

Typography Components

Navigation & Feedback

Navigation aids, alerts, progress indicators, and user feedback components.

function Alert(props: IAlertProps): JSX.Element;
function Badge(props: IBadgeProps): JSX.Element;
function Breadcrumb(props: IBreadcrumbProps): JSX.Element;
function Progress(): JSX.Element;
function Toast(props: IToastProps): JSX.Element;
function Fab(props: IFabProps): JSX.Element;
function useToast(): ToastFunction;

Navigation & Feedback

Overlay Components

Modal dialogs, popovers, tooltips, and overlay management.

function Modal(props: IModalProps): JSX.Element;
function Popover(props: IPopoverProps): JSX.Element;
function Tooltip(props: ITooltipProps): JSX.Element;
function Drawer(props: IDrawerProps): JSX.Element;
function AlertDialog(): JSX.Element;
function Actionsheet(props: IActionsheetProps): JSX.Element;

Overlay Components

Media & Data Display

Images, icons, lists, and data presentation components.

function Image(props: IImageProps): JSX.Element;
function Icon(props: IIconProps): JSX.Element;
function createIcon(options: IconOptions): React.ComponentType<IIconProps>;
function Avatar(props: IAvatarProps): JSX.Element;
function List(props: IListProps): JSX.Element;

Media & Data Display

Animation & Transitions

Animation components and transition effects.

function Fade(props: IFadeProps): JSX.Element;
function ScaleFade(props: IScaleFadeProps): JSX.Element;
function Slide(props: ISlideProps): JSX.Element;
function SlideFade(props: ISlideFadeProps): JSX.Element;
function PresenceTransition(): JSX.Element;
function Stagger(): JSX.Element;

Animation & Transitions

Theme System

Theme configuration, color modes, and design token management.

function NativeBaseProvider(props: INativebaseConfig): JSX.Element;
function extendTheme(theme: Partial<ITheme>): ITheme;
function useColorMode(): ColorModeReturn;
function useColorModeValue<T>(light: T, dark: T): T;
function useTheme(): ITheme;
function useToken(token: string, fallback?: any): any;

Theme System

Basic Components

React Native base components wrapped with NativeBase styling capabilities and theme integration.

function ScrollView(props: IScrollViewProps): JSX.Element;
function FlatList<ItemT>(props: IFlatListProps<ItemT>): JSX.Element;
function SectionList<ItemT, SectionT>(props: ISectionListProps<ItemT, SectionT>): JSX.Element;
function KeyboardAvoidingView(props: IKeyboardAvoidingViewProps): JSX.Element;
function StatusBar(props: IStatusBarProps): JSX.Element;
function View(props: IViewProps): JSX.Element;

Basic Components

Hooks & Utilities

React hooks for state management, responsive design, and utility functions.

function useBreakpointValue<T>(values: ResponsiveValue<T>): T;
function useMediaQuery(query: string): boolean[];
function useDisclose(defaultIsOpen?: boolean): DisclosureReturn;
function useClipboard(value: string): ClipboardReturn;
function useSafeArea(): SafeAreaReturn;

Hooks & Utilities

Types

Core Interfaces

interface INativebaseConfig {
  initialColorMode?: ColorMode;
  theme?: ICustomTheme;
  colorModeManager?: StorageManager;
  children?: React.ReactNode;
}

interface ITheme {
  colors: Colors;
  space: Space;
  sizes: Sizes;
  fonts: Fonts;
  fontSizes: FontSizes;
  fontWeights: FontWeights;
  lineHeights: LineHeights;
  letterSpacings: LetterSpacings;
  radii: Radii;
  shadows: Shadows;
  components: ComponentThemes;
}

interface StyledProps {
  bg?: ResponsiveValue<string>;
  backgroundColor?: ResponsiveValue<string>;
  m?: ResponsiveValue<string | number>;
  margin?: ResponsiveValue<string | number>;
  p?: ResponsiveValue<string | number>;
  padding?: ResponsiveValue<string | number>;
  w?: ResponsiveValue<string | number>;
  width?: ResponsiveValue<string | number>;
  h?: ResponsiveValue<string | number>;
  height?: ResponsiveValue<string | number>;
  // ... additional styled system props
}

type ColorMode = "light" | "dark";
type ResponsiveValue<T> = T | T[] | { base?: T; sm?: T; md?: T; lg?: T; xl?: T };