TabController - allow sending faderProps (#2008)

Author: M-i-k-e-l

src/components/tabController/TabBar.tsx

@@ -9,7 +9,7 @@ import {Constants, asBaseComponent, forwardRef, BaseComponentInjectedProps, Forw
 import View from '../view';
 import {Colors, Spacings, Typography} from '../../style';
 import FadedScrollView from '../fadedScrollView';
-
+import {FaderProps} from '../fader';
 import useScrollToItem from './useScrollToItem';
 import {orientations} from '../../commons/Constants';
 import {useDidUpdate} from 'hooks';
@@ -27,6 +27,8 @@ const DEFAULT_SELECTED_LABEL_STYLE = {
   letterSpacing: 0
 };
 
+const DEFAULT_FADER_PROPS = {size: 76, tintColor: Colors.$backgroundElevated};
+
 export interface TabControllerBarProps {
   /**
    * The list of tab bar items
@@ -85,6 +87,10 @@ export interface TabControllerBarProps {
    * The TabBar background Color
    */
   backgroundColor?: string;
+  /**
+   * Props for the start \ end faders
+   */
+  faderProps?: Pick<FaderProps, 'size' | 'tintColor'>;
   /**
    * The TabBar container width
    */
@@ -121,8 +127,6 @@ interface Props extends TabControllerBarProps, BaseComponentInjectedProps, Forwa
   children?: ChildProps[] | ChildProps;
 }
 
-const FADER_PROPS = {size: 76, tintColor: Colors.$backgroundElevated};
-
 /**
  * @description: TabController's TabBar component
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
@@ -143,6 +147,7 @@ const TabBar = (props: Props) => {
     selectedIconColor,
     activeBackgroundColor,
     backgroundColor,
+    faderProps,
     containerWidth: propsContainerWidth,
     centerSelected,
     spreadItems,
@@ -292,9 +297,9 @@ const TabBar = (props: Props) => {
         horizontal
         showsHorizontalScrollIndicator={false}
         showStartFader
-        startFaderProps={FADER_PROPS}
+        startFaderProps={faderProps}
         showEndFader
-        endFaderProps={FADER_PROPS}
+        endFaderProps={faderProps}
         contentContainerStyle={scrollViewContainerStyle}
         testID={testID}
         onContentSizeChange={onContentSizeChange}
@@ -314,6 +319,7 @@ TabBar.defaultProps = {
   labelStyle: DEFAULT_LABEL_STYLE,
   selectedLabelStyle: DEFAULT_SELECTED_LABEL_STYLE,
   backgroundColor: DEFAULT_BACKGROUND_COLOR,
+  faderProps: DEFAULT_FADER_PROPS,
   spreadItems: true
 };