├── Pulse.js
├── PulseLoader.js
├── README.md
└── package.json


/Pulse.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { View, StyleSheet, Animated, Easing, Dimensions } from 'react-native';
 3 | 
 4 | const { height, width } = Dimensions.get('window');
 5 | 
 6 | export default class Pulse extends React.Component {
 7 | 	constructor(props) {
 8 | 		super(props);
 9 | 	
10 | 		this.anim = new Animated.Value(0);
11 | 	}
12 | 
13 | 	componentDidMount() {
14 | 		Animated.timing(this.anim, {
15 | 			toValue: 1,
16 | 			duration: this.props.interval,
17 | 			easing: Easing.in,
18 | 		})
19 | 		.start();
20 | 	}
21 | 
22 | 	render() {
23 | 		const { size, pulseMaxSize, borderColor, backgroundColor, getStyle } = this.props;
24 | 
25 | 		return (
26 | 			<View style={[styles.circleWrapper, {
27 | 				width: pulseMaxSize,
28 | 				height: pulseMaxSize,
29 | 				marginLeft: -pulseMaxSize/2,
30 | 				marginTop: -pulseMaxSize/2,
31 | 			}]}>
32 | 				<Animated.View
33 | 					style={[styles.circle, {
34 | 						borderColor,
35 | 						backgroundColor,
36 | 						width: this.anim.interpolate({
37 | 							inputRange: [0, 1],
38 | 							outputRange: [size, pulseMaxSize]
39 | 						}),
40 | 						height: this.anim.interpolate({
41 | 							inputRange: [0, 1],
42 | 							outputRange: [size, pulseMaxSize]
43 | 						}),
44 | 						borderRadius: pulseMaxSize/2,
45 | 						opacity: this.anim.interpolate({
46 | 							inputRange: [0, 1],
47 | 							outputRange: [1, 0]
48 | 						})
49 | 					}, getStyle && getStyle(this.anim)]}
50 | 				/>
51 | 			</View>
52 | 		);
53 | 	}	
54 | }
55 | 
56 | 
57 | const styles = StyleSheet.create({
58 | 	circleWrapper: {
59 | 		justifyContent: 'center',
60 | 		alignItems: 'center',
61 | 		position: 'absolute',
62 | 		left: width/2,
63 | 		top: height/2,
64 | 	},
65 | 	circle: {
66 | 		borderWidth: 4 * StyleSheet.hairlineWidth,
67 | 	},
68 | });


--------------------------------------------------------------------------------
/PulseLoader.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import { View, Image, TouchableOpacity, Animated, Easing } from 'react-native';
  4 | import Pulse from './Pulse';
  5 | 
  6 | 
  7 | export default class LocationPulseLoader extends React.Component {
  8 | 	constructor(props) {
  9 | 		super(props);
 10 | 	
 11 | 		this.state = {
 12 | 			circles: []
 13 | 		};
 14 | 
 15 | 		this.counter = 1;
 16 | 		this.setInterval = null;
 17 | 		this.anim = new Animated.Value(1);
 18 | 	}
 19 | 
 20 | 	componentDidMount() {
 21 | 		this.setCircleInterval();
 22 | 	}
 23 | 
 24 | 	setCircleInterval() {
 25 | 		this.setInterval = setInterval(this.addCircle.bind(this), this.props.interval);
 26 | 		this.addCircle();
 27 | 	}
 28 | 
 29 | 	addCircle() {
 30 | 		this.setState({ circles: [...this.state.circles, this.counter] });
 31 | 		this.counter++;
 32 | 	}
 33 | 
 34 | 	onPressIn() {
 35 | 		Animated.timing(this.anim, {
 36 | 			toValue: this.props.pressInValue,
 37 | 			duration: this.props.pressDuration,
 38 | 			easing: this.props.pressInEasing,
 39 | 		}).start(() => clearInterval(this.setInterval));
 40 | 	}
 41 | 
 42 | 	onPressOut() {
 43 | 		Animated.timing(this.anim, {
 44 | 			toValue: 1,
 45 | 			duration: this.props.pressDuration,
 46 | 			easing: this.props.pressOutEasing,
 47 | 		}).start(this.setCircleInterval.bind(this));
 48 | 	}
 49 | 
 50 | 	render() {
 51 | 		const { size, avatar, avatarBackgroundColor, interval } = this.props;
 52 | 
 53 | 		return (
 54 | 			<View style={{
 55 | 				flex: 1,
 56 | 				backgroundColor: 'transparent',
 57 | 				justifyContent: 'center',
 58 | 				alignItems: 'center',
 59 | 			}}>
 60 | 				{this.state.circles.map((circle) => (
 61 | 					<Pulse
 62 | 						key={circle}
 63 | 						{...this.props}
 64 | 					/>
 65 | 				))}
 66 | 
 67 | 				<TouchableOpacity
 68 | 					activeOpacity={1}
 69 | 					onPressIn={this.onPressIn.bind(this)}
 70 | 					onPressOut={this.onPressOut.bind(this)}
 71 | 					style={{
 72 | 						transform: [{
 73 | 							scale: this.anim
 74 | 						}]
 75 | 					}}
 76 | 				>
 77 | 					<Image
 78 | 						source={{ uri: avatar }}
 79 | 						style={{
 80 | 							width: size,
 81 | 							height: size,
 82 | 							borderRadius: size/2,
 83 | 							backgroundColor: avatarBackgroundColor
 84 | 						}}
 85 | 					/>
 86 | 				</TouchableOpacity>
 87 | 			</View>
 88 | 		);
 89 | 	}	
 90 | }
 91 | 
 92 | LocationPulseLoader.propTypes = {
 93 |   interval: PropTypes.number,
 94 |   size: PropTypes.number,
 95 |   pulseMaxSize: PropTypes.number,
 96 |   avatar: PropTypes.string.isRequired,
 97 |   avatarBackgroundColor: PropTypes.string,
 98 |   pressInValue: PropTypes.number,
 99 |   pressDuration: PropTypes.number,
100 |   borderColor: PropTypes.string,
101 |   backgroundColor: PropTypes.string,
102 |   getStyle: PropTypes.func,
103 | };
104 | 
105 | LocationPulseLoader.defaultProps = {
106 |   interval: 2000,
107 |   size: 100,
108 |   pulseMaxSize: 250,
109 |   avatar: undefined,
110 |   avatarBackgroundColor: 'white',
111 |   pressInValue: 0.8,
112 |   pressDuration: 150,
113 |   pressInEasing: Easing.in,
114 |   pressOutEasing: Easing.in,
115 |   borderColor: '#D8335B',
116 |   backgroundColor: '#ED225B55',
117 |   getStyle: undefined,
118 | };
119 | 
120 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">Pulse Loader for React Native</h1>
 2 | <p align="center">tinder-like loader for your react native app</p>
 3 | 
 4 | <p align="center">
 5 |   <img src="http://i.giphy.com/l0MYz2cMbOryuyPZu.gif" />
 6 | </p>
 7 | 
 8 | ### Installation
 9 | ```bash
10 | npm i react-native-pulse-loader --save
11 | ```
12 | 
13 | ### Example
14 | 
15 | ```js
16 | import React from 'react';
17 | import PulseLoader from 'react-native-pulse-loader';
18 | 
19 | const App = ({}) => (
20 |   <PulseLoader
21 |     avatar={'https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e35/11429705_386886401514376_550879228_n.jpg'}
22 |   />
23 | );
24 | ```
25 | 
26 | 
27 | ### API
28 | 
29 | | Property       | Type          | Default             | Description |
30 | | -------------  |:-------------:|:------------:       | ----------- |
31 | | interval       | number        | 2000                | action buttons visible or not
32 | | size           | number        | 100                 | width and height of the avatar
33 | | pulseMaxSize   | number        | 250                 | maximum size of the pulse in the background
34 | | avatar         | string        | undefined           | **required** avatar url to display
35 | | pressInValue   | number        | 0.8                 | should be between 0 and 1. scale of the avatar, when pressed in
36 | | pressDuration  | number        | 150                 | duration of the scale animation
37 | | pressInEasing  | Easing        | Easing.in           | easing type of the press in animation
38 | | pressOutEasing | Easing        | Easing.out          | easing type of the press out animation
39 | | borderColor    | string        | '#D8335B'           | border color of the pulse
40 | | backgroundColor| string        | '#ED225B55'         | background color of the pulse
41 | | getStyle       | function      | undefined           | override the styling of the pulse. gets as parameter the Animated variable. e.g. (anim) => ({ backgroundColor: 'yellow' })
42 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-pulse-loader",
 3 |   "version": "1.0.3",
 4 |   "description": "tinder-like loader for your react native app",
 5 |   "main": "PulseLoader.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/mastermoo/react-native-pulse-loader.git"
12 |   },
13 |   "keywords": [
14 |     "react-native",
15 |     "tinder",
16 |     "loader",
17 |     "pulse-loader",
18 |     "location-loader"
19 |   ],
20 |   "peerDependencies": {
21 |     "react-native": "^0.27",
22 |     "prop-types": "15.6.1"
23 |   },
24 |   "author": "Yousef Kamawall",
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/mastermoo/react-native-pulse-loader/issues"
28 |   },
29 |   "homepage": "https://github.com/mastermoo/react-native-pulse-loader#readme"
30 | }
31 | 


--------------------------------------------------------------------------------