Avatar

Avatars are used to represent the user, other users, or contextual icons.

import { Avatar } from 'material-bread';

Avatars can be images, letters, or icons. First provide the type of avatar, then either provide the content prop for icons and letters or image prop for images. A simple image example is shown below.

Live Editing

<View style={{flexDirection: 'row', alignItems: 'center'}}>
    <Avatar 
        type="image" 
        image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } 
        size={64} 
    />
    <Avatar 
        type="image" 
        image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } 
        size={48} 
        onPress={() => console.log('avatar')}
        ripple
    />
    <Avatar 
        type="image" 
        image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } 
    /> 
</View>

Usage depends on what navigation package you're using. For react-navigation you can follow their guide on TabNavigation

import React, { Component } from 'react';
import { View } from 'react-native';
import { Avatar } from 'material-bread';

export default class UserAvatar extends Component {
  render() {
    return (
        <Avatar 
            type="icon"
            content="face"
            contentColor={'white'}
        />
    );
  }
}

Name

Description

Type

Default

color

Background color for avatar, applies to text and icon

string

primary

content

Name of icon or string to be rendered

string

contentColor

Color of icon or text

string

white

contentSize

Custom size that is not relative to avatar

number

contentStyles

Styles applied to content

object

image

Display image element as avatar

node

onPress

Onpress callback

func

ripple

enables ripple if onPress is provided

bool

false

rippleProps

Spreads ripple props to Ripple Component

object

size

Size of avatar, content scales with size

number

type

Indicates which type of avatar

string: image, icon, text

style

Styles root element

object

You can see even more examples in the Storybook environment.







Live Editing

<View style={{flexDirection: 'row', alignItems: 'center'}}>
    <Avatar
        type="icon"
        content="face"
        contentColor={'white'}
        size={64}
        color={'#42a5f5'}
    />
    <Avatar
        type="icon"
        content="alarm"
        size={48}
        color={'#c2185b'}
    />
    <Avatar
        type="icon"
        content="arrow-back"
        contentColor={'#c2185b'}
        color={'#f4511e'}
    />
</View>

Text is usually two letters for a person's initial, but it can be anything you want.

Live Editing

<View style={{flexDirection: 'row', alignItems: 'center'}}>
    <Avatar
        type="text"
        content="CP"
        contentColor={'white'}
        size={64}
        color={'#42a5f5'}
    />
    <Avatar
        type="text"
        content="MB"
        size={48}
        color={'#c2185b'}
    />
    <Avatar
        type="text"
        content="NP"
        contentColor={'#c2185b'}
        color={'#f4511e'}
    />
</View>

You can style any part or add children to replace all the inner content to create something more custom.



Live Editing

<Avatar 
    style={{borderRadius: 10}}
    size={40}
    type={'icon'}
    content={'face'}
/>

Avatar

Component #

Usage #

Props #

Demos #

Avatar Icons #

Avatar Text #

Custom #