Single Avatar
API
import Avatar from '@flexnative/avatar';
Component
A React PureComponent that renders an avatar component with various customization options.
Avatar
Type: React.PureComponent<AvatarProps>
Props
Properties for the Avatar component.
AvatarProps
info
AvatarProps of @flexnative/avatar package extends
ImageProps | TextProps.
| Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
| type | Type | true | image | Defines the type of avatar to be displayed. image, icon and text are supported. |
| fillMode | FillMode | false | solid | Represents the fill mode for an avatar component. |
| radius | BorderRadius | false | full | Avatar border radius. |
| size | Sizes | false | medium | Avatar Size. |
| backgroundColor | ColorValue | false | undefined | Background color according react-native ColorValue. |
| borderColor | ColorValue | false | undefined | Borders color according react-native ColorValue. |
| color | ColorValue | false | default | Color by theme or a custom color according react-native ColorValue. |
| borderWidth | BorderWidth | false | none | Optional avatar borders width. |
| text | string | false | undefined | Text to display on avatar for type Type = 'text' |
| textColor | ColorValue | false | undefined | Text color according react-native ColorValue. Available for Type = 'text' |
| icon | IconName | false | undefined | Name of icon. Icon props for Avatar Type = 'icon' |
| iconColor | ColorValue | false | undefined | Icon color according react-native ColorValue. Available for Type = 'icon' |
Type
Defines the type of avatar to be displayed.
One of 'image' | 'icon' | 'text'
| Name | Type | Description |
|---|---|---|
| image | string | An avatar that displays an image. |
| icon | string | An avatar that displays an icon. |
| text | string | An avatar that displays text. |
FillMode
Represents the fill mode for an avatar component.
One of 'solid' | 'none' | 'ghost'
| Name | Type | Description |
|---|---|---|
| solid | string | The avatar will have a solid fill. |
| none | none | The avatar will have no fill. |
| ghost | ghost | The avatar will have a ghost fill. warning To have good appearance for 'ghost', with custom color you should use hex colors. |
Sizes
One of 'small' | 'medium' | 'large' | number
| Name | Type | Value |
|---|---|---|
| small | number | 24 |
| medium | number | 40 |
| large | number | 64 |
number | Any number value |
Usecase Examples
The following example demonstrates the different types of Avatar in action.
Image Type
Icon Type
Text Type
R A
R A
R A
R A
R A
R A
R A
R A
R A
R A
R A
R A
R A
Playground
Live Editor
//Play with props to see live changes; render(<Avatar source={LOGO} size={120} color='primary' borderWidth='thin' fillMode='ghost' borderColor='crimson'/>);
Result
Loading...
📄️ Icon Type
Avatar with icons.
📄️ Image Type
Avatar with images.
📄️ Text Type
Avatar with text.