Component

Avatar

Avatar image wrapper with size and rounded presentation.

React Native

Avatar sizes

Use consistent square dimensions.

import { View } from 'react-native';
import { Avatar, Text, useTheme } from '@sohantalukder/rn-kit';

export function UserSummary() {
  const { gutters, layout } = useTheme();

  return (
    <View style={[layout.row, layout.itemsCenter, gutters.gap_12]}>
      <Avatar
        imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
        height={48}
        width={48}
        borderRadius={24}
      />
      <Text weight="semibold">Nadia Rahman</Text>
    </View>
  );
}

Live component

imagesmalllargeplaceholder

Use stable square dimensions.
Provide fallbacks for missing user images.

Usage

import { Avatar } from '@sohantalukder/rn-kit';

import { View } from 'react-native';
import { Avatar, Text, useTheme } from '@sohantalukder/rn-kit';

export function UserSummary() {
  const { gutters, layout } = useTheme();

  return (
    <View style={[layout.row, layout.itemsCenter, gutters.gap_12]}>
      <Avatar
        imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
        height={48}
        width={48}
        borderRadius={24}
      />
      <Text weight="semibold">Nadia Rahman</Text>
    </View>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

imageUrlunknown-Configures image url for Avatar.

heightnumber | string-Sets the rendered height of the component.

widthnumber | string-Sets the rendered width of the component.

borderRadiusnumber0Controls corner rounding for image, avatar, or surface content.

Theme

Avatar reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

image
small
large
placeholder

Best Practices

Use stable square dimensions.
Provide fallbacks for missing user images.