https://github.com/niborb/react-native-gravatar
React Native Gravatar component
https://github.com/niborb/react-native-gravatar
Last synced: 2 months ago
JSON representation
React Native Gravatar component
- Host: GitHub
- URL: https://github.com/niborb/react-native-gravatar
- Owner: niborb
- License: isc
- Created: 2016-03-20T12:34:05.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-04-03T18:27:46.000Z (about 8 years ago)
- Last Synced: 2025-10-18T09:54:33.944Z (8 months ago)
- Language: JavaScript
- Size: 6.84 KB
- Stars: 28
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-avatar-gravatar ★18 - React Native Gravatar component (Components / UI)
- awesome-react-native - react-native-avatar-gravatar ★18 - React Native Gravatar component (Components / UI)
- awesome-react-native - react-native-avatar-gravatar ★18 - React Native Gravatar component (Components / UI)
- fucking-awesome-react-native - react-native-avatar-gravatar ★18 - React Native Gravatar component (Components / UI)
- awesome-react-native - react-native-avatar-gravatar ★18 - React Native Gravatar component (Components / UI)
- awesome-reactnative-ui - react-native-gravatar - native-avatar-gravatar.svg?style=flat-square)| (Others)
- awesome-react-native-ui - react-native-avatar-gravatar ★10 - React Native Gravatar component (Components / UI)
- awesome-reactnative-ui - react-native-gravatar - native-avatar-gravatar.svg?style=flat-square)| (Others)
README
# React Native Gravatar component
[](https://www.npmjs.com/package/react-native-avatar-gravatar)
[](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 = () => (
);
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.