Avatar - AMiSi Mobile Starter

Avatar displays an image when source is set. Otherwise, it derives up to two initials from name.

Usage

import { Avatar, View } from '@amisi-mobile-starter/ui';

export const People = () => (
  <View className="flex-row gap-3">
    <Avatar name="Ada Lovelace" />
    <Avatar name="Grace Hopper" size="lg" />
    <Avatar source={{ uri: 'https://i.pravatar.cc/112' }} size="lg" />
  </View>
);

Props

Prop	Type	Default	Description
`name`	`string`	`undefined`	Name used to derive initials. Empty names render `?`.
`source`	`ImageSourcePropType`	`undefined`	Native image source; takes precedence over `name`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Avatar and initials size.

Avatar also accepts React Native ViewProps.