Avatar

A basic Avatar component that should render nicely on any platform. Supports a good level of customization.

You can customization Avatar component with the Props

Usage#

import React, {FC} from 'react';
import {Body, Avatar} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body>
      <Avatar />
    </Body>
  );
};

Reference#

Props#

here all the list of Props you can use for Avatar Component and it Inherits all ImageProps Props, from React Native

source#

source props for give the image url to the Avatar by default it show some ramdom image url type string before loading the image it will show you gray background color

import React, {FC} from 'react';
import {Body, Avatar} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body paddingAll={20} V_Aligin_center>
      <Avatar source={'https://picsum.photos/200/300?random=19'} />
    </Body>
  );
};

borderRadius#

props for adding the Avatar border radius and type number by default it will 50px be in Avatar

import * as React from 'react';
import {Avatar} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body paddingAll={20} V_Aligin_center>
      <Avatar
        source={'https://picsum.photos/200/300?random=19'}
        borderRadius={20}
      />
    </Body>
  );
};

size#

this props gives you 3 different image size like 'large' | 'small' | 'medium' type string

customeSize#

props gives you custome size like 20, 40 etc., type number

type#

props gives you rounded avatar or squared avartar type string--'rounded'|'square' default is rounded

inlineStyle#

props give addition props to the Avatar element type Object