improve TabController page performance

Author: ethanshar

src/incubator/TabController/TabPage.js

@@ -1,16 +1,16 @@
-import React, {Component} from 'react';
+import React, {PureComponent} from 'react';
 import {StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import Reanimated from 'react-native-reanimated';
 import TabBarContext from './TabBarContext';
 
-const {cond, and, call, block, eq} = Reanimated;
+const {Code, Value, cond, set, and, call, block, eq} = Reanimated;
 
 /**
-* @description: TabController's TabPage
-* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/TabControllerScreen/index.js
-*/
-export default class TabPage extends Component {
+ * @description: TabController's TabPage
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/TabControllerScreen/index.js
+ */
+export default class TabPage extends PureComponent {
   static displayName = 'TabController.TabPage';
 
   static contextType = TabBarContext;
@@ -34,6 +34,10 @@ export default class TabPage extends Component {
     loaded: !this.props.lazy,
   };
 
+  _opacity = new Value(0);
+  _zIndex = new Value(0);
+  _pageStyle = [styles.page, {opacity: this._opacity}, {zIndex: this._zIndex}];
+
   lazyLoad = () => {
     this.setState({
       loaded: true,
@@ -44,16 +48,22 @@ export default class TabPage extends Component {
     const {currentPage} = this.context;
     const {index, lazy, testID} = this.props;
     const {loaded} = this.state;
-    const opacity = block([
-      cond(and(eq(currentPage, index), lazy, !loaded), call([], this.lazyLoad)),
-      cond(eq(currentPage, index), 1, 0),
-    ]);
-
-    const zIndex = cond(eq(currentPage, index), 1, 0);
 
     return (
-      <Reanimated.View style={[styles.page, {opacity}, {zIndex}]} testID={testID}>
+      <Reanimated.View style={this._pageStyle} testID={testID}>
         {loaded && this.props.children}
+        <Code>
+          {() => {
+            return block([
+              cond(and(eq(currentPage, index), lazy, !loaded), call([], this.lazyLoad)),
+              cond(
+                eq(currentPage, index),
+                [set(this._opacity, 1), set(this._zIndex, 1)],
+                [set(this._opacity, 0), set(this._zIndex, 0)],
+              ),
+            ]);
+          }}
+        </Code>
       </Reanimated.View>
     );
   }

src/incubator/TabController/index.js

@@ -69,10 +69,6 @@ class TabController extends Component {
     this.setState({itemStates, ignoredItems});
   };
 
-  onChangeIndex = () => {
-    _.invoke(this.props, 'onChangeIndex', this.props);
-  };
-
   render() {
     const {itemStates, ignoredItems} = this.state;
     return (