feat: save memory usage for inactive routes in bottom navigation

Author: satya164

src/components/BottomNavigation.js

@@ -168,6 +168,12 @@ type State = {
    * The amount of horizontal shift for each tab item.
    */
   shifts: Animated.Value[],
+  /**
+   * The top offset for each tab item to position it offscreen.
+   * Placing items offscreen helps to save memory usage for inactive screens with removeClippedSubviews.
+   * We use animated values for this to prevent unnecesary re-renders.
+   */
+  offsets: Animated.Value[],
   /**
    * Index of the currently active tab. Used for setting the background color.
    * Use don't use the color as an animated value directly, because `setValue` seems to be buggy with colors.
@@ -206,6 +212,7 @@ const MAX_TAB_WIDTH = 168;
 const BAR_HEIGHT = 56;
 const ACTIVE_LABEL_SIZE = 14;
 const INACTIVE_LABEL_SIZE = 12;
+const FAR_FAR_AWAY = 9999;
 
 const calculateShift = (activeIndex, currentIndex, numberOfItems) => {
   if (activeIndex < currentIndex) {
@@ -311,10 +318,15 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
         prevState.shifts[i] ||
         new Animated.Value(calculateShift(index, i, routes.length))
     );
+    const offsets = routes.map(
+      // offscreen === 1, normal === 0
+      (_, i) => prevState.offsets[i] || new Animated.Value(i === index ? 0 : 1)
+    );
 
     const nextState = {
       tabs,
       shifts,
+      offsets,
     };
 
     if (index !== prevState.current) {
@@ -341,6 +353,7 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
     this.state = {
       tabs: [],
       shifts: [],
+      offsets: [],
       index: new Animated.Value(index),
       ripple: new Animated.Value(MIN_RIPPLE_SCALE),
       touch: new Animated.Value(MIN_RIPPLE_SCALE),
@@ -358,6 +371,13 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
 
     const { routes, index } = this.props.navigationState;
 
+    // Reset offsets of previous and current tabs before animation
+    this.state.offsets.forEach((offset, i) => {
+      if (i === index || i === prevProps.navigationState.index) {
+        offset.setValue(0);
+      }
+    });
+
     // Reset the ripple to avoid glitch if it's currently animating
     this.state.ripple.setValue(MIN_RIPPLE_SCALE);
 
@@ -387,13 +407,25 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
           ),
         ]),
       ]),
-    ]).start(() => {
+    ]).start(({ finished }) => {
       // Workaround a bug in native animations where this is reset after first animation
       this.state.tabs.map((tab, i) => tab.setValue(i === index ? 1 : 0));
 
       // Update the index to change bar's bacground color and then hide the ripple
       this.state.index.setValue(index);
       this.state.ripple.setValue(MIN_RIPPLE_SCALE);
+
+      if (finished) {
+        // Position all inactive screens offscreen to save memory usage
+        // Only do it when animation has finished to avoid glitches mid-transition if switching fast
+        this.state.offsets.forEach((offset, i) => {
+          if (i === index) {
+            offset.setValue(0);
+          } else {
+            offset.setValue(1);
+          }
+        });
+      }
     });
   }
 
@@ -522,6 +554,11 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
                 })
               : 0;
 
+            const top = this.state.offsets[index].interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, FAR_FAR_AWAY],
+            });
+
             return (
               <Animated.View
                 key={route.key}
@@ -532,11 +569,19 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
                   StyleSheet.absoluteFill,
                   { opacity, transform: [{ translateY }] },
                 ]}
+                collapsable={false}
+                removeClippedSubviews={
+                  // On iOS, set removeClippedSubviews to true only when not focused
+                  // This is an workaround for a bug where the clipped view never re-appears
+                  Platform.OS === 'ios' ? navigationState.index !== index : true
+                }
               >
-                {renderScene({
-                  route,
-                  jumpTo: this._jumpTo,
-                })}
+                <Animated.View style={[styles.content, { top }]}>
+                  {renderScene({
+                    route,
+                    jumpTo: this._jumpTo,
+                  })}
+                </Animated.View>
               </Animated.View>
             );
           })}

src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap

@@ -26,8 +26,9 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
     }
   >
     <View
-      collapsable={undefined}
+      collapsable={false}
       pointerEvents="auto"
+      removeClippedSubviews={false}
       style={
         Object {
           "bottom": 0,
@@ -44,7 +45,17 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
         }
       }
     >
-      Route: 0
+      <View
+        collapsable={undefined}
+        style={
+          Object {
+            "flex": 1,
+            "top": 0,
+          }
+        }
+      >
+        Route: 0
+      </View>
     </View>
   </View>
   <View
@@ -560,8 +571,9 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
     }
   >
     <View
-      collapsable={undefined}
+      collapsable={false}
       pointerEvents="auto"
+      removeClippedSubviews={false}
       style={
         Object {
           "bottom": 0,
@@ -578,7 +590,17 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
         }
       }
     >
-      Route: 0
+      <View
+        collapsable={undefined}
+        style={
+          Object {
+            "flex": 1,
+            "top": 0,
+          }
+        }
+      >
+        Route: 0
+      </View>
     </View>
   </View>
   <View
@@ -1211,8 +1233,9 @@ exports[`renders non-shifting bottom navigation 1`] = `
     }
   >
     <View
-      collapsable={undefined}
+      collapsable={false}
       pointerEvents="auto"
+      removeClippedSubviews={false}
       style={
         Object {
           "bottom": 0,
@@ -1229,7 +1252,17 @@ exports[`renders non-shifting bottom navigation 1`] = `
         }
       }
     >
-      Route: 0
+      <View
+        collapsable={undefined}
+        style={
+          Object {
+            "flex": 1,
+            "top": 0,
+          }
+        }
+      >
+        Route: 0
+      </View>
     </View>
   </View>
   <View
@@ -2093,8 +2126,9 @@ exports[`renders shifting bottom navigation 1`] = `
     }
   >
     <View
-      collapsable={undefined}
+      collapsable={false}
       pointerEvents="auto"
+      removeClippedSubviews={false}
       style={
         Object {
           "bottom": 0,
@@ -2111,7 +2145,17 @@ exports[`renders shifting bottom navigation 1`] = `
         }
       }
     >
-      Route: 0
+      <View
+        collapsable={undefined}
+        style={
+          Object {
+            "flex": 1,
+            "top": 0,
+          }
+        }
+      >
+        Route: 0
+      </View>
     </View>
   </View>
   <View