Avatar
A component that represents a user.
Contents:
Avatar
Avatar Group

View full example: Avatar Example
Avatar
import React from 'react';
import { Avatar } from 'monalisa-ui';
const Example = () => (
<Avatar
source={{ uri: 'https://picsum.photos/id/434/200/200' }}
/>
);
export default Example;
Configuration
Property
Default
Option
Description
source
-
-
The image source (either a remote URL or a local file resource)
circle
false
boolean
Shapes the avatar to a circle
rounded
false
boolean
Renders avatar with slightly round shaped edges
style
-
-
Style for the avatar
isVisible
true
boolean
Display avatar background gray
width
50
number
Width of the avatar
height
50
number
Height of the avatar
value
-
string
Show value in avatar
Example
import React from 'react';
import { View } from 'react-native';
import { Avatar } from 'monalisa-ui';
const Example = () => (
<View>
<Avatar
source={{ uri: 'https://picsum.photos/id/434/200/200' }}
width={80}
height={80}
circle
/>
<Avatar
source={{ uri: 'https://picsum.photos/id/434/200/200' }}
width={80}
height={80}
rounded
/>
<Avatar
source={{ uri: 'https://picsum.photos/id/434/200/200' }}
style={{ marginLeft: 20 }}
/>
</View>
);
export default Example;
Avatar Group
import React from 'react';
import { AvatarGroup } from 'monalisa-ui';
const groups = [
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
];
const Example = () => (
<AvatarGroup
data={groups}
/>
);
export default Example;
Configuration
Property
Default
Option
Description
data
-
array
Array of avatar for component (required)
appearance
stack
stack, grid
Indicates the shape of the avatar
maxCount
0
number
The maximum number of avatars allowed in the grid
Example
stack
import React from 'react';
import { AvatarGroup } from 'monalisa-ui';
const groups = [
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
];
const Example = () => (
<AvatarGroup
data={groups}
/>
);
export default Example;
grid
import React from 'react';
import { AvatarGroup } from 'monalisa-ui';
const groups = [
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
];
const Example = () => (
<AvatarGroup
data={groups}
appearance="grid"
/>
);
export default Example;
max count
import React from 'react';
import { AvatarGroup } from 'monalisa-ui';
const groups = [
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
{ source: { uri: 'https://picsum.photos/id/434/200/200' } },
];
const Example = () => (
<AvatarGroup
data={groups}
appearance="grid"
maxCount={4}
/>
);
export default Example;
Last updated