Infra/generify faded scroll view

generatedTypes/src/components/fadedScrollView/index.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ScrollViewProps } from 'react-native';
+import { FaderProps } from '../fader';
+export declare type FadedScrollViewProps = ScrollViewProps & {
+    /**
+     * Show a fader at the start of the scroll
+     */
+    showStartFader?: boolean;
+    /**
+     * Additional props for the start fader
+     */
+    startFaderProps?: Omit<FaderProps, 'visible' | 'position'>;
+    /**
+     * Show a fader at the end of the scroll
+     */
+    showEndFader?: boolean;
+    /**
+     * Additional props for the end fader
+     */
+    endFaderProps?: Omit<FaderProps, 'visible' | 'position'>;
+    /**
+     * Use the react-native-gesture-handler version, useful when using react-native-reanimated
+     */
+    useGesture?: boolean;
+    children?: React.ReactNode | React.ReactNode[];
+};
+interface Statics {
+    scrollTo(y?: number | {
+        x?: number | undefined;
+        y?: number | undefined;
+        animated?: boolean | undefined;
+    }, x?: number, animated?: boolean): void;
+    isScrollEnabled: () => boolean;
+}
+declare const _default: React.ComponentType<FadedScrollViewProps> & Statics;
+export default _default;

src/components/fadedScrollView/index.tsx

@@ -0,0 +1,142 @@
+import React, {useCallback, useImperativeHandle} from 'react';
+import {
+  ScrollView as RNScrollView,
+  ScrollViewProps,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+  LayoutChangeEvent
+} from 'react-native';
+import Fader, {FaderProps} from '../fader';
+import useScrollEnabler from '../../hooks/useScrollEnabler';
+import useScrollReached from '../../hooks/useScrollReached';
+import {forwardRef, ForwardRefInjectedProps} from '../../commons/new';
+import {ScrollView as GestureScrollView} from 'react-native-gesture-handler';
+
+export type FadedScrollViewProps = ScrollViewProps & {
+  /**
+   * Show a fader at the start of the scroll
+   */
+  showStartFader?: boolean;
+  /**
+   * Additional props for the start fader
+   */
+  startFaderProps?: Omit<FaderProps, 'visible' | 'position'>;
+  /**
+   * Show a fader at the end of the scroll
+   */
+  showEndFader?: boolean;
+  /**
+   * Additional props for the end fader
+   */
+  endFaderProps?: Omit<FaderProps, 'visible' | 'position'>;
+  /**
+   * Use the react-native-gesture-handler version, useful when using react-native-reanimated
+   */
+  useGesture?: boolean;
+  children?: React.ReactNode | React.ReactNode[];
+};
+
+type Props = FadedScrollViewProps & ForwardRefInjectedProps;
+interface Statics {
+  scrollTo(
+    y?: number | {x?: number | undefined; y?: number | undefined; animated?: boolean | undefined},
+    x?: number,
+    animated?: boolean
+  ): void;
+  isScrollEnabled: () => boolean;
+}
+
+const FadedScrollView = (props: Props) => {
+  const {
+    children,
+    onScroll: propsOnScroll,
+    onContentSizeChange: propsOnContentSizeChange,
+    onLayout: propsOnLayout,
+    horizontal: propsHorizontal,
+    showStartFader,
+    startFaderProps,
+    showEndFader,
+    endFaderProps,
+    useGesture,
+    ...others
+  } = props;
+  const ScrollView = useGesture ? GestureScrollView : RNScrollView;
+  const scrollViewRef = React.createRef<typeof ScrollView>();
+  const horizontal = propsHorizontal ?? false;
+  const {onContentSizeChange, onLayout, scrollEnabled} = useScrollEnabler({horizontal});
+  const {
+    onScroll: onScrollReached,
+    isScrollAtStart,
+    isScrollAtEnd
+  } = useScrollReached({
+    horizontal,
+    threshold: 50
+  });
+
+  const showStart = (showStartFader && scrollEnabled && !isScrollAtStart) ?? false;
+  const showEnd = (showEndFader && scrollEnabled && !isScrollAtEnd) ?? false;
+
+  const onScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    onScrollReached(event);
+    propsOnScroll?.(event);
+  },
+  [onScrollReached, propsOnScroll]);
+
+  const _onContentSizeChange = useCallback((w: number, h: number) => {
+    propsOnContentSizeChange?.(w, h);
+    onContentSizeChange?.(w, h);
+  },
+  [propsOnContentSizeChange, onContentSizeChange]);
+
+  const _onLayout = useCallback((event: LayoutChangeEvent) => {
+    propsOnLayout?.(event);
+    onLayout?.(event);
+  },
+  [propsOnLayout, onLayout]);
+
+  const isScrollEnabled = () => {
+    return scrollEnabled;
+  };
+
+  useImperativeHandle(props.forwardedRef, () => ({
+    // @ts-expect-error
+    scrollTo: (...data: any) => scrollViewRef.current?.scrollTo?.(...data),
+    isScrollEnabled
+  }));
+
+  if (children) {
+    return (
+      <>
+        <ScrollView
+          scrollEventThrottle={16}
+          decelerationRate={'fast'}
+          {...others}
+          horizontal={horizontal}
+          scrollEnabled={scrollEnabled}
+          onContentSizeChange={_onContentSizeChange}
+          onLayout={_onLayout}
+          onScroll={onScroll}
+          ref={scrollViewRef}
+        >
+          {children}
+        </ScrollView>
+        <Fader
+          visible={showStart}
+          position={horizontal ? Fader.position.START : Fader.position.TOP}
+          {...startFaderProps}
+        />
+        <Fader
+          visible={showEnd}
+          position={horizontal ? Fader.position.END : Fader.position.BOTTOM}
+          {...endFaderProps}
+        />
+      </>
+    );
+  }
+
+  return null;
+};
+
+FadedScrollView.displayName = 'IGNORE';
+// @ts-expect-error
+export default forwardRef<FadedScrollViewProps, Statics>(FadedScrollView);

src/components/tabController/TabBar.tsx

@@ -8,7 +8,7 @@ import TabBarItem, {TabControllerItemProps} from './TabBarItem';
 import {Constants, asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../../commons/new';
 import View from '../view';
 import {Colors, Spacings, Typography} from '../../style';
-import FadedScrollView from './FadedScrollView';
+import FadedScrollView from '../fadedScrollView';
 
 import useScrollToItem from './useScrollToItem';
 import {orientations} from '../../commons/Constants';
@@ -117,6 +117,8 @@ interface Props extends TabControllerBarProps, BaseComponentInjectedProps, Forwa
   children?: ChildProps[] | ChildProps;
 }
 
+const FADER_PROPS = {size: 76};
+
 /**
  * @description: TabController's TabBar component
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
@@ -260,7 +262,6 @@ const TabBar = (props: Props) => {
   }, [containerWidth]);
 
   useDidUpdate(() => {
-    // @ts-expect-error TODO: fix forwardRef Statics
     if (tabBar.current?.isScrollEnabled()) {
       focusIndex(currentPage.value);
     } else {
@@ -275,6 +276,11 @@ const TabBar = (props: Props) => {
         // @ts-expect-error
         ref={tabBar}
         horizontal
+        showsHorizontalScrollIndicator={false}
+        showStartFader
+        startFaderProps={FADER_PROPS}
+        showEndFader
+        endFaderProps={FADER_PROPS}
         contentContainerStyle={scrollViewContainerStyle}
         testID={testID}
         onContentSizeChange={onContentSizeChange}