Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: about 1 month ago
JSON representation

tinder-like loader for your react native app

Lists

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