Home

Awesome

<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

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

Example

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

PropertyTypeDefaultDescription
intervalnumber2000action buttons visible or not
sizenumber100width and height of the avatar
pulseMaxSizenumber250maximum size of the pulse in the background
avatarstringundefinedrequired avatar url to display
pressInValuenumber0.8should be between 0 and 1. scale of the avatar, when pressed in
pressDurationnumber150duration of the scale animation
pressInEasingEasingEasing.ineasing type of the press in animation
pressOutEasingEasingEasing.outeasing type of the press out animation
borderColorstring'#D8335B'border color of the pulse
backgroundColorstring'#ED225B55'background color of the pulse
getStylefunctionundefinedoverride the styling of the pulse. gets as parameter the Animated variable. e.g. (anim) => ({ backgroundColor: 'yellow' })