fix: clean up animation frames (#1035)

Author: evantrimboli

src/TabBar.tsx

@@ -67,6 +67,15 @@ type State = {
   tabWidths: { [key: string]: number };
 };
 
+type MabyeAnimFrame = number | null;
+
+const cancelAnimFrame = (id: MabyeAnimFrame) => {
+  if (id !== null) {
+    cancelAnimationFrame(id);
+  }
+  return null;
+};
+
 export default class TabBar<T extends Route> extends React.Component<
   Props<T>,
   State
@@ -121,6 +130,13 @@ export default class TabBar<T extends Route> extends React.Component<
     }
   }
 
+  componentWillUnmount() {
+    this.cancelAnimFrames();
+  }
+
+  private animFrame1: MabyeAnimFrame = null;
+  private animFrame2: MabyeAnimFrame = null;
+
   // to store the layout.width of each tab
   // when all onLayout's are fired, this would be set in state
   private measuredTabWidths: { [key: string]: number } = {};
@@ -129,6 +145,11 @@ export default class TabBar<T extends Route> extends React.Component<
 
   private scrollView: ScrollView | undefined;
 
+  private cancelAnimFrames = () => {
+    this.animFrame1 = cancelAnimFrame(this.animFrame1);
+    this.animFrame2 = cancelAnimFrame(this.animFrame2);
+  };
+
   private getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {
     const tabStyle = StyleSheet.flatten(style);
 
@@ -277,16 +298,19 @@ export default class TabBar<T extends Route> extends React.Component<
     // If we don't delay this state update, the UI gets stuck in weird state
     // Maybe an issue in Reanimated?
     // https://github.com/react-native-community/react-native-tab-view/issues/877
-    requestAnimationFrame(() =>
-      requestAnimationFrame(() =>
+    // Once the above issue is resolved with the nested anim frames this becomes a lot simpler.
+    // Cancel all pending animations here, since we're going to start 2 new ones shortly.
+    this.cancelAnimFrames();
+    this.animFrame1 = requestAnimationFrame(() => {
+      this.animFrame2 = requestAnimationFrame(() => {
         this.setState({
           layout: {
             height,
             width,
           },
-        })
-      )
-    );
+        });
+      });
+    });
   };
 
   private getTranslateX = memoize(