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';

<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
/>

<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 |

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

Author

Saurabh Kataria | Freelance Developer

Looking for a full-time or part-time remote-based developer. Checkout my UpWork Profile: https://www.upwork.com/fl/saurabhkataria6

License

MIT