##
Usage

    <Avatar
      small
      rounded
      source={{uri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg"}}
      onPress={() => console.log("Works!")}
      activeOpacity={0.7}
    />

    <Avatar
      medium
      source={{uri: "https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg"}}
      onPress={() => console.log("Works!")}
      activeOpacity={0.7}
    />

    <Avatar
      large
      source={{uri: "https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg"}}
      onPress={() => console.log("Works!")}
      activeOpacity={0.7}
    />

    <Avatar
      xlarge
      rounded
      source={{uri: "https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg"}}
      onPress={() => console.log("Works!")}
      activeOpacity={0.7}
    />

###
Avatar with initials

    <Avatar
      small
      rounded
      title="MT"
      onPress={() => console.log("Works!")}
      activeOpacity={0.7}
    />

    <Avatar
      medium
      title="BP"
      onPress={() => console.log("Works!")}
      activeOpacity={0.7}
    />

    <Avatar
      large
      title="LW"
      onPress={() => console.log("Works!")}
      activeOpacity={0.7}
    />

    <Avatar
      xlarge
      rounded
      title="CR"
      onPress={() => console.log("Works!")}
      activeOpacity={0.7}
    />

###
Avatar with icons

    <Avatar
      small
      rounded
      icon={{name: 'user', type: 'font-awesome'}}
      onPress={() => console.log("Works!")}
      activeOpacity={0.7}
      containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}}
    />

    <Avatar
      medium
      overlayContainerStyle={{backgroundColor: 'blue'}}
      icon={{name: 'meetup', color: 'red', type: 'font-awesome'}}
      onPress={() => console.log("Works!")}
      activeOpacity={0.7}
      containerStyle={{flex: 3, marginTop: 100}}
    />

    <Avatar
      large
      icon={{name: 'rocket', color: 'orange', type: 'font-awesome'}}
      overlayContainerStyle={{backgroundColor: 'white'}}
      onPress={() => console.log("Works!")}
      activeOpacity={0.7}
      containerStyle={{flex: 4, marginTop: 75}}
    />

    <Avatar
      xlarge
      rounded
      icon={{name: 'home', type: 'font-awesome'}}
      onPress={() => console.log("Works!")}
      activeOpacity={0.7}
      containerStyle={{flex: 5, marginRight: 60}}
    />

##
Props

- `activeOpacity`
- `avatarStyle`
- `component`
- `containerStyle`
- `height`
- `icon`
- `iconStyle`
- `imageProps`
- `large`
- `onLongPress`
- `onPress`
- `overlayContainerStyle`
- `medium`
- `rounded`
- `source`
- `small`
- `title`
- `titleStyle`
- `width`
- `xlarge`

##
Reference

###
`activeOpacity`

Opacity when pressed

Type | Default
--- | ---
number | 0.2

###
`avatarStyle`

Style for avatar image

Type | Default
--- | ---
object (style) | none

###
`component`

Component for enclosing element (eg: TouchableHighlight, View, etc)

Type | Default
--- | ---
function | TouchableHighlight

###
`containerStyle`

Styling for outer container

Type | Default
--- | ---
object (style) | none

###
`height`

Height of the Avatar

Type | Default
--- | ---
number | 34

###
`icon`

Type | Default
--- | ---
object {name: string, color: string, size: number, type: string (default is material-community, or choose one of simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo), iconStyle: object(style)} | none

###
`iconStyle`

Extra styling for icon component (optional)

Type | Default
--- | ---
object (style) | none

###
`imageProps`

Optional properties to pass to the avatar e.g "resizeMode"

Type | Default
--- | ---
object (imageProperties) | none

###
`large`

Large sized avatar

Type | Default
--- | ---
boolean | false

###
`onLongPress`

Callback function when long pressing component

Type | Default
--- | ---
function | none

###
`onPress`

Callback function when pressing component

Type | Default
--- | ---
function | none

###
`overlayContainerStyle`

Style for the view outside image or icon

Type | Default
--- | ---
object (style) | none

###
`medium`

Medium sized avatar

Type | Default
--- | ---
boolean | false

###
`rounded`

Makes the avatar circular

Type | Default
--- | ---
boolean | false

###
`small`

Small sized avatar

Type | Default
--- | ---
boolean | false

###
`source`

Image source

Type | Default
--- | ---
object (style) | none

###
`title`

Renders title in the avatar

Type | Default
--- | ---
string | none

###
`titleStyle`

Style for the title

Type | Default
--- | ---
object (style) | none

###
`width`

Width of the avatar

Type | Default
--- | ---
number | 34

###
`xlarge`

Extra large sized avatar

Type | Default
--- | ---
boolean | false

← Overview Badge →