# react-native-avatar-gravatar

> React Native Gravatar component

Latest version **1.0.0** (published 2026-04-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-avatar-gravatar
pnpm add react-native-avatar-gravatar
yarn add react-native-avatar-gravatar
bun add react-native-avatar-gravatar
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2026-04-18 |
| First published | 2016-03-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 28 |
| Author | Robin Breuker |
| Maintainers | niborb |
| Keywords | gravatar, react, react-component, react-native, ios, android, react-native-gravatar, typescript |

## Links

- npm: https://www.npmjs.com/package/react-native-avatar-gravatar
- Repository: https://github.com/niborb/react-native-gravatar
- Homepage: https://github.com/niborb/react-native-gravatar#readme
- Issues: https://github.com/niborb/react-native-gravatar/issues
- npm.io page: https://npm.io/package/react-native-avatar-gravatar

## Dependencies (1)

- [blueimp-md5](https://npm.io/package/blueimp-md5.md) ^2.19.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2026-04-18
- 0.0.4 — 2016-07-08
- 0.0.3 — 2016-03-21
- 0.0.2 — 2016-03-20
- 0.0.1 — 2016-03-20

## README

# React Native Gravatar component

[![npm version](https://img.shields.io/npm/v/react-native-avatar-gravatar.svg?style=flat-square)](https://www.npmjs.com/package/react-native-avatar-gravatar)
[![npm downloads](https://img.shields.io/npm/dm/react-native-avatar-gravatar.svg?style=flat-square)](https://www.npmjs.com/package/react-native-avatar-gravatar)


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](#installation)
- [Usage](#usage)
- [Properties](#properties)
- [TypeScript](#typescript)
- [Development](#development)

## Installation
```
npm install react-native-avatar-gravatar
```

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

## Usage
```jsx
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:

```ts
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.

---
_Source: https://npm.io/package/react-native-avatar-gravatar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._