Add fade gradient to TabController.TabBar edges when scroll overflows

Author: ethanshar

src/components/scrollBar/ScrollBarGradient.js

@@ -0,0 +1,64 @@
+// TODO: use this component inside ScrollBar
+import React, {useRef, useEffect, useMemo} from 'react';
+import {Animated} from 'react-native';
+
+import {Colors} from '../../style';
+import {Constants} from '../../helpers';
+import View from '../view';
+import Image from '../image';
+
+const AnimatedImage = Animated.createAnimatedComponent(Image);
+
+const ScrollBarGradient = ({
+  visible,
+  left,
+  gradientWidth = 76,
+  gradientHeight,
+  gradientMargins = 0,
+  height,
+  gradientColor = Colors.white,
+  gradientImage = require('./assets/gradientOverlay.png'),
+}) => {
+  const gradientOpacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(gradientOpacity, {
+      toValue: Number(!!visible),
+      duration: 100,
+      useNativeDriver: true
+    }).start();
+  }, [visible]);
+
+  const imageTransform = useMemo(() => {
+    return Constants.isRTL ? (left ? undefined : [{scaleX: -1}]) : left ? [{scaleX: -1}] : undefined;
+  }, [left]);
+  
+  const heightToUse = gradientHeight || height || '100%';
+  return (
+    <View
+      animated
+      pointerEvents="none"
+      style={{
+        opacity: gradientOpacity,
+        width: gradientWidth,
+        height: heightToUse,
+        position: 'absolute',
+        right: !left ? gradientMargins : undefined,
+        left: left ? gradientMargins : undefined
+      }}
+    >
+      <AnimatedImage
+        source={gradientImage}
+        style={{
+          width: gradientWidth,
+          height: heightToUse,
+          tintColor: gradientColor,
+          transform: imageTransform
+        }}
+        resizeMode={'stretch'}
+      />
+    </View>
+  );
+};
+
+export default ScrollBarGradient;

src/components/tabController/TabBar.js

@@ -11,6 +11,7 @@ import TabBarItem from './TabBarItem';
 // import ReanimatedObject from './ReanimatedObject';
 import {asBaseComponent, forwardRef} from '../../commons';
 import View from '../../components/view';
+import ScrollBarGradient from '../scrollBar/ScrollBarGradient';
 import {Colors, Spacings, Typography} from '../../style';
 import {Constants} from '../../helpers';
 import {LogService} from '../../services';
@@ -270,11 +271,32 @@ class TabBar extends PureComponent {
   };
 
   onScroll = ({nativeEvent: {contentOffset}}) => {
+    const {fadeLeft, fadeRight} = this.state;
     this.tabBarScrollOffset = contentOffset.x;
+    const stateUpdate = {};
+    // TODO: extract this logic to scrollbar presenter or something
+    const leftThreshold = 50;
+    if (this.tabBarScrollOffset > leftThreshold && !fadeLeft) {
+      stateUpdate.fadeLeft = true;
+    } else if (this.tabBarScrollOffset <= leftThreshold && fadeLeft) {
+      stateUpdate.fadeLeft = false;
+    }
+    
+    const rightThreshold = (this.contentWidth - this.containerWidth);
+    if (this.tabBarScrollOffset < rightThreshold && !fadeRight) {
+      stateUpdate.fadeRight = true;
+    } else if (this.tabBarScrollOffset >= rightThreshold && fadeRight) {
+      stateUpdate.fadeRight = false;
+    }
+
+    if (!_.isEmpty(stateUpdate)) {
+      this.setState(stateUpdate);
+    }
   };
 
   onContentSizeChange = (width) => {
-    if (width > this.containerWidth) {
+    if (width > this.containerWidth && !this.contentWidth) {
+      this.contentWidth = width;
       this.setState({scrollEnabled: true});
     }
   };
@@ -375,7 +397,7 @@ class TabBar extends PureComponent {
 
   render() {
     const {height, enableShadow, containerStyle, testID} = this.props;
-    const {itemsWidths, scrollEnabled} = this.state;
+    const {itemsWidths, scrollEnabled, fadeLeft, fadeRight} = this.state;
     return (
       <View
         style={[styles.container, enableShadow && styles.containerShadow, {width: this.containerWidth}, containerStyle]}
@@ -400,6 +422,8 @@ class TabBar extends PureComponent {
           {this.renderSelectedIndicator()}
         </ScrollView>
         {_.size(itemsWidths) > 1 && <Code>{this.renderCodeBlock}</Code>}
+        <ScrollBarGradient left visible={fadeLeft}/>
+        <ScrollBarGradient visible={fadeRight}/>
       </View>
     );
   }