Animated.timing function useNativeDriver

Pulse.js

@@ -6,15 +6,15 @@ const { height, width } = Dimensions.get('window');
 export default class Pulse extends React.Component {
 	constructor(props) {
 		super(props);
-	
+
 		this.anim = new Animated.Value(0);
 	}
 
 	componentDidMount() {
 		Animated.timing(this.anim, {
 			toValue: 1,
 			duration: this.props.interval,
-			easing: Easing.in,
+			easing: Easing.in
 		})
 		.start();
 	}
@@ -50,7 +50,7 @@ export default class Pulse extends React.Component {
 				/>
 			</View>
 		);
-	}	
+	}
 }
 
 
@@ -65,4 +65,4 @@ const styles = StyleSheet.create({
 	circle: {
 		borderWidth: 4 * StyleSheet.hairlineWidth,
 	},
-});
+});

PulseLoader.js

@@ -6,7 +6,7 @@ import Pulse from './Pulse';
 export default class LocationPulseLoader extends React.Component {
 	constructor(props) {
 		super(props);
-	
+
 		this.state = {
 			circles: []
 		};
@@ -20,6 +20,10 @@ export default class LocationPulseLoader extends React.Component {
 		this.setCircleInterval();
 	}
 
+	componentWillUnmount(){
+		clearInterval(this.setInterval);
+	}
+
 	setCircleInterval() {
 		this.setInterval = setInterval(this.addCircle.bind(this), this.props.interval);
 		this.addCircle();
@@ -35,6 +39,7 @@ export default class LocationPulseLoader extends React.Component {
 			toValue: this.props.pressInValue,
 			duration: this.props.pressDuration,
 			easing: this.props.pressInEasing,
+			useNativeDriver: true
 		}).start(() => clearInterval(this.setInterval));
 	}
 
@@ -43,6 +48,7 @@ export default class LocationPulseLoader extends React.Component {
 			toValue: 1,
 			duration: this.props.pressDuration,
 			easing: this.props.pressOutEasing,
+			useNativeDriver: true
 		}).start(this.setCircleInterval.bind(this));
 	}
 
@@ -74,31 +80,32 @@ export default class LocationPulseLoader extends React.Component {
 					}}
 				>
 					<Image
-						source={{ uri: avatar }}
-						style={{
+						source={avatar}
+						style={[{
 							width: size,
 							height: size,
 							borderRadius: size/2,
 							backgroundColor: avatarBackgroundColor
-						}}
+						}, this.props.avatarStyle]}
 					/>
 				</TouchableOpacity>
 			</View>
 		);
-	}	
+	}
 }
 
 LocationPulseLoader.propTypes = {
   interval: React.PropTypes.number,
   size: React.PropTypes.number,
   pulseMaxSize: React.PropTypes.number,
-  avatar: React.PropTypes.string.isRequired,
+  avatar: Image.propTypes.source.isRequired,
   avatarBackgroundColor: React.PropTypes.string,
   pressInValue: React.PropTypes.number,
   pressDuration: React.PropTypes.number,
   borderColor: React.PropTypes.string,
   backgroundColor: React.PropTypes.string,
   getStyle: React.PropTypes.func,
+	avatarStyle: Image.propTypes.style
 };
 
 LocationPulseLoader.defaultProps = {
@@ -114,5 +121,5 @@ LocationPulseLoader.defaultProps = {
   borderColor: '#D8335B',
   backgroundColor: '#ED225B55',
   getStyle: undefined,
+	avatarStyle: {}
 };
-