Skip to main content

Avatar

Avatars are found throughout material design with uses in everything from tables to dialog menus.

💬 Feedback

Letter avatars#

import { Avatar } from "@react-native-material/core";
<Avatar label="Kent Dodds" /><Avatar label="UN" initials={false} /><Avatar label="Jed Watson" autoColor /><Avatar label="Tim Neutkens" autoColor />

Image avatars#

import { Avatar } from "@react-native-material/core";
<Avatar image={{ uri: "https://mui.com/static/images/avatar/1.jpg" }} /><Avatar  image={    <Image      source={{ uri: "https://mui.com/static/images/avatar/2.jpg" }}      style={{        position: "absolute",        top: 0,        left: 0,        right: 0,        bottom: 0,        borderRadius: 28,      }}    />  }/>

Icon avatars#

import { Avatar } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Avatar icon={props => <Icon name="account" {...props} />} /><Avatar icon={props => <Icon name="account" {...props} />} label="Jed Watson" autoColor /><Avatar icon={props => <Icon name="calendar" {...props} />} label="Tim Neutkens" autoColor />

Sizes#

import { Avatar } from "@react-native-material/core";
<Avatar label="Jed Watson" size={32} /><Avatar label="Jed Watson" /><Avatar label="Jed Watson" size={72} />

Coloring#

import { Avatar } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Avatar label="Kent Dodds" /><Avatar icon={props => <Icon name="account" {...props} />} color="primary" /><Avatar icon={props => <Icon name="account" {...props} />} color="primary" tintColor="error" /><Avatar icon={props => <Icon name="account" {...props} />} color="orange" tintColor="white" />

Fallbacks#

import { Avatar } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Avatar label="Jed Watson" /><Avatar label="Jed Watson" icon={props => <Icon name="account" {...props} />} /><Avatar  label="Jed Watson"  icon={props => <Icon name="account" {...props} />}  image={{ uri: "https://mui.com/static/images/avatar/1.jpg" }}/>