azir-image v1.0.1

Azir Framwork : https://azir.io/docs

Avatar

Avatars are found all over ui design from lists to profile screens. They are commonly used to represent a user and can contain photos, icons, or even text.

Installation

to install the latest version of azir-avatar you only need to run:

npm install azir-avatar  --save

or

yarn add azir-avatar

Examples

Basic :

import Avatar from "azir-avatar";
import { BrandIcons } from "azir-icon";
---
//Image
<Avatar
  source={ { uri: "https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixid=eyJhcHBfaWQiOjEyMDd9" } } />
//ICON
<Avatar icon={BrandIcons.react} />
//Title
<Avatar title="RN" />

Advance with Styles :

import Avatar from "azir-avatar";
import  Icon,{ BrandIcons } from "azir-icon";
---
<Avatar style={ {borderWidth:1,borderColor:"red"} }
  icon={BrandIcons.react} shadow size={300}
  color="gray" contentColor="error" rounded={false}
  contentStyle={ {borderWidth:1, borderRadius:50, padding:5,borderColor:"white" } }
/>

Custom content with Press :

import Avatar from "azir-avatar";
import Button from "azir-button";
import  Icon,{ SolidIcons } from "azir-icon";
---
<Button
  color="transparent"
  onPress={() => {
    console.log("hii");
  }}>
    <Avatar
      size={"large"}
      style={ { backgroundColor: "#eee",borderWidth:1,borderColor:"#ff9900" } }>
      <Icon icon={SolidIcons.baby} color="#ff9900"></Icon>
    </Avatar>
</Button>

Props

you can add any extra props based on the avatar content type ( for example if you have image avatar then you can pass image props to the avatar component )

<Avatar resizeMode="cover" />

• source
• title
• icon
• color
• size
• contentColor
• rounded
• source
• shadow
• contentStyle
• style

Reference

source

Avatar Image Source ( in case you want an image avatar )

title

Avatar title text ( in case you want text avatar )

icon

Avatar Icon ( in case you want Azir Icon avatar )

color

Background Color of the avatar

size

set the avatar component Size.

contentColor

set the avatar Color (for icon & Text)

rounded

Makes the avatar circular or square

shadow

If true, show shadow effect for this component.

contentStyle

override Avatar content Style based on the avatar content ( image, icon, text)

style

override Avatar Container Style which include ( View Style )