Use react-freeze to optimize TabController pages

demo/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -119,7 +119,7 @@ class TabControllerScreen extends Component<{}, State> {
   }
 
   renderTabPages() {
-    const {asCarousel} = this.state;
+    const {asCarousel, fewItems} = this.state;
     const Container = asCarousel ? TabController.PageCarousel : View;
     const containerProps = asCarousel ? {} : {flex: true};
     return (
@@ -134,7 +134,7 @@ class TabControllerScreen extends Component<{}, State> {
           <Tab3/>
         </TabController.TabPage>
 
-        {_.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
+        {!fewItems && _.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
           return (
             <TabController.TabPage key={title} index={index + 3}>
               <View padding-s5>

demo/src/screens/componentScreens/TabControllerScreen/tab3.tsx

@@ -5,6 +5,7 @@ import {Card, Avatar, View, Text} from 'react-native-ui-lib';
 
 class Tab2 extends Component {
   state = {
+    counter: 0,
     loading: true
   };
 
@@ -13,7 +14,16 @@ class Tab2 extends Component {
       this.setState({loading: false});
     }, 1200);
 
-    // this.slow();
+    /* Uncomment to test TabPage freeze functionality when the page lose focus */
+    // setInterval(() => {
+    //   this.setState({counter: this.state.counter + 1});
+    // }, 1000);
+  }
+
+  componentDidUpdate() {
+    if (this.state.counter % 3 === 0) {
+      console.warn('freeze counter', this.state.counter);
+    }
   }
 
   slow(iterations = 10) {

package.json

@@ -52,6 +52,7 @@
     "memoize-one": "^5.0.5",
     "moment": "^2.24.0",
     "prop-types": "^15.5.10",
+    "react-freeze": "^1.0.0",
     "react-native-color": "0.0.10",
     "react-native-redash": "^12.0.3",
     "react-native-text-size": "4.0.0-rc.1",

src/components/tabController/TabPage.tsx

@@ -1,6 +1,7 @@
 import React, {PropsWithChildren, useCallback, useContext, useState, useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 import Reanimated, {useAnimatedStyle, useAnimatedReaction, runOnJS} from 'react-native-reanimated';
+import {Freeze} from 'react-freeze';
 import TabBarContext from './TabBarContext';
 
 export interface TabControllerPageProps {
@@ -37,8 +38,9 @@ export default function TabPage({
   renderLoading,
   ...props
 }: PropsWithChildren<TabControllerPageProps>) {
-  const {currentPage, targetPage, asCarousel, containerWidth} = useContext(TabBarContext);
+  const {currentPage, asCarousel, containerWidth} = useContext(TabBarContext);
   const [shouldLoad, setLoaded] = useState(!lazy);
+  const [focused, setFocused] = useState(false);
 
   const lazyLoad = useCallback(() => {
     if (lazy && !shouldLoad) {
@@ -47,13 +49,29 @@ export default function TabPage({
   }, [lazy, shouldLoad]);
 
   useAnimatedReaction(() => {
-    return targetPage.value === index;
+    return currentPage.value === index;
   },
-  isActive => {
+  (isActive, wasActive) => {
     if (isActive) {
       runOnJS(lazyLoad)();
+      runOnJS(setFocused)(true);
     }
-  });
+    if (wasActive) {
+      runOnJS(setFocused)(false);
+    }
+  },
+  [currentPage]);
+
+  /* Handle freeze for pages that near the active page (relevant for carousel page) */
+  useAnimatedReaction(() => {
+    return asCarousel && currentPage.value - 1 === index || currentPage.value + 1 === index;
+  },
+  (nearActive) => {
+    if (nearActive) {
+      runOnJS(setFocused)(true);
+    }
+  },
+  [currentPage]);
 
   const animatedPageStyle = useAnimatedStyle(() => {
     const isActive = Math.round(currentPage.value) === index;
@@ -70,7 +88,8 @@ export default function TabPage({
   return (
     <Reanimated.View style={style} testID={testID}>
       {!shouldLoad && renderLoading?.()}
-      {shouldLoad && props.children}
+      {/* {shouldLoad && props.children} */}
+      <Freeze freeze={!shouldLoad || !focused}>{props.children}</Freeze>
     </Reanimated.View>
   );
 }