reactnatively

Avatar

Display user profile images with automatic initials fallback, presence status indicators, and a group component for stacked avatar rows.

Import

typescript

import { Avatar, AvatarGroup } from 'reactnatively';

Interactive preview

AvatarSizes.tsx

1import { View, StyleSheet } from 'react-native';2import { Avatar } from 'reactnatively';34export function AvatarSizes() {5  return (6    <View style={styles.row}>7      <Avatar size="xs" initials="JD" />8      <Avatar size="sm" initials="JD" />9      <Avatar size="md" initials="JD" />10      <Avatar size="lg" initials="JD" />11      <Avatar size="xl" initials="JD" />12      <Avatar size="2xl" initials="JD" />13    </View>14  );15}1617const styles = StyleSheet.create({18  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },19});

Basic usage

ProfileHeader.tsx

1import { View, StyleSheet } from 'react-native';2import { Avatar, Text } from 'reactnatively';34export function ProfileHeader() {5  return (6    <View style={styles.row}>7      {/* With image */}8      <Avatar9        src={{ uri: 'https://example.com/alice.jpg' }}10        size="xl"11        online="online"12        bordered13      />14      {/* Initials fallback */}15      <Avatar name="Bob Martin" size="xl" online="busy" />16      {/* Local asset */}17      <Avatar src={require('./assets/carol.png')} size="xl" online="away" />18    </View>19  );20}2122const styles = StyleSheet.create({23  row: { flexDirection: 'row', gap: 16, alignItems: 'center', padding: 20 },24});

Chat list screen

ChatListScreen.tsx

1import { FlatList, View, StyleSheet } from 'react-native';2import { Avatar, Text, Heading } from 'reactnatively';34const chats = [5  { id: '1', name: 'Alice Wong', message: 'See you tomorrow!', online: true },6  { id: '2', name: 'Dev Team', message: 'PR is ready for review', online: false },7  { id: '3', name: 'Bob Martin', message: 'Thanks for the update', online: 'busy' as const },8];910export function ChatListScreen() {11  return (12    <FlatList13      data={chats}14      keyExtractor={(item) => item.id}15      renderItem={({ item }) => (16        <View style={styles.row}>17          <Avatar name={item.name} size="lg" online={item.online} bordered />18          <View style={styles.content}>19            <Heading level="h4">{item.name}</Heading>20            <Text variant="sm" color="rgba(255,255,255,0.5)" numberOfLines={1}>21              {item.message}22            </Text>23          </View>24        </View>25      )}26      contentContainerStyle={styles.list}27    />28  );29}3031const styles = StyleSheet.create({32  list: { padding: 16 },33  row: { flexDirection: 'row', gap: 12, alignItems: 'center', paddingVertical: 10 },34  content: { flex: 1 },35});

AvatarGroup

CollaboratorRow.tsx

1import { View, StyleSheet } from 'react-native';2import { Avatar, AvatarGroup, Text } from 'reactnatively';34export function CollaboratorRow() {5  return (6    <View style={styles.container}>7      <Text variant="sm" color="rgba(255,255,255,0.5)">Shared with</Text>8      <AvatarGroup max={4} size="sm" overlap={10}>9        <Avatar src={{ uri: 'https://i.pravatar.cc/40?u=1' }} />10        <Avatar src={{ uri: 'https://i.pravatar.cc/40?u=2' }} />11        <Avatar src={{ uri: 'https://i.pravatar.cc/40?u=3' }} />12        <Avatar name="Dan A" />13        <Avatar name="Eve B" />14        <Avatar name="Frank C" />15      </AvatarGroup>16    </View>17  );18}1920const styles = StyleSheet.create({21  container: { flexDirection: 'row', alignItems: 'center', gap: 12, padding: 16 },22});

Avatar props

Prop	Type	Default	Description
src	{ uri: string } \| number	undefined	Image source — a URI object or a local require().
name	string	undefined	Fallback name used to derive initials when no image is available.
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| number	"md"	Avatar diameter. Use a preset or an exact pixel value.
online	boolean \| 'online' \| 'offline' \| 'busy' \| 'away'	undefined	Presence indicator dot. true maps to "online".
bordered	boolean	false	Renders a glass border ring around the avatar.
borderColor	string	undefined	Custom color for the border ring.
fallbackBg	string	undefined	Background color of the initials fallback.
fallbackColor	string	undefined	Text color of the initials fallback.
style	StyleProp<ViewStyle>	undefined	Style applied to the outer container.
imageStyle	StyleProp<ImageStyle>	undefined	Style applied directly to the Image element.

AvatarGroup props

Prop	Type	Default	Description
children	ReactNode	—	Avatar elements to stack.
max	number	undefined	Maximum visible avatars. Remainder shown as "+N" chip.
size	string \| number	"md"	Uniform size applied to all children.
overlap	number	8	Pixel overlap between adjacent avatars.
style	StyleProp<ViewStyle>	undefined	Style applied to the group row.