Avatar | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
Avatar
The Avatar component can display profile pictures, initials, or a fallback image to represent a user.
Show Code
Playground
Import
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: ThemeComponentSizeType<"Avatar">
Default: md
_image
For providing props to Image component inside Avatar
Type: Partial<IImageProps>
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. Checkout the default theme of avatar.
Info: We can easily extend the avatar component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase