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="[email protected]" 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.