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

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 };
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/native-base@3.4.x
Publish Source
CLI
Badge
tessl/npm-native-base badge