import Avatar from 'mrn/lib/Avatar.js'

public class | source

Avatar

Extends:

react-native~Component → Avatar

Avatar Component

Example:

<Subheader text="Avatar use image"/>
<View style={styles.avatarContainer}>
    <Avatar src="https://s3.amazonaws.com/uifaces/faces/twitter/ok/128.jpg"/>
    <Avatar src="https://s3.amazonaws.com/uifaces/faces/twitter/pixeliris/128.jpg"/>
    <Avatar src="https://s3.amazonaws.com/uifaces/faces/twitter/sillyleo/128.jpg"/>
    <Avatar src="https://s3.amazonaws.com/uifaces/faces/twitter/iannnnn/128.jpg"/>
</View>
<Subheader text="Avatar use icon"/>
<View style={styles.avatarContainer}>
    <Avatar icon="google"/>
    <Avatar icon="folder"/>
    <Avatar icon="phone" backgroundColor={COLOR.paperGreen500.color}/>
    <Avatar icon="plus" backgroundColor={COLOR[`${primary}500`].color}/>
</View>
<Subheader text="Avatar with different size"/>
<View style={styles.avatarContainer}>
    <Avatar src="http://mrn.js.org/user/image/favicon.png"/>
    <Avatar size={60} src="http://mrn.js.org/user/image/favicon.png"/>
    <Avatar size={80} src="http://mrn.js.org/user/image/favicon.png"/>
    <Avatar size={120} src="http://mrn.js.org/user/image/favicon.png"/>
</View>

Constructor Summary

Public Constructor
public	constructor(props: object)

Public Constructors

public constructor(props: object) source

Params:

Name	Type	Attribute	Description
props	object
props.icon	enum(ICON_NAME)		Icon name
props.src	string		Image src
props.size	number	optional default: 40	Avatar size
props.color	string	optional default: '#fff'	Color of icon of Avatar. Accept a color string such as RGBA,RGB,HEX.
props.backgroundColor	string	optional default: '#bdbdbd'	Background color of Avatar. Only use with a icon prop. Accept a color string such as RGBA,RGB,HEX.