React-native-image-avatars NPM

react-native-image-avatars

A simple and fully customizable React Native component that displays avatars for images & text.

Features	Visual Effects
Rounded & Square shaped avatars Avatars with border colors* Avatars for textual data

Installation

If using yarn:

yarn add react-native-image-avatars

If using npm:

npm i react-native-image-avatars

Usage

import { Avatar } from 'react-native-image-avatars';

Text Avatar:

<Avatar
  imageUrl = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
  size="small"
  borderColor = "#f2f2f2"
  shadow
/>

Text Avatar:

<Avatar
  type = 'text'
  text='Davis Benton'
  size="x-small"
  borderColor = "#f2f2f2"
  textBackgroundFill = '#fff'
  shadow
/>

Documentation

Component Props Reference

Name	Description	Default	Type
type	'image' or 'text'	image	String
imageUrl	URL of the image	none	String
shadow	Shadow effect: elevation {15} for android & equivalent for IOS	true	Boolean
size	Values: 'x-small', 'small', 'medium', 'large' or 'x-large'	small	String
shape	Values: 'circle' or 'square'	circle	String
text	Extracts initials of each word (upto 2 slices max). Example: text='David Benton Woods' would eventually display 'DB'	none	String
borderColor	Border to the shape with color specified	none	String
textBackgroundFill	Background color for text avatar	#C0C0C0	String