https://github.com/mastermoo/react-native-pulse-loader

tinder-like loader for your react native app
https://github.com/mastermoo/react-native-pulse-loader

component loader pulse-loader react-native tinder

Last synced: 1 day ago
JSON representation

tinder-like loader for your react native app

• Host: GitHub
• URL: https://github.com/mastermoo/react-native-pulse-loader
• Owner: mastermoo
• Created: 2016-08-14T15:58:06.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-01-03T14:16:06.000Z (about 5 years ago)
• Last Synced: 2025-01-04T21:14:10.245Z (17 days ago)
• Topics: component, loader, pulse-loader, react-native, tinder
• Language: JavaScript
• Size: 4.88 KB
• Stars: 274
• Watchers: 9
• Forks: 61
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - react-native-pulse-loader ★158 - Tinder like loader for your React Native app (Components / UI)
• awesome-reactnative-ui - react-native-pulse-loader - like loader for your react native app|<ul><li>Last updated : This week</li><li>Stars : 182</li><li>Open issues : 5</li></ul>|| (Others)
• awesome-react-native - react-native-pulse-loader ★158 - Tinder like loader for your React Native app (Components / UI)
• awesome-react-native - react-native-pulse-loader ★158 - Tinder like loader for your React Native app (Components / UI)
• awesome-reactnative-ui - react-native-pulse-loader - like loader for your react native app|<ul><li>Last updated : This week</li><li>Stars : 182</li><li>Open issues : 5</li></ul>|| (Others)
• awesome-react-native - react-native-pulse-loader ★158 - Tinder like loader for your React Native app (Components / UI)
• awesome-react-native-ui - react-native-pulse-loader ★43 - Tinder like loader for your React Native app (Components / UI)

README

        
Pulse Loader for React Native

tinder-like loader for your react native app




  



### Installation

```bash

npm i react-native-pulse-loader --save

```

### Example

```js

import React from 'react';

import PulseLoader from 'react-native-pulse-loader';

const App = ({}) => (

  

);

```

### 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' })