or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-components.mddisplay-components.mdfeedback-components.mdform-components.mdhelpers.mdindex.mdlayout-components.mdspecialized-components.mdtheming.md
tile.json

tessl/npm-react-native-elements

React Native Elements is a comprehensive cross-platform UI toolkit providing highly customizable and accessible components for React Native applications.

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

To install, run

npx @tessl/cli install tessl/npm-react-native-elements@3.4.0

index.mddocs/

React Native Elements

React Native Elements is a comprehensive cross-platform UI toolkit providing highly customizable and accessible components for React Native applications. It offers consistent design patterns, extensive theming capabilities, and platform-specific optimizations for iOS, Android, and Web.

Package Information

  • Package Name: react-native-elements
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-native-elements react-native-vector-icons

Core Imports

import { 
  Button, Input, Icon, Text,
  Card, Header, ListItem, 
  ThemeProvider, useTheme 
} from 'react-native-elements';

For CommonJS:

const { 
  Button, Input, Icon, Text,
  Card, Header, ListItem, 
  ThemeProvider, useTheme 
} = require('react-native-elements');

Basic Usage

import React from 'react';
import { 
  Button, Input, Icon, Card, 
  ThemeProvider, Header 
} from 'react-native-elements';

const theme = {
  colors: {
    primary: '#007AFF',
    secondary: '#5856D6',
  }
};

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Header 
        centerComponent={{ text: 'My App', style: { color: '#fff' } }}
        backgroundColor={theme.colors.primary}
      />
      
      <Card>
        <Input
          placeholder="Enter your name"
          leftIcon={{ type: 'material', name: 'person' }}
        />
        
        <Button
          title="Submit"
          icon={<Icon name="check" color="#fff" />}
          buttonStyle={{ backgroundColor: theme.colors.primary }}
        />
      </Card>
    </ThemeProvider>
  );
}

Architecture

React Native Elements is built around several key architectural patterns:

  • Component System: Modular UI components with consistent APIs and prop interfaces
  • Theming Engine: Centralized theme management using React Context with deep customization
  • Platform Optimization: Components automatically adapt behavior for iOS, Android, and Web
  • Icon Integration: Built-in support for multiple icon families through react-native-vector-icons
  • Accessibility: WCAG-compliant components with proper accessibility props and screen reader support
  • Compound Components: Complex components like ListItem use sub-component patterns for flexibility

Capabilities

Core Components

Essential UI building blocks including buttons, inputs, text, and icons that form the foundation of most interfaces.

// Button with multiple variants and customization
interface ButtonProps extends TouchableOpacityProps {
  title?: string | React.ReactElement;
  type?: 'solid' | 'clear' | 'outline';
  loading?: boolean;
  icon?: IconNode;
  buttonStyle?: StyleProp<ViewStyle>;
}

// Enhanced input with labels and error handling
interface InputProps extends TextInputProps {
  label?: string | React.ReactNode;
  errorMessage?: string;
  leftIcon?: IconNode;
  rightIcon?: IconNode;
}

// Vector icons with multiple font family support
interface IconProps extends TouchableOpacityProps {
  name?: string;
  type?: IconType;
  size?: number;
  color?: string;
}

Core Components

Layout Components

Structural components for organizing content including cards, headers, list items, and dividers.

// Compound list item with sub-components
interface ListItemProps extends TouchableHighlightProps {
  topDivider?: boolean;
  bottomDivider?: boolean;
  pad?: number;
}

// Navigation header with configurable sections
interface HeaderProps {
  leftComponent?: HeaderSubComponent;
  centerComponent?: HeaderSubComponent;
  rightComponent?: HeaderSubComponent;
  backgroundColor?: string;
}

Layout Components

Form Components

Interactive form controls including checkboxes, sliders, search bars, and switches for user input.

// Platform-specific search input
interface SearchBarProps {
  platform: 'default' | 'ios' | 'android';
  value?: string;
  onChangeText?(text: string): void;
  showLoading?: boolean;
}

// Customizable checkbox with various styles
interface CheckBoxProps extends TouchableOpacityProps {
  checked?: boolean;
  title?: string | React.ReactElement;
  checkedIcon?: IconNode;
  uncheckedIcon?: IconNode;
}

Form Components

Display Components

Visual elements for showing information including avatars, badges, images, and tiles.

// User profile image with fallbacks
interface AvatarProps extends TouchableOpacityProps {
  source?: ImageSourcePropType;
  title?: string;
  size?: 'small' | 'medium' | 'large' | 'xlarge' | number;
  rounded?: boolean;
}

// Status indicator badge
interface BadgeProps {
  value?: React.ReactNode;
  status?: 'primary' | 'success' | 'warning' | 'error';
  badgeStyle?: StyleProp<ViewStyle>;
}

Display Components

Feedback Components

User feedback mechanisms including tooltips, overlays, dialogs, and bottom sheets for enhanced UX.

// Modal overlay component
interface OverlayProps {
  isVisible: boolean;
  onBackdropPress?(): void;
  children: React.ReactNode;
}

// Contextual tooltip
interface TooltipProps {
  popover: React.ReactElement;
  children: React.ReactElement;
  height?: number;
  width?: number;
}

Feedback Components

Specialized Components

Purpose-built components for specific use cases including pricing cards, social icons, progress indicators, and navigation tabs.

// Pricing plan display
interface PricingCardProps {
  price: string | number;
  title?: string;
  info?: string[];
  button?: ButtonProps;
}

// Social media platform icons
interface SocialIconProps extends TouchableOpacityProps {
  type: SocialMediaType;
  raised?: boolean;
  light?: boolean;
}

Specialized Components

Theming System

Comprehensive theming engine with context providers, hooks, and HOCs for consistent design across your application.

// Theme provider component
interface ThemeProviderProps {
  theme: Partial<FullTheme>;
  useDark?: boolean;
  children: React.ReactNode;
}

// Theme context hook
function useTheme(): {
  theme: FullTheme;
  updateTheme: UpdateTheme;
  replaceTheme: ReplaceTheme;
};

// Dynamic style creation
function makeStyles<T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(
  styles: T | ((theme: FullTheme, props?: any) => T)
): (props?: any) => T;

Theming System

Helper Functions

Utility functions for icon management, text scaling, and component enhancement.

// Icon type registration
function registerCustomIconType(id: string, customIcon: any): void;

// Responsive text scaling
function normalize(size: number, factor?: number): number;

// Badge enhancement HOC
function withBadge<P>(badgeProps?: BadgeProps): (WrappedComponent: React.ComponentType<P>) => React.ComponentType<P>;

Helper Functions

Types

// Core theme interfaces
interface FullTheme {
  colors: Colors;
  Button: Partial<ButtonProps>;
  Input: Partial<InputProps>;
  Header: Partial<HeaderProps>;
  // ... other component theme overrides
}

interface Colors {
  primary: string;
  secondary: string;
  success: string;
  warning: string;
  error: string;
  white: string;
  black: string;
  grey0: string;
  grey1: string;
  grey2: string;
  grey3: string;
  grey4: string;
  grey5: string;
  greyOutline: string;
  searchBg: string;
  disabled: string;
  divider: string;
  platform: {
    ios: Partial<Colors>;
    android: Partial<Colors>;
    web: Partial<Colors>;
  };
}

// Icon system types
type IconType = 
  | 'material' 
  | 'material-community' 
  | 'font-awesome' 
  | 'font-awesome-5' 
  | 'ionicon' 
  | 'feather' 
  | 'entypo' 
  | 'foundation' 
  | 'antdesign' 
  | 'evilicon' 
  | 'simple-line-icon' 
  | 'zocial' 
  | 'octicon' 
  | 'fontisto';

type IconNode = boolean | React.ReactElement | Partial<IconProps>;

// Theme function types
type UpdateTheme = (updates: Partial<FullTheme>) => void;
type ReplaceTheme = (theme: FullTheme) => void;