fix lag and performance issues with TabController

Author: ethanshar

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

@@ -128,7 +128,7 @@ class TabControllerScreen extends Component {
           </TabController.TabBar>
           {this.renderTabPages()}
         </TabController>
-        <View absB left margin-20 marginB-100>
+        <View absB left margin-20 marginB-100 style={{zIndex: 1}}>
           <Button
             bg-grey20={!asCarousel}
             bg-green30={asCarousel}

package.json

@@ -49,7 +49,7 @@
     "prop-types": "^15.5.10",
     "react-native-animatable": "^1.1.0",
     "react-native-color": "0.0.10",
-    "react-native-redash": "^11.2.1",
+    "react-native-redash": "^12.0.3",
     "react-native-text-size": "4.0.0-rc.1",
     "semver": "^5.5.0",
     "url-parse": "^1.2.0"

src/components/tabController/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 import Reanimated, {Easing} from 'react-native-reanimated';
 import {State} from 'react-native-gesture-handler';
-import {timing, fract} from 'react-native-redash';
+import {timing, fract, between} from 'react-native-redash';
 import {Constants} from '../../helpers';
 import TabBarContext from './TabBarContext';
 import TabBar from './TabBar';
@@ -16,12 +16,16 @@ import PageCarousel from './PageCarousel';
 
 const {
   and,
+  abs,
   cond,
   call,
   Code,
   Clock,
   clockRunning,
+  diff,
   eq,
+  floor,
+  lessThan,
   neq,
   not,
   set,
@@ -52,10 +56,6 @@ class TabController extends Component {
      * callback for when index has change (will not be called on ignored items)
      */
     onChangeIndex: PropTypes.func,
-    // /**
-    //  * callback for when tab selected
-    //  */
-    // onTabSelected: PropTypes.func,
     /**
      * When using TabController.PageCarousel this should be turned on
      */
@@ -67,36 +67,22 @@ class TabController extends Component {
     activeOpacity: 0.2
   };
 
-  state = {
-    selectedIndex: this.props.selectedIndex,
-    itemStates: []
-  };
-
-  _targetPage = new Value(this.props.selectedIndex);
-  _currentPage = new Value(this.props.selectedIndex);
-  _carouselOffset = new Value(this.props.selectedIndex * Math.round(Constants.screenWidth));
-
-  shouldComponentUpdate(nextProps) {
-    if (nextProps.selectedIndex !== this.props.selectedIndex) {
-      return false;
-    }
-    return true;
-  }
-
-  getProviderContextValue = () => {
-    const {itemStates, selectedIndex} = this.state;
-    const {onChangeIndex, asCarousel} = this.props;
-    return {
-      selectedIndex,
-      currentPage: this._currentPage,
-      targetPage: this._targetPage,
-      carouselOffset: this._carouselOffset,
-      itemStates,
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selectedIndex: this.props.selectedIndex,
+      asCarousel: this.props.asCarousel,
+      itemStates: [],
+      // animated values
+      targetPage: new Value(this.props.selectedIndex),
+      currentPage: new Value(this.props.selectedIndex),
+      carouselOffset: new Value(this.props.selectedIndex * Math.round(Constants.screenWidth)),
+      // // callbacks
       registerTabItems: this.registerTabItems,
-      onChangeIndex,
-      asCarousel
+      onChangeIndex: this.props.onChangeIndex
     };
-  };
+  }
 
   registerTabItems = (tabItemsCount, ignoredItems) => {
     const itemStates = _.times(tabItemsCount, () => new Value(State.UNDETERMINED));
@@ -108,11 +94,13 @@ class TabController extends Component {
   };
 
   renderCodeBlock = () => {
-    const {itemStates, ignoredItems} = this.state;
+    const {itemStates, ignoredItems, currentPage, targetPage, carouselOffset} = this.state;
     const {selectedIndex} = this.props;
     const clock = new Clock();
     const fromPage = new Value(selectedIndex);
     const toPage = new Value(selectedIndex);
+    const isAnimating = new Value(0);
+    const isScrolling = new Value(0);
 
     return block([
       /* Page change by TabBar */
@@ -123,38 +111,48 @@ class TabController extends Component {
             cond(and(eq(state, State.END), !ignoredItem), [
               set(fromPage, toPage),
               set(toPage, index),
-              set(this._targetPage, index)
+              set(targetPage, index)
             ]))
         ];
       }),
 
-      cond(neq(this._currentPage, toPage),
-        set(this._currentPage,
-          timing({clock, from: fromPage, to: toPage, duration: 300, easing: Easing.bezier(0.34, 1.56, 0.64, 1)}))),
-
-      /* Page change by Carousel */
-      onChange(this._carouselOffset, [
-        cond(not(clockRunning(clock)), [
-          set(this._currentPage,
-            interpolate(round(this._carouselOffset), {
+      // Animate currentPage to its target
+      cond(neq(currentPage, toPage), [
+        set(isAnimating, 1),
+        set(currentPage,
+          timing({clock, from: fromPage, to: toPage, duration: 300, easing: Easing.bezier(0.34, 1.56, 0.64, 1)}))
+      ]),
+      // Set isAnimating flag off
+      cond(and(eq(isAnimating, 1), not(clockRunning(clock))), set(isAnimating, 0)),
+
+      /* Page change by Carousel scroll */
+      onChange(carouselOffset, [
+        set(isScrolling, lessThan(round(abs(diff(carouselOffset))), round(Constants.screenWidth))),
+        cond(and(not(isAnimating)), [
+          set(currentPage,
+            interpolate(round(carouselOffset), {
               inputRange: itemStates.map((v, i) => Math.round(i * Constants.screenWidth)),
               outputRange: itemStates.map((v, i) => i)
             })),
-          set(toPage, this._currentPage),
-          cond(eq(fract(this._currentPage), 0), set(this._targetPage, this._currentPage))
+          set(toPage, currentPage)
         ])
       ]),
+      // Update/Sync target page when scrolling is done
+      cond(and(eq(isScrolling, 1), eq(floor(abs(diff(carouselOffset))), 0)), [
+        set(isScrolling, 0),
+        cond(not(between(fract(currentPage), 0.1, 0.9, 1)), set(targetPage, round(currentPage)))
+      ]),
 
       /* Invoke index change */
-      onChange(toPage, call([toPage], this.onPageChange))
+      onChange(targetPage, call([targetPage], this.onPageChange))
     ]);
   };
 
   render() {
     const {itemStates} = this.state;
 
     return (
-      <TabBarContext.Provider value={this.getProviderContextValue()}>
+      <TabBarContext.Provider value={this.state}>
         {this.props.children}
         {!_.isEmpty(itemStates) && <Code>{this.renderCodeBlock}</Code>}
       </TabBarContext.Provider>