Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

clear pulse interval when changing from visible to not visible #24

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

clear pulse interval when changing from visible to not visible #24

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 50 additions & 38 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you revise this commit so that the only changes are the ones related to clearing the interval and not formatting?

import PropTypes from 'prop-types';
import React, { Component } from "react";
import PropTypes from "prop-types";
import {
Animated,
InteractionManager,
Expand All @@ -10,7 +10,7 @@ import {
TouchableHighlight,
TouchableOpacity,
View
} from 'react-native';
} from "react-native";

class StatusBarAlert extends Component {
constructor(props) {
Expand All @@ -30,7 +30,7 @@ class StatusBarAlert extends Component {
Animated.parallel([
Animated.timing(this.state.height, {
toValue:
Platform.OS === 'ios'
Platform.OS === "ios"
? this.props.height +
(this.props.statusbarHeight || STATUS_BAR_HEIGHT)
: this.props.height,
Expand All @@ -42,27 +42,31 @@ class StatusBarAlert extends Component {
})
]).start();
});
}
// Pulse animation
this.timer = setInterval(() => {
if (this.props.pulse) {
if (Math.round(this.state.pulse._value) === 1) {
Animated.timing(this.state.pulse, {
toValue: 0,
duration: PULSE_DURATION
}).start();
} else {
Animated.timing(this.state.pulse, {
toValue: 1,
duration: PULSE_DURATION
}).start();
// Pulse animation
this.timer = setInterval(() => {
if (this.props.pulse) {
if (Math.round(this.state.pulse._value) === 1) {
Animated.timing(this.state.pulse, {
toValue: 0,
duration: PULSE_DURATION
}).start();
} else {
Animated.timing(this.state.pulse, {
toValue: 1,
duration: PULSE_DURATION
}).start();
}
}
}, PULSE_DURATION);
} else {
if (this.timer) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this also be this.handleClearInterval()?

clearInterval(this.timer);
}
}, PULSE_DURATION);
}
}

componentWillUnmount() {
clearInterval(this.timer);
this.handleClearInterval();
}

componentWillReceiveProps(nextProps) {
Expand All @@ -73,7 +77,7 @@ class StatusBarAlert extends Component {
Animated.parallel([
Animated.timing(this.state.height, {
toValue:
Platform.OS === 'ios'
Platform.OS === "ios"
? nextProps.height +
(this.props.statusbarHeight || STATUS_BAR_HEIGHT)
: nextProps.height,
Expand All @@ -100,18 +104,26 @@ class StatusBarAlert extends Component {
})
]).start();
});

this.handleClearInterval();
}
}
}

handleClearInterval() {
if (this.timer) {
clearInterval(this.timer);
}
}

render() {
const content = this.props.children || (
<Animated.Text
style={[
styles.text,
{
color: this.props.color || styles.text.color,
opacity: this.props.pulse === 'text' ? this.state.pulse : 1
opacity: this.props.pulse === "text" ? this.state.pulse : 1
}
]}
allowFontScaling={false}
Expand All @@ -128,7 +140,7 @@ class StatusBarAlert extends Component {
height: this.state.height,
opacity: this.state.opacity,
backgroundColor:
this.props.pulse === 'background'
this.props.pulse === "background"
? this.state.pulse.interpolate({
inputRange: [0, 1],
outputRange: [
Expand All @@ -153,39 +165,39 @@ class StatusBarAlert extends Component {
}
}

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;
const STATUS_BAR_HEIGHT = Platform.OS === "ios" ? 20 : StatusBar.currentHeight;
const PULSE_DURATION = 1000;
const SLIDE_DURATION = 300;
const ACTIVE_OPACITY = 0.6;
const DEFAULT_BACKGROUND_COLOR = '#3DD84C';
const DEFAULT_BACKGROUND_COLOR = "#3DD84C";
const SATURATION = 0.9;

const styles = {
view: {
height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT * 2 : STATUS_BAR_HEIGHT,
backgroundColor: saturate('#3DD84C', SATURATION)
height: Platform.OS === "ios" ? STATUS_BAR_HEIGHT * 2 : STATUS_BAR_HEIGHT,
backgroundColor: saturate("#3DD84C", SATURATION)
},
touchableOpacity: {
flex: 1,
display: 'flex',
display: "flex",
height: STATUS_BAR_HEIGHT,
justifyContent: 'flex-end',
alignItems: 'center'
justifyContent: "flex-end",
alignItems: "center"
},
text: {
height: STATUS_BAR_HEIGHT,
fontSize: 14,
fontWeight: '400',
fontWeight: "400",
lineHeight: 20,
marginBottom: Platform.OS === 'ios' ? 4 : 0,
color: 'white'
marginBottom: Platform.OS === "ios" ? 4 : 0,
color: "white"
}
};

StatusBarAlert.propTypes = {
visible: PropTypes.bool.isRequired,
message: PropTypes.string,
pulse: PropTypes.oneOf(['text', 'background', null, false]),
pulse: PropTypes.oneOf(["text", "background", null, false]),
backgroundColor: PropTypes.string,
highlightColor: PropTypes.string,
color: PropTypes.string,
Expand All @@ -197,7 +209,7 @@ StatusBarAlert.propTypes = {

StatusBarAlert.defaultProps = {
visible: false,
message: '',
message: "",
pulse: false,
backgroundColor: DEFAULT_BACKGROUND_COLOR,
highlightColor: null,
Expand All @@ -217,9 +229,9 @@ function saturate(color, percent) {
R = R < 255 ? R : 255;
G = G < 255 ? G : 255;
B = B < 255 ? B : 255;
let r = R.toString(16).length == 1 ? '0' + R.toString(16) : R.toString(16);
let g = G.toString(16).length == 1 ? '0' + G.toString(16) : G.toString(16);
let b = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16);
let r = R.toString(16).length == 1 ? "0" + R.toString(16) : R.toString(16);
let g = G.toString(16).length == 1 ? "0" + G.toString(16) : G.toString(16);
let b = B.toString(16).length == 1 ? "0" + B.toString(16) : B.toString(16);
return `#${r + g + b}`;
}

Expand Down