Avatar | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Resources
Data Display
Typography
Disclosure
Media and Icons
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Avatar
Avatar component is used to represent a user and it can display a profile picture, initials or a fallback icon.
Import
NativeBase exports 3 avatar-related components:
Avatar: An image that represents the user.
Avatar.Badge: A wrapper that displays its content on the bottom right corner of the avatar.
Avatar.Group: A wrapper to stack multiple avatars together.
Copy
import { Avatar } from 'native-base';
Examples
Basic
Playground
Sizes
Playground
Fallbacks
Playground
Avatar Badge
Playground
Avatar Group
Playground
Props
Avatar
source
The image source of the avatar.
size
The size of the avatar
Type: ResponsiveValue<number | "px" | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "0" | "container" | "3xs" | "1.5" | ... 29 more ... | (string & {})>
Default: md
wrapperRef
ref to be attached to Avatar wrapper
Type: MutableRefObject<any>
Avatar.Group
Avatar.Badge
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the avatar.
Info: We can easily extend the avatar component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase