Proper Android unlocking. Reverts #105. Fixes #106, #79, #65 etc

src/AnimatedCircularProgress.js

@@ -15,32 +15,12 @@ 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) {

src/CircularProgress.js

@@ -1,22 +1,35 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, ViewPropTypes, Platform, ART } from 'react-native';
+import { View, ViewPropTypes, Platform, ART, AppState } from 'react-native';
 const { Surface, Shape, Path, Group } = ART;
 import MetricsPath from 'art/metrics/path';
 
 export default class CircularProgress extends React.Component {
 
+  state = {
+    // We need to track this to mitigate a bug with RN ART on Android.
+    // After being unlocked the <Surface> is not rendered.
+    // To mitigate this we change the key-prop to forcefully update the <Surface>
+    // It's horrible.
+    // See https://github.com/facebook/react-native/issues/17565
+    appState: AppState.currentState,
+  }
+
   circlePath(cx, cy, r, startDegree, endDegree) {
     let p = Path();
     p.path.push(0, cx + r, cy);
     p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, endDegree * Math.PI / 180, 1);
     return p;
   }
 
-  extractFill(fill) {
-    return Math.min(100, Math.max(0, fill));
-  }
+  extractFill = fill => Math.min(100, Math.max(0, fill));
+
+  componentDidMount = () => AppState.addEventListener('change', this.handleAppStateChange);
+
+  componentWillUnmount = () => AppState.removeEventListener('change', this.handleAppStateChange);
+
+  handleAppStateChange = nextAppState => this.setState({ appState: nextAppState });
 
   render() {
     const {
@@ -52,6 +65,7 @@ export default class CircularProgress extends React.Component {
         <Surface
           width={size}
           height={size}
+          key={this.state.appState}
         >
           <Group rotation={rotation - 90} originX={size/2} originY={size/2}>
             { backgroundColor !== 'transparent' && (