diff --git a/Pulse.js b/Pulse.js index e935e1f..117a39d 100644 --- a/Pulse.js +++ b/Pulse.js @@ -6,7 +6,7 @@ const { height, width } = Dimensions.get('window'); export default class Pulse extends React.Component { constructor(props) { super(props); - + this.anim = new Animated.Value(0); } @@ -14,7 +14,7 @@ export default class Pulse extends React.Component { 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 { /> ); - } + } } @@ -65,4 +65,4 @@ const styles = StyleSheet.create({ circle: { borderWidth: 4 * StyleSheet.hairlineWidth, }, -}); \ No newline at end of file +}); diff --git a/PulseLoader.js b/PulseLoader.js index d362815..f9580b4 100644 --- a/PulseLoader.js +++ b/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 { }} > ); - } + } } 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: {} }; -