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
display-components.mddocs/
Display Components
Visual elements for showing information including avatars, badges, images, and tiles for enhanced content presentation and user interface design.
Capabilities
Avatar
User profile image component with fallbacks, multiple sizes, and customizable appearance for representing users and entities in your application.
/**
* User profile image/icon with various display options
*/
interface AvatarProps extends TouchableOpacityProps {
/** Image source */
source?: ImageSourcePropType;
/** Avatar URI (deprecated, use source) */
avatarStyle?: StyleProp<ImageStyle>;
/** Container styles */
containerStyle?: StyleProp<ViewStyle>;
/** Icon configuration for fallback */
icon?: IconNode;
/** Title text for text-based avatar */
title?: string;
/** Title styles */
titleStyle?: StyleProp<TextStyle>;
/** Overlay component */
overlayContainerStyle?: StyleProp<ViewStyle>;
/** Image component props */
imageProps?: Partial<ImageProps>;
/** Placeholder styles */
placeholderStyle?: StyleProp<ViewStyle>;
/** Rounded avatar */
rounded?: boolean;
/** Avatar size */
size?: 'small' | 'medium' | 'large' | 'xlarge' | number;
/** Custom image component */
ImageComponent?: React.ComponentType<any>;
/** Show edit button */
showEditButton?: boolean;
/** Edit button configuration */
editButton?: Partial<IconProps>;
/** Touch handler */
onPress?(): void;
/** Long press handler */
onLongPress?(): void;
/** Active opacity */
activeOpacity?: number;
}Usage Examples:
import React from 'react';
import { Avatar, Accessory } from 'react-native-elements';
// Basic avatar with image
<Avatar
source={{ uri: 'https://example.com/avatar.jpg' }}
size="medium"
rounded
/>
// Avatar with title fallback
<Avatar
title="JD"
size="large"
rounded
containerStyle={{ backgroundColor: '#007AFF' }}
titleStyle={{ color: '#fff' }}
/>
// Avatar with icon fallback
<Avatar
icon={{ name: 'user', type: 'font-awesome', color: '#fff' }}
size="xlarge"
rounded
containerStyle={{ backgroundColor: '#9b59b6' }}
/>
// Avatar with edit button
<Avatar
source={{ uri: 'https://example.com/profile.jpg' }}
size={100}
rounded
showEditButton
editButton={{
name: 'camera',
type: 'font-awesome',
color: '#fff',
underlayColor: '#000',
onPress: () => console.log('Edit pressed'),
}}
/>
// Avatar with accessory (badge)
<Avatar
source={{ uri: 'https://example.com/user.jpg' }}
size="large"
rounded
>
<Accessory
size={20}
icon={{ name: 'check', type: 'material', color: '#fff' }}
style={{ backgroundColor: '#4caf50' }}
/>
</Avatar>
// Touchable avatar
<Avatar
source={{ uri: 'https://example.com/avatar.jpg' }}
size="medium"
rounded
onPress={() => console.log('Avatar pressed')}
activeOpacity={0.7}
containerStyle={{
borderWidth: 2,
borderColor: '#007AFF',
}}
/>
// Custom sized avatar with overlay
<Avatar
source={{ uri: 'https://example.com/photo.jpg' }}
size={120}
rounded
overlayContainerStyle={{
backgroundColor: 'rgba(0,0,0,0.3)',
}}
imageProps={{
resizeMode: 'cover',
}}
/>Badge
Small status indicator component for showing notifications, counts, or status information with customizable colors and positioning.
/**
* Small status indicator component
*/
interface BadgeProps {
/** Badge content */
value?: React.ReactNode;
/** Badge status type */
status?: 'primary' | 'success' | 'warning' | 'error';
/** Badge container styles */
badgeStyle?: StyleProp<ViewStyle>;
/** Container styles */
containerStyle?: StyleProp<ViewStyle>;
/** Text styles */
textStyle?: StyleProp<TextStyle>;
/** Component to wrap with badge */
Component?: React.ComponentType<any>;
/** Touch handler */
onPress?(): void;
}
/**
* Higher-order component for adding badges to components
*/
function withBadge<P>(badgeProps?: BadgeProps): (WrappedComponent: React.ComponentType<P>) => React.ComponentType<P>;Usage Examples:
import React from 'react';
import { Badge, withBadge, Icon, Avatar } from 'react-native-elements';
// Basic badge with number
<Badge value={5} status="error" />
// Badge with text
<Badge
value="NEW"
status="success"
textStyle={{ color: '#fff', fontSize: 12 }}
/>
// Custom styled badge
<Badge
value={99}
badgeStyle={{
backgroundColor: '#FF6B6B',
borderRadius: 15,
height: 30,
minWidth: 30,
}}
textStyle={{
color: '#fff',
fontSize: 14,
fontWeight: 'bold',
}}
/>
// Badge with icon
<Badge
value={<Icon name="star" size={12} color="#fff" />}
status="warning"
/>
// Using withBadge HOC
const BadgedIcon = withBadge({
value: 3,
status: 'error',
badgeStyle: { right: -6, top: -3 }
})(Icon);
<BadgedIcon
name="notifications"
type="material"
size={30}
color="#666"
/>
// Badge on avatar
const BadgedAvatar = withBadge({
value: '!',
status: 'error',
badgeStyle: { right: 5, top: 5 }
})(Avatar);
<BadgedAvatar
source={{ uri: 'https://example.com/avatar.jpg' }}
size="medium"
rounded
/>
// Touchable badge
<Badge
value="5"
status="primary"
onPress={() => console.log('Badge pressed')}
containerStyle={{
position: 'absolute',
top: 10,
right: 10,
}}
/>
// Empty badge (dot indicator)
<Badge
badgeStyle={{
backgroundColor: '#4caf50',
width: 10,
height: 10,
borderRadius: 5,
}}
/>Image
Enhanced image component with loading states, error handling, and placeholder support for improved user experience during image loading.
/**
* Enhanced image component with loading states
*/
interface ImageProps extends RNImageProps {
/** Container styles */
containerStyle?: StyleProp<ViewStyle>;
/** Placeholder component */
PlaceholderContent?: React.ReactElement;
/** Placeholder styles */
placeholderStyle?: StyleProp<ViewStyle>;
/** Loading indicator component */
LoadingIndicatorComponent?: React.ComponentType<any>;
/** Error component */
ErrorComponent?: React.ComponentType<any>;
/** Transition duration */
transition?: boolean;
/** Transition duration in ms */
transitionDuration?: number;
/** Child content (overlay) */
children?: React.ReactNode;
/** Child container styles */
childrenContainerStyle?: StyleProp<ViewStyle>;
}Usage Examples:
import React from 'react';
import { Image, Avatar, ActivityIndicator } from 'react-native-elements';
// Basic image with loading state
<Image
source={{ uri: 'https://example.com/image.jpg' }}
style={{ width: 200, height: 200 }}
PlaceholderContent={<ActivityIndicator />}
/>
// Image with custom placeholder
<Image
source={{ uri: 'https://example.com/photo.jpg' }}
containerStyle={{ width: 300, height: 200 }}
PlaceholderContent={
<Text style={{ color: '#666' }}>Loading...</Text>
}
placeholderStyle={{
backgroundColor: '#f0f0f0',
justifyContent: 'center',
alignItems: 'center',
}}
/>
// Image with transition effect
<Image
source={{ uri: 'https://example.com/banner.jpg' }}
style={{ width: '100%', height: 250 }}
transition={true}
transitionDuration={300}
/>
// Image with overlay content
<Image
source={{ uri: 'https://example.com/background.jpg' }}
style={{ width: '100%', height: 300 }}
childrenContainerStyle={{
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0,0,0,0.5)',
padding: 20,
}}
>
<Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>
Overlay Text
</Text>
</Image>
// Rounded image with error handling
<Image
source={{ uri: 'https://invalid-url.com/image.jpg' }}
style={{ width: 100, height: 100, borderRadius: 50 }}
ErrorComponent={() => (
<View style={{
width: 100,
height: 100,
borderRadius: 50,
backgroundColor: '#ddd',
justifyContent: 'center',
alignItems: 'center'
}}>
<Icon name="broken-image" type="material" color="#999" />
</View>
)}
/>
// Custom loading indicator
<Image
source={{ uri: 'https://example.com/large-image.jpg' }}
style={{ width: 250, height: 250 }}
LoadingIndicatorComponent={() => (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f8f9fa'
}}>
<ActivityIndicator size="large" color="#007AFF" />
<Text style={{ marginTop: 10, color: '#666' }}>
Loading image...
</Text>
</View>
)}
/>Tile
Card-like component for displaying featured content with image backgrounds, overlay text, and customizable layouts for content presentation.
/**
* Card-like component for displaying featured content
*/
interface TileProps extends TouchableOpacityProps {
/** Tile image source */
imageSrc?: ImageSourcePropType | string;
/** Icon configuration */
icon?: IconNode;
/** Featured content */
featured?: boolean;
/** Title text */
title?: string;
/** Title styles */
titleStyle?: StyleProp<TextStyle>;
/** Caption text */
caption?: string;
/** Caption styles */
captionStyle?: StyleProp<TextStyle>;
/** Image container styles */
imageContainerStyle?: StyleProp<ViewStyle>;
/** Container styles */
containerStyle?: StyleProp<ViewStyle>;
/** Icon container styles */
iconContainerStyle?: StyleProp<ViewStyle>;
/** Overlay container styles */
overlayContainerStyle?: StyleProp<ViewStyle>;
/** Content container styles */
contentContainerStyle?: StyleProp<ViewStyle>;
/** Image component props */
imageProps?: Partial<ImageProps>;
/** Tile width */
width?: number;
/** Tile height */
height?: number;
/** Active opacity */
activeOpacity?: number;
/** Touch handler */
onPress?(): void;
}Usage Examples:
import React from 'react';
import { Tile } from 'react-native-elements';
// Basic tile with image and title
<Tile
imageSrc={{ uri: 'https://example.com/feature.jpg' }}
title="Featured Article"
width={300}
height={200}
onPress={() => console.log('Tile pressed')}
/>
// Featured tile with overlay text
<Tile
imageSrc="https://example.com/hero.jpg"
title="Amazing Destination"
caption="Discover the beauty"
featured
titleStyle={{
fontSize: 24,
color: '#fff',
fontWeight: 'bold',
}}
captionStyle={{
fontSize: 16,
color: '#fff',
}}
overlayContainerStyle={{
backgroundColor: 'rgba(0,0,0,0.4)',
}}
/>
// Tile with icon
<Tile
imageSrc={{ uri: 'https://example.com/background.jpg' }}
icon={{
name: 'play-circle',
type: 'font-awesome',
size: 60,
color: '#fff',
}}
title="Watch Video"
width={250}
height={200}
iconContainerStyle={{
backgroundColor: 'rgba(0,0,0,0.3)',
borderRadius: 30,
}}
/>
// Custom styled tile
<Tile
imageSrc={{ uri: 'https://example.com/product.jpg' }}
title="Product Name"
caption="$29.99"
containerStyle={{
borderRadius: 15,
overflow: 'hidden',
elevation: 5,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
shadowRadius: 5,
}}
titleStyle={{
fontSize: 18,
fontWeight: 'bold',
color: '#333',
}}
captionStyle={{
fontSize: 16,
color: '#007AFF',
fontWeight: 'bold',
}}
contentContainerStyle={{
backgroundColor: '#fff',
padding: 15,
}}
/>
// Grid of tiles
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{categories.map((category, index) => (
<Tile
key={index}
imageSrc={{ uri: category.image }}
title={category.name}
width={150}
height={120}
containerStyle={{
margin: 5,
borderRadius: 10,
}}
onPress={() => navigateToCategory(category.id)}
/>
))}
</View>
// Tile with custom image props
<Tile
imageSrc={{ uri: 'https://example.com/large.jpg' }}
title="High Resolution"
imageProps={{
resizeMode: 'cover',
transition: true,
PlaceholderContent: <ActivityIndicator />,
}}
width={300}
height={250}
/>Accessory
Avatar accessory badge component for adding status indicators, notifications, or decorative elements to avatar components.
/**
* Avatar accessory badge
*/
interface AccessoryProps {
/** Accessory size */
size?: number;
/** Icon configuration */
icon?: IconNode;
/** Container styles */
style?: StyleProp<ViewStyle>;
/** Icon styles */
iconStyle?: StyleProp<ViewStyle>;
/** Touch handler */
onPress?(): void;
/** Underlying color */
underlayColor?: string;
}Usage Examples:
import React from 'react';
import { Avatar, Accessory } from 'react-native-elements';
// Avatar with online status accessory
<Avatar
source={{ uri: 'https://example.com/user.jpg' }}
size="large"
rounded
>
<Accessory
size={20}
style={{
backgroundColor: '#4caf50',
borderWidth: 2,
borderColor: '#fff',
}}
/>
</Avatar>
// Avatar with notification accessory
<Avatar
source={{ uri: 'https://example.com/profile.jpg' }}
size={80}
rounded
>
<Accessory
size={24}
icon={{
name: 'notifications',
type: 'material',
color: '#fff',
size: 12,
}}
style={{
backgroundColor: '#f44336',
}}
onPress={() => console.log('Notification pressed')}
/>
</Avatar>
// Avatar with edit accessory
<Avatar
title="JD"
size="xlarge"
rounded
containerStyle={{ backgroundColor: '#007AFF' }}
titleStyle={{ color: '#fff' }}
>
<Accessory
size={30}
icon={{
name: 'edit',
type: 'material',
color: '#fff',
size: 16,
}}
style={{
backgroundColor: '#333',
}}
onPress={() => console.log('Edit profile')}
/>
</Avatar>
// Avatar with custom styled accessory
<Avatar
source={{ uri: 'https://example.com/avatar.jpg' }}
size="medium"
rounded
>
<Accessory
size={18}
style={{
backgroundColor: '#ff9800',
borderWidth: 1,
borderColor: '#fff',
position: 'absolute',
top: 0,
right: 0,
}}
icon={{
name: 'star',
type: 'material',
color: '#fff',
size: 10,
}}
/>
</Avatar>Install with Tessl CLI
npx tessl i tessl/npm-react-native-elements