Avatar.Accessory Change Icon

[sirshad01]

I was wondering if there is a built in way to change the icon of the avatar accessory view? Thank you

[theianmay]

Apologies for the delay. We are a new team working to get RNE back to a working state. But in short, the answer is yes! You can customize the Avatar.Accessory icon using the name and type props (inherited from Icon props).

Basic usage:

<Avatar size={80} rounded source={{ uri: 'image-url' }}>
  <Avatar.Accessory name="edit" type="material" />
</Avatar>

With custom background color:

<Avatar size={80} rounded source={{ uri: 'image-url' }}>
  <Avatar.Accessory 
    name="check" 
    type="material" 
    style={{ backgroundColor: '#4caf50' }} 
  />
</Avatar>

Different icon types:

// Material Icons
<Avatar.Accessory name="add" type="material" />

// FontAwesome
<Avatar.Accessory name="camera" type="font-awesome" />

// Ionicons
<Avatar.Accessory name="heart" type="ionicon" />

The Avatar.Accessory component should include all Icon props as documented, so you can use any icon from the supported libraries (Material, FontAwesome, Ionicons, etc.) by specifying the name and type.

Note: In v5.0.0-beta, TypeScript may show errors for these props, but I believe they work correctly at runtime.