React Native Gravatar component

React Native Gravatar is a simple component that loads the avatar with an option to mask it with a circle, rounded or square shape.

• Installation
• Usage
• Properties
• TypeScript
• Development

Installation

npm install react-native-avatar-gravatar

Requires react >= 18 and react-native >= 0.70.

Usage

import React from 'react';
import Gravatar from 'react-native-avatar-gravatar';

const Application = () => (
  <Gravatar emailAddress="robin02+npm@gmail.com" size={300} mask="circle" />
);

export default Application;

Properties

Prop	Default	Type	Description
emailAddress	''	string	Email address for the gravatar. If not provided the default image is used.
size	600	number	Requested gravatar size. The rendered image uses size / 2 for its width/height. Pass an explicit value for best results.
mask	'circle'	'circle' | 'square' | 'rounded'	Mask shape applied to the image.
defaultImage	'retro'	'404' | 'mm' | 'identicon' | 'monsterid' | 'wavatar' | 'retro' | 'robohash' | 'blank'	Default gravatar style when no image is available.
resizeMode	'contain'	'cover' | 'contain' | 'stretch' | 'repeat' | 'center'	resizeMode forwarded to the underlying Image.
secure	true	boolean	When false, requests the image over HTTP instead of HTTPS.

All extra View props are forwarded to the wrapping container.

TypeScript

Types ship with the package:

import Gravatar, { GravatarProps, GravatarMask, GravatarDefaultImage } from 'react-native-avatar-gravatar';

Development

npm install
npm run lint
npm run typecheck
npm test
npm run build

The compiled output (lib/) is generated by tsc and is what gets published to npm.