diff --git a/package.json b/package.json index b230b96..8faa671 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-circular-progress", - "version": "0.1.1", + "version": "0.1.2", "description": "React Native component for creating animated, circular progress with ReactART", "main": "index.js", "repository": { diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js index aef6619..00c1948 100644 --- a/src/AnimatedCircularProgress.js +++ b/src/AnimatedCircularProgress.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Animated, Easing, View, ViewPropTypes } from 'react-native'; +import { Animated, AppState, Easing, View, ViewPropTypes } from 'react-native'; import CircularProgress from './CircularProgress'; const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress); @@ -9,12 +9,32 @@ export default class AnimatedCircularProgress extends React.Component { constructor(props) { super(props); this.state = { + appState: AppState.currentState, chartFillAnimation: new Animated.Value(props.prefill || 0) } } componentDidMount() { this.animateFill(); + AppState.addEventListener('change', this.handleAppStateChange); + } + + componentWillUnmount() { + AppState.removeEventListener('change', this.handleAppStateChange); + } + + handleAppStateChange = nextAppState => { + if (this.state.appState.match(/inactive|background/) && + nextAppState === 'active') { + // Fix bug on Android where the drawing is not displayed after the app is + // backgrounded / screen is turned off. Restart the animation when the app + // comes back to the foreground. + this.setState({ + chartFillAnimation: new Animated.Value(this.props.prefill || 0) + }); + this.animateFill(); + } + this.setState({ appState: nextAppState }); } componentDidUpdate(prevProps) {