# react-native-pulse-loader

> tinder-like loader for your react native app

Latest version **1.0.3** (published 2020-01-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-pulse-loader
pnpm add react-native-pulse-loader
yarn add react-native-pulse-loader
bun add react-native-pulse-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-01-03 |
| First published | 2016-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 274 |
| Author | Yousef Kamawall |
| Maintainers | mastermo |
| Keywords | react-native, tinder, loader, pulse-loader, location-loader |

## Links

- npm: https://www.npmjs.com/package/react-native-pulse-loader
- Repository: https://github.com/mastermoo/react-native-pulse-loader
- Homepage: https://github.com/mastermoo/react-native-pulse-loader#readme
- Issues: https://github.com/mastermoo/react-native-pulse-loader/issues
- npm.io page: https://npm.io/package/react-native-pulse-loader

## Recent versions

- 1.0.3 (latest) — 2020-01-03
- 1.0.2 — 2016-08-14
- 1.0.1 — 2016-08-14
- 1.0.0 — 2016-08-14

## README

<h1 align="center">Pulse Loader for React Native</h1>
<p align="center">tinder-like loader for your react native app</p>

<p align="center">
  <img src="http://i.giphy.com/l0MYz2cMbOryuyPZu.gif" />
</p>

### Installation
```bash
npm i react-native-pulse-loader --save
```

### Example

```js
import React from 'react';
import PulseLoader from 'react-native-pulse-loader';

const App = ({}) => (
  <PulseLoader
    avatar={'https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e35/11429705_386886401514376_550879228_n.jpg'}
  />
);
```


### API

| Property       | Type          | Default             | Description |
| -------------  |:-------------:|:------------:       | ----------- |
| interval       | number        | 2000                | action buttons visible or not
| size           | number        | 100                 | width and height of the avatar
| pulseMaxSize   | number        | 250                 | maximum size of the pulse in the background
| avatar         | string        | undefined           | **required** avatar url to display
| pressInValue   | number        | 0.8                 | should be between 0 and 1. scale of the avatar, when pressed in
| pressDuration  | number        | 150                 | duration of the scale animation
| pressInEasing  | Easing        | Easing.in           | easing type of the press in animation
| pressOutEasing | Easing        | Easing.out          | easing type of the press out animation
| borderColor    | string        | '#D8335B'           | border color of the pulse
| backgroundColor| string        | '#ED225B55'         | background color of the pulse
| getStyle       | function      | undefined           | override the styling of the pulse. gets as parameter the Animated variable. e.g. (anim) => ({ backgroundColor: 'yellow' })

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