Version: Next

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
source ImageSourcePropType The image source of the avatar. -
size 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 & {})> The size of the avatar md
wrapperRef MutableRefObject<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>
)
}
Read more about extending component theme here.