fix: memoize animated nodes to improve performance

Currently the animated nodes used for styles are re-created in render, which means that reanimated does a lot of expensive work detaching and reattaching them. Due to this, the framerate of the JS thread goes down to 0 FPS even on high-end devices when switching tabs quickly.

This PR implements memoization for the animated nodes so they are only recreated when necessary. On low-end devices, this keeps the JS frame rate around 12+ FPS on low-end devices and 40+ on high-end devices.

Related to #720

Author: satya164

src/Pager.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { StyleSheet, Keyboard, I18nManager } from 'react-native';
 import { PanGestureHandler, State } from 'react-native-gesture-handler';
 import Animated, { Easing } from 'react-native-reanimated';
+import memoize from './memoize';
 
 import type {
   Layout,
@@ -568,6 +569,25 @@ export default class Pager<T: Route> extends React.Component<Props<T>> {
     this._progress,
   ]);
 
+  _getTranslateX = memoize(
+    (
+      layoutWidth: number,
+      routesLength: number,
+      translateX: Animated.Node<number>
+    ) =>
+      multiply(
+        // Make sure that the translation doesn't exceed the bounds to prevent overscrolling
+        min(
+          max(
+            multiply(layoutWidth, sub(routesLength, 1), DIRECTION_RIGHT),
+            translateX
+          ),
+          0
+        ),
+        I18nManager.isRTL ? -1 : 1
+      )
+  );
+
   render() {
     const {
       layout,
@@ -577,17 +597,10 @@ export default class Pager<T: Route> extends React.Component<Props<T>> {
       removeClippedSubviews,
     } = this.props;
 
-    // Make sure that the translation doesn't exceed the bounds to prevent overscrolling
-    const translateX = min(
-      max(
-        multiply(
-          this._layoutWidth,
-          sub(this._routesLength, 1),
-          DIRECTION_RIGHT
-        ),
-        this._translateX
-      ),
-      0
+    const translateX = this._getTranslateX(
+      this._layoutWidth,
+      this._routesLength,
+      this._translateX
     );
 
     return children({
@@ -610,13 +623,7 @@ export default class Pager<T: Route> extends React.Component<Props<T>> {
               layout.width
                 ? {
                     width: layout.width * navigationState.routes.length,
-                    transform: [
-                      {
-                        translateX: I18nManager.isRTL
-                          ? multiply(translateX, -1)
-                          : translateX,
-                      },
-                    ],
+                    transform: [{ translateX }],
                   }
                 : null,
             ]}

src/TabBar.js

@@ -11,6 +11,8 @@ import type {
   ViewStyleProp,
   TextStyleProp,
 } from 'react-native/Libraries/StyleSheet/StyleSheet';
+
+import memoize from './memoize';
 import type {
   Route,
   Scene,
@@ -53,7 +55,6 @@ export type Props<T> = {|
 |};
 
 type State = {|
-  scrollAmount: Animated.Value,
   initialOffset: ?{| x: number, y: number |},
 |};
 
@@ -90,7 +91,6 @@ export default class TabBar<T: Route> extends React.Component<Props<T>, State> {
         : undefined;
 
     this.state = {
-      scrollAmount: new Animated.Value(0),
       initialOffset,
     };
   }
@@ -109,6 +109,8 @@ export default class TabBar<T: Route> extends React.Component<Props<T>, State> {
     }
   }
 
+  _scrollAmount = new Animated.Value(0);
+
   _scrollView: ?ScrollView;
   _isManualScroll: boolean = false;
   _isMomentumScroll: boolean = false;
@@ -209,6 +211,10 @@ export default class TabBar<T: Route> extends React.Component<Props<T>, State> {
     this._isManualScroll = false;
   };
 
+  _getTranslateX = memoize((scrollAmount: Animated.Node<number>) =>
+    Animated.multiply(scrollAmount, -1)
+  );
+
   render() {
     const {
       position,
@@ -239,7 +245,7 @@ export default class TabBar<T: Route> extends React.Component<Props<T>, State> {
     const { routes } = navigationState;
     const tabWidth = this._getTabWidth(this.props);
     const tabBarWidth = tabWidth * routes.length;
-    const translateX = Animated.multiply(this.state.scrollAmount, -1);
+    const translateX = this._getTranslateX(this._scrollAmount);
 
     return (
       <Animated.View style={[styles.tabBar, style]}>
@@ -282,7 +288,7 @@ export default class TabBar<T: Route> extends React.Component<Props<T>, State> {
               [
                 {
                   nativeEvent: {
-                    contentOffset: { x: this.state.scrollAmount },
+                    contentOffset: { x: this._scrollAmount },
                   },
                 },
               ],

src/TabBarIndicator.js

@@ -4,6 +4,8 @@ import * as React from 'react';
 import { StyleSheet, I18nManager } from 'react-native';
 import Animated from 'react-native-reanimated';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
+
+import memoize from './memoize';
 import type { Route, SceneRendererProps, NavigationState } from './types';
 
 export type Props<T> = {|
@@ -15,29 +17,38 @@ export type Props<T> = {|
 
 const { max, min, multiply } = Animated;
 
-export default function TabBarIndicator<T: Route>(props: Props<T>) {
-  const { width, position, navigationState, style } = props;
-  const { routes } = navigationState;
-
-  const translateX = multiply(
-    max(min(position, routes.length - 1), 0),
-    width * (I18nManager.isRTL ? -1 : 1)
+export default class TabBarIndicator<T: Route> extends React.Component<
+  Props<T>
+> {
+  _getTranslateX = memoize(
+    (position: Animated.Node<number>, routes: Route[], width: number) =>
+      multiply(
+        max(min(position, routes.length - 1), 0),
+        width * (I18nManager.isRTL ? -1 : 1)
+      )
   );
 
-  return (
-    <Animated.View
-      style={[
-        styles.indicator,
-        { width: `${100 / routes.length}%` },
-        // If layout is not available, use `left` property for positioning the indicator
-        // This avoids rendering delay until we are able to calculate translateX
-        width
-          ? { transform: [{ translateX }] }
-          : { left: `${(100 / routes.length) * navigationState.index}%` },
-        style,
-      ]}
-    />
-  );
+  render() {
+    const { width, position, navigationState, style } = this.props;
+    const { routes } = navigationState;
+
+    const translateX = this._getTranslateX(position, routes, width);
+
+    return (
+      <Animated.View
+        style={[
+          styles.indicator,
+          { width: `${100 / routes.length}%` },
+          // If layout is not available, use `left` property for positioning the indicator
+          // This avoids rendering delay until we are able to calculate translateX
+          width
+            ? { transform: [{ translateX }] }
+            : { left: `${(100 / routes.length) * navigationState.index}%` },
+          style,
+        ]}
+      />
+    );
+  }
 }
 
 const styles = StyleSheet.create({