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.

—

Pending

Overview

Eval results

Files

Layout Components

Name: tessl/npm-react-native-elements
Author: tessl

Structural components for organizing content including cards, headers, list items, and dividers that provide the foundation for app layouts and navigation.

Capabilities

Card

Container component for displaying related content with customizable styling, shadows, and layout options. Perfect for grouping related information.

/**
 * Container component for displaying related content
 */
interface CardProps {
  /** Card content */
  children?: React.ReactNode;
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Content wrapper styles */
  wrapperStyle?: StyleProp<ViewStyle>;
  /** Card title configuration */
  title?: string | React.ReactElement;
  /** Title text styles */
  titleStyle?: StyleProp<TextStyle>;
  /** Card image source */
  image?: ImageSourcePropType;
  /** Image styles */
  imageStyle?: StyleProp<ImageStyle>;
  /** Image wrapper styles */
  imageWrapperStyle?: StyleProp<ViewStyle>;
  /** Featured image configuration */
  featuredTitle?: string;
  /** Featured subtitle */
  featuredSubtitle?: string;
  /** Featured title styles */
  featuredTitleStyle?: StyleProp<TextStyle>;
  /** Featured subtitle styles */
  featuredSubtitleStyle?: StyleProp<TextStyle>;
  /** Divider line at bottom */
  dividerStyle?: StyleProp<ViewStyle>;
}

Usage Examples:

import { Card, Button, Image } from 'react-native-elements';

// Basic card with content
<Card>
  <Text>Card content goes here</Text>
  <Button title="Action" />
</Card>

// Card with title and image
<Card
  title="Card Title"
  image={{ uri: 'https://example.com/image.jpg' }}
  containerStyle={{ borderRadius: 10 }}
>
  <Text>This card has a title and image</Text>
</Card>

// Featured card with overlay text
<Card
  image={{ uri: 'https://example.com/featured.jpg' }}
  featuredTitle="Featured Content"
  featuredSubtitle="Subtitle text"
  featuredTitleStyle={{ color: 'white' }}
/>

// Custom styled card
<Card
  containerStyle={{
    backgroundColor: '#f8f9fa',
    borderWidth: 0,
    borderRadius: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
  }}
  wrapperStyle={{ padding: 20 }}
>
  <Text>Custom styled card content</Text>
</Card>

Header

Navigation header component with configurable left, center, and right sections. Supports custom components, styling, and platform-specific behaviors.

/**
 * Navigation header with title and action buttons
 */
interface HeaderProps {
  /** Left component configuration */
  leftComponent?: HeaderSubComponent;
  /** Center component configuration */
  centerComponent?: HeaderSubComponent;
  /** Right component configuration */
  rightComponent?: HeaderSubComponent;
  /** Header background color */
  backgroundColor?: string;
  /** Background image source */
  backgroundImage?: ImageSourcePropType;
  /** Background image styles */
  backgroundImageStyle?: StyleProp<ImageStyle>;
  /** Placement of components */
  placement?: 'left' | 'center' | 'right';
  /** Bar style for status bar */
  barStyle?: 'default' | 'light-content' | 'dark-content';
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Center container styles */
  centerContainerStyle?: StyleProp<ViewStyle>;
  /** Left container styles */
  leftContainerStyle?: StyleProp<ViewStyle>;
  /** Right container styles */
  rightContainerStyle?: StyleProp<ViewStyle>;
  /** Linear gradient props for background */
  linearGradientProps?: object;
  /** Custom view component */
  ViewComponent?: typeof React.Component;
}

/**
 * Header sub-component configuration
 */
interface HeaderSubComponent {
  /** Component icon */
  icon?: string;
  /** Component text */
  text?: string;
  /** Component styles */
  style?: StyleProp<TextStyle | ViewStyle>;
  /** Touch handler */
  onPress?(): void;
  /** Custom component */
  component?: React.ComponentType<any>;
}

Usage Examples:

import { Header, Icon } from 'react-native-elements';

// Basic header with title
<Header
  centerComponent={{ text: 'My App', style: { color: '#fff', fontSize: 18 } }}
  backgroundColor="#007AFF"
/>

// Header with navigation icons
<Header
  leftComponent={{ 
    icon: 'menu', 
    color: '#fff', 
    onPress: openDrawer 
  }}
  centerComponent={{ text: 'Home', style: { color: '#fff' } }}
  rightComponent={{ 
    icon: 'search', 
    color: '#fff', 
    onPress: openSearch 
  }}
  backgroundColor="#2c3e50"
/>

// Header with custom components
<Header
  leftComponent={
    <Icon
      name="arrow-back"
      type="material"
      color="#fff"
      onPress={goBack}
    />
  }
  centerComponent={
    <Image
      source={{ uri: 'https://example.com/logo.png' }}
      style={{ width: 100, height: 30 }}
    />
  }
  rightComponent={
    <Button
      title="Save"
      type="clear"
      titleStyle={{ color: '#fff' }}
      onPress={save}
    />
  }
/>

// Header with gradient background
<Header
  centerComponent={{ text: 'Gradient Header', style: { color: '#fff' } }}
  linearGradientProps={{
    colors: ['#FF6B6B', '#FF8E53'],
    start: { x: 0, y: 0 },
    end: { x: 1, y: 0 },
  }}
/>

ListItem

Flexible compound list item component with sub-components for building complex list interfaces. Supports accordion, swipe actions, and various content layouts.

/**
 * Flexible list item component with sub-components
 */
interface ListItemProps extends TouchableHighlightProps {
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Disabled state */
  disabled?: boolean;
  /** Show top divider */
  topDivider?: boolean;
  /** Show bottom divider */
  bottomDivider?: boolean;
  /** Padding value (default: 16) */
  pad?: number;
  /** Custom component (auto-selects based on onPress) */
  Component?: typeof React.Component;
  /** Custom view component */
  ViewComponent?: typeof React.Component;
  /** Linear gradient configuration */
  linearGradientProps?: any;
  /** Children components */
  children?: React.ReactNode;
}

/**
 * ListItem accordion sub-component
 */
interface ListItemAccordionProps {
  /** Whether accordion is expanded */
  isExpanded?: boolean;
  /** Icon configuration */
  icon?: IconNode;
  /** Accordion content */
  content?: React.ReactNode;
  /** Toggle handler */
  onPress?(): void;
}

/**
 * ListItem swipeable sub-component
 */
interface ListItemSwipeableProps {
  /** Left swipe actions */
  leftContent?: React.ReactNode;
  /** Right swipe actions */
  rightContent?: React.ReactNode;
  /** Left action width */
  leftWidth?: number;
  /** Right action width */
  rightWidth?: number;
  /** Children content */
  children?: React.ReactNode;
}

Usage Examples:

import { ListItem, Avatar, Button } from 'react-native-elements';

// Basic list item with avatar and chevron
<ListItem onPress={handlePress} bottomDivider>
  <Avatar source={{ uri: 'https://example.com/avatar.jpg' }} />
  <ListItem.Content>
    <ListItem.Title>John Doe</ListItem.Title>
    <ListItem.Subtitle>Software Developer</ListItem.Subtitle>
  </ListItem.Content>
  <ListItem.Chevron />
</ListItem>

// List item with checkbox
<ListItem bottomDivider>
  <ListItem.CheckBox
    checked={isChecked}
    onPress={() => setIsChecked(!isChecked)}
  />
  <ListItem.Content>
    <ListItem.Title>Enable Notifications</ListItem.Title>
  </ListItem.Content>
</ListItem>

// Accordion list item
<ListItem.Accordion
  content={
    <>
      <ListItem>
        <ListItem.Content>
          <ListItem.Title>Nested Item 1</ListItem.Title>
        </ListItem.Content>
      </ListItem>
      <ListItem>
        <ListItem.Content>
          <ListItem.Title>Nested Item 2</ListItem.Title>
        </ListItem.Content>
      </ListItem>
    </>
  }
  isExpanded={isExpanded}
  onPress={() => setIsExpanded(!isExpanded)}
>
  <ListItem.Content>
    <ListItem.Title>Expandable Section</ListItem.Title>
  </ListItem.Content>
</ListItem.Accordion>

// Swipeable list item with actions
<ListItem.Swipeable
  leftContent={
    <Button
      title="Call"
      icon={{ name: 'phone', color: 'white' }}
      buttonStyle={{ minHeight: '100%', backgroundColor: 'green' }}
    />
  }
  rightContent={
    <Button
      title="Delete"
      icon={{ name: 'delete', color: 'white' }}
      buttonStyle={{ minHeight: '100%', backgroundColor: 'red' }}
    />
  }
>
  <Avatar source={{ uri: 'https://example.com/avatar.jpg' }} />
  <ListItem.Content>
    <ListItem.Title>Swipeable Item</ListItem.Title>
    <ListItem.Subtitle>Swipe left or right for actions</ListItem.Subtitle>
  </ListItem.Content>
  <ListItem.Chevron />
</ListItem.Swipeable>

// List item with input field
<ListItem>
  <ListItem.Content>
    <ListItem.Input
      placeholder="Enter text here"
      value={inputValue}
      onChangeText={setInputValue}
    />
  </ListItem.Content>
</ListItem>

// List item with button group
<ListItem>
  <ListItem.Content>
    <ListItem.Title>Choose Option</ListItem.Title>
    <ListItem.ButtonGroup
      buttons={['Option 1', 'Option 2', 'Option 3']}
      selectedIndex={selectedIndex}
      onPress={setSelectedIndex}
    />
  </ListItem.Content>
</ListItem>

Divider

Horizontal or vertical separator line component for visually separating content sections with customizable styling and orientation.

/**
 * Horizontal or vertical separator line
 */
interface DividerProps {
  /** Divider orientation */
  orientation?: 'horizontal' | 'vertical';
  /** Divider styles */
  style?: StyleProp<ViewStyle>;
  /** Inset from left edge */
  inset?: boolean;
  /** Inset left value */
  insetLeft?: number;
  /** Inset right value */
  insetRight?: number;
  /** Inset type */
  insetType?: 'left' | 'right' | 'middle';
  /** Subheader text */
  subHeader?: string;
  /** Subheader styles */
  subHeaderStyle?: StyleProp<TextStyle>;
  /** Divider width/height */
  width?: number;
  /** Divider color */
  color?: string;
}

Usage Examples:

import { Divider, Text } from 'react-native-elements';

// Basic horizontal divider
<Divider />

// Divider with custom styling
<Divider
  style={{ backgroundColor: '#007AFF', height: 2 }}
/>

// Divider with inset
<Divider
  inset={true}
  insetLeft={50}
  style={{ backgroundColor: '#e1e8ed' }}
/>

// Divider with subheader text
<Divider
  subHeader="Section Divider"
  subHeaderStyle={{ color: '#666', textAlign: 'center' }}
/>

// Vertical divider
<View style={{ flexDirection: 'row', height: 50 }}>
  <Text>Left Content</Text>
  <Divider orientation="vertical" width={1} />
  <Text>Right Content</Text>
</View>

// Custom colored divider
<Divider
  color="#FF6B6B"
  width={3}
  style={{ marginVertical: 10 }}
/>

Install with Tessl CLI

npx tessl i tessl/npm-react-native-elements

docs

core-components.md

display-components.md

feedback-components.md

specialized-components.md

theming.md

tile.json

tessl/npm-react-native-elements