Avatar

The Avatar component can display an image or initials in a circular or rounded rectangle shape. It also has a customizable badge that can be positioned at the top or bottom of the Avatar, and can display text or an icon. This component can be used in various applications that require a user profile picture or initials, such as social media or messaging apps.

Import

import { Avatar } from '@tra-tech/react-native-kitra';

Usage

import { Avatar,Icon } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
   <View style={{ alignItems: 'center', flexDirection: 'row' }}>
      <Avatar
        borderStyle="circular"
        size="medium"
        badgePosition="bottom"
        badgeContent={<Icon name="penguin" type="material-community" size={20} />}
        source={{ uri: 'https://randomuser.me/api/portraits/men/62.jpg' }}
      />
    </View>
);

export default App;

Props

Prop name	Type	Required	Description
size	'small' | 'medium'	No	The size of the avatar. Default value: 'medium'
source	ImageSourcePropType	No	Used to specify the image source.
borderStyle	'circular' | 'rounded'	No	Specifies the border type of the avatar. Default value: 'circular'
avatarIcon	React.ReactNode	No	Used to add icon to avatar.
containerStyle	StyleProp<ViewStyle>	No	Additional styles to apply to the avatar container.
label	string	No	Represents the initials of the name to be written on the avatar.
labelStyle	StyleProp<TextStyle>	No	Additional styles to apply to the label text.
badgePosition	'top' | 'bottom'	No	Badge component location.
badgeStyle	{ containerStyle?: StyleProp<ViewStyle>, textStyle?: StyleProp<TextStyle> }	No	Additional styles to apply to the badge component.
badgeContent	React.ReactNode	No	Additional content to apply to the badge component.
theme	UITheme	No	The theme to use for the component.
typography	UITypography	No	The typography to use for the component.

Avatar Group

The Avatar Group, used to list avatars side by side.

Import

import { AvatarGroup } from '@tra-tech/react-native-kitra';

Usage

import { AvatarGroup } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const App = () => (
     <View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 30 }}>
      <AvatarGroup
        avatarLimit={5}
        limitContainerStyle={{ backgroundColor: '#82B98E', style: { fontSize: 10 } }}
        avatarsType={[
          { source: { uri: 'https://randomuser.me/api/portraits/men/62.jpg' } },
          { source: { uri: 'https://randomuser.me/api/portraits/men/40.jpg' } },
          { source: { uri: 'https://randomuser.me/api/portraits/women/26.jpg' } },
          { label: 'Dogus Erdem' },
          { label: 'Ahmet Kagan Yoruk' },
          { label: 'Nadire Kasap' },
        ]}
      />
    </View>
);
export default App;
  

Props

Prop name	Type	Required	Description
avatarsType	Array<{ source?: ImageSourcePropType, borderStyle?: 'circular' | 'rounded', avatarIcon?: React.ReactNode, containerStyle?: StyleProp<ViewStyle>, label?: string, labelStyle?: StyleProp<TextStyle>, badgePosition?: 'top' | 'bottom', badgeStyle?: { containerStyle?: StyleProp<ViewStyle>, textStyle?: StyleProp<TextStyle> }, badgeContent?: React.ReactNode }>	Yes	Takes avatar props into array.
avatarLimit	number	No	Limit of avatars to be listed. Default value: 10
limitContainerStyle	'circular' | 'rounded'	No	Additional styles to apply to the limit container.
theme	UITheme	No	The theme to use for the component.
typography	UITypography	No	The typography to use for the component.