Fix NetworkFailureToast blocking pointer event even it's invisible ou…

…rsky#7 Unmount NetworkFailureToast after animation completed
wallacesky · Feb 25, 2019 · 59499c4 · 59499c4
1 parent f2d178f
commit 59499c4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/src/FadeAnimation.tsx b/src/FadeAnimation.tsx
@@ -6,6 +6,7 @@ interface Props {
   children: React.ReactNode;
   duration: number;
   style?: StyleProp<ViewStyle>;
+  onFinishedAnimate?: () => void;
 }
 
 interface State {
@@ -32,7 +33,11 @@ export default class FadeAnimation extends React.PureComponent<Props, State> {
     Animated.timing(this.state.animatedVisibleValue, {
       toValue: visible ? 1 : 0,
       duration: duration,
-    }).start();
+    }).start(() => {
+      if (this.props.onFinishedAnimate != null) {
+        this.props.onFinishedAnimate();
+      }
+    });
   }
 
   render() {

diff --git a/src/NetworkFailureToast.tsx b/src/NetworkFailureToast.tsx
@@ -60,6 +60,7 @@ interface Props {
 
 interface State {
   isNetworkConnected: boolean;
+  isHidden: boolean;
 }
 
 export default class NetworkFailureToast extends React.PureComponent<
@@ -68,6 +69,7 @@ export default class NetworkFailureToast extends React.PureComponent<
 > {
   state = {
     isNetworkConnected: true,
+    isHidden: true,
   };
 
   componentDidMount() {
@@ -85,9 +87,30 @@ export default class NetworkFailureToast extends React.PureComponent<
   }
 
   handleConnectivityChange = (isConnected: boolean) => {
-    this.setState({
-      isNetworkConnected: isConnected,
-    });
+    if (!isConnected) {
+      this.setState(
+        {
+          isHidden: false,
+        },
+        () => {
+          this.setState({
+            isNetworkConnected: isConnected,
+          });
+        }
+      );
+    } else {
+      this.setState({
+        isNetworkConnected: isConnected,
+      });
+    }
+  };
+
+  onFinishedAnimate = () => {
+    if (this.state.isNetworkConnected) {
+      this.setState({
+        isHidden: true,
+      });
+    }
   };
 
   renderErrorText = (
@@ -103,7 +126,7 @@ export default class NetworkFailureToast extends React.PureComponent<
   };
 
   render() {
-    const { isNetworkConnected } = this.state;
+    const { isNetworkConnected, isHidden } = this.state;
     const {
       style,
       errorText,
@@ -113,11 +136,15 @@ export default class NetworkFailureToast extends React.PureComponent<
       animationDuration,
     } = this.props;
 
+    if (isHidden) {
+      return null;
+    }
     return (
       <SafeAreaView style={styles.safeArea} pointerEvents={"box-none"}>
         <FadeAnimation
           visible={!isNetworkConnected}
           duration={animationDuration}
+          onFinishedAnimate={this.onFinishedAnimate}
         >
           <View style={[styles.toastContainer, style]}>
             <Image