fix: try to improve the performance

This commit aims to throttle the events from reanimated to avoid overloading JS thread. It changes a few things:
- Due to the throttling, we cannot get the same scroll as you swipe effect on scrollable tab bar, which is probably better as this didn't work smoothly on lower end devices
- We now call onIndexChange as soon as you lift your finger rather than waiting for the animation to finish, which seems to work okay except a lag on Android
- Due to throttling, empty page for lazy loaded tabs is more pronounched, but this can be work around by providing a placeholder component

Closes #700, #716

Author: satya164

src/Pager.js

@@ -55,6 +55,7 @@ const {
   greaterThan,
   max,
   min,
+  modulo,
   multiply,
   neq,
   or,
@@ -93,6 +94,8 @@ const TIMING_CONFIG = {
   easing: Easing.out(Easing.cubic),
 };
 
+const THROTTLE_FACTOR = 16;
+
 export default class Pager<T: Route> extends React.Component<Props<T>> {
   static defaultProps = {
     swipeVelocityThreshold: 1200,
@@ -203,6 +206,8 @@ export default class Pager<T: Route> extends React.Component<Props<T>> {
   _gestureState = new Value(State.UNDETERMINED);
   _offsetX = new Value(0);
 
+  _throttler = new Animated.Value(0);
+
   // Current position of the page (translateX value)
   _position = new Value(
     // Initial value is based on the index and page width
@@ -406,20 +411,6 @@ export default class Pager<T: Route> extends React.Component<Props<T>> {
         set(this._velocityX, 0),
         // When the animation finishes, stop the clock
         stopClock(this._clock),
-        call([this._index], ([value]) => {
-          // If the index changed, and previous animation has finished, update state
-          this.props.onIndexChange(value);
-
-          // Without this check, the pager can go to an infinite update <-> animate loop for sync updates
-          if (value !== this.props.navigationState.index) {
-            this._pendingIndexValue = value;
-
-            // Force componentDidUpdate to fire, whether user does a setState or not
-            // This allows us to detect when the user drops the update and revert back
-            // It's necessary to make sure that the state stays in sync
-            this.forceUpdate();
-          }
-        }),
       ]),
     ]);
   };
@@ -435,18 +426,37 @@ export default class Pager<T: Route> extends React.Component<Props<T>> {
   ]);
 
   _translateX = block([
-    call([this._index], ([value]) => {
-      this._currentIndexValue = value;
-    }),
+    onChange(
+      this._index,
+      call([this._index], ([value]) => {
+        this._currentIndexValue = value;
+
+        // Without this check, the pager can go to an infinite update <-> animate loop for sync updates
+        if (value !== this.props.navigationState.index) {
+          // If the index changed, and previous animation has finished, update state
+          this.props.onIndexChange(value);
+
+          this._pendingIndexValue = value;
+
+          // Force componentDidUpdate to fire, whether user does a setState or not
+          // This allows us to detect when the user drops the update and revert back
+          // It's necessary to make sure that the state stays in sync
+          this.forceUpdate();
+        }
+      })
+    ),
     // Conditionally listen for changes in the position value
     // The position value can changes a lot in short time
     // So we only add a listener when necessary to avoid extra overhead
     cond(
       this._isListening,
-      onChange(
-        this._position,
-        call([this._position], this._handlePositionChange)
-      )
+      onChange(this._position, [
+        cond(
+          eq(this._throttler, 0),
+          call([this._position], this._handlePositionChange)
+        ),
+        set(this._throttler, modulo(add(this._throttler, 1), THROTTLE_FACTOR)),
+      ])
     ),
     onChange(
       this._isSwiping,

src/TabBar.js

@@ -95,12 +95,6 @@ export default class TabBar<T: Route> extends React.Component<Props<T>, State> {
     };
   }
 
-  componentDidMount() {
-    if (this.props.scrollEnabled) {
-      this.props.addListener('position', this._adjustScroll);
-    }
-  }
-
   componentDidUpdate(prevProps: Props<T>) {
     if (
       prevProps.navigationState.routes.length !==
@@ -113,18 +107,6 @@ export default class TabBar<T: Route> extends React.Component<Props<T>, State> {
     ) {
       this._resetScroll(this.props.navigationState.index);
     }
-
-    if (prevProps.scrollEnabled !== this.props.scrollEnabled) {
-      if (this.props.scrollEnabled) {
-        this.props.addListener('position', this._adjustScroll);
-      } else {
-        this.props.removeListener('position', this._adjustScroll);
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.removeListener('position', this._adjustScroll);
   }
 
   _scrollView: ?ScrollView;
@@ -184,21 +166,6 @@ export default class TabBar<T: Route> extends React.Component<Props<T>, State> {
     return this._normalizeScrollValue(props, scrollAmount);
   };
 
-  _adjustScroll = (value: number) => {
-    if (this.props.scrollEnabled) {
-      cancelAnimationFrame(this._scrollResetCallback);
-
-      this._scrollView &&
-        this._scrollView.scrollTo({
-          x: this._normalizeScrollValue(
-            this.props,
-            this._getScrollAmount(this.props, value)
-          ),
-          animated: false,
-        });
-    }
-  };
-
   _resetScroll = (value: number, animated = true) => {
     if (this.props.scrollEnabled) {
       cancelAnimationFrame(this._scrollResetCallback);