Version: 3.0.7

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.

import { Avatar } from 'native-base';

Examples#

Basic#

Sizes#

Fallbacks#

Avatar Badge#

Avatar Group#

Props#

Avatar#

Name	Type	Description	Default
_text	ITextProps	Text styling for fallback text	-
style	any	Style to be passed in rendered Image component	-
source	ImageSourcePropType	The image source of the avatar.	-
size	string \| number	The size of the avatar	md
wrapperRef	any	ref to be attached to Avatar wrapper	-

Avatar implements Box

Avatar.Group#

Group implements Box

Avatar.Badge#

Badge implements Box

Styling#

NativeBase ships with a default theme for each component.

Checkout the default theme of avatar

We can easily extend the avatar component theme using extendTheme function as shown below.

import { extendTheme, NativeBaseProvider } from "native-base";

const theme = extendTheme({
 components: {
 Avatar: {
 baseStyle: {},
 defaultProps: {},
 variants: {},
 sizes: {},
 }
 } 
});

function MyApp() {
 return (
 <NativeBaseProvider theme={theme}>
 {/* Rest of the app goes here */}
 </NativeBaseProvider>
 )
}