Move TabBar to functional component

Author: M-i-k-e-l

generatedTypes/components/tabController/FadedScrollView.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ViewProps, ScrollViewProps } from 'react-native';
+export declare type FadedScrollViewProps = ViewProps & ScrollViewProps & {
+    children?: React.ReactNode | React.ReactNode[];
+};
+declare const _default: React.ComponentClass<FadedScrollViewProps, any> | React.FunctionComponent<FadedScrollViewProps>;
+export default _default;

generatedTypes/components/tabController/TabBarItem.d.ts

@@ -43,6 +43,12 @@ export interface TabControllerItemProps {
      * Badge component props to display next the item label
      */
     badge?: BadgeProps;
+    /**
+     * maximun number of lines the label can break
+     */
+    /**
+     * whether the tab will have a divider on its right
+     */
     /**
      * A fixed width for the item
      */

src/components/tabController/FadedScrollView.tsx

@@ -0,0 +1,61 @@
+import React, {useCallback} from 'react';
+import {ViewProps, ScrollView, ScrollViewProps, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
+import Fader from '../../components/fader';
+import withScrollEnabler, {WithScrollEnablerProps} from '../../commons/withScrollEnabler';
+import withScrollReached, {WithScrollReachedProps} from '../../commons/withScrollReached';
+import forwardRef, {ForwardRefInjectedProps} from '../../commons/forwardRef';
+
+export type FadedScrollViewProps = ViewProps & ScrollViewProps & {
+  children?: React.ReactNode | React.ReactNode[];
+};
+
+type ScrollReachedProps = FadedScrollViewProps & WithScrollReachedProps;
+type ScrollEnabledProps = ScrollReachedProps & WithScrollEnablerProps;
+type Props = ScrollEnabledProps & ForwardRefInjectedProps;
+
+const FADER_SIZE = 76;
+
+const FadedScrollView = (props: Props) => {
+  const {scrollEnablerProps, scrollReachedProps, children, onScroll: propsOnScroll, ...other} = props;
+  const fadeLeft = scrollEnablerProps.scrollEnabled && !scrollReachedProps.isScrollAtStart;
+  const fadeRight = scrollEnablerProps.scrollEnabled && !scrollReachedProps.isScrollAtEnd;
+
+  const onScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      scrollReachedProps.onScroll(event);
+      propsOnScroll?.(event);
+    },
+    [scrollReachedProps.onScroll, propsOnScroll]
+  );
+
+  if (children) {
+    return (
+      <>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          scrollEventThrottle={16}
+          decelerationRate={'fast'}
+          {...other}
+          scrollEnabled={scrollEnablerProps.scrollEnabled}
+          onContentSizeChange={scrollEnablerProps.onContentSizeChange}
+          onLayout={scrollEnablerProps.onLayout}
+          onScroll={onScroll}
+          ref={props.forwardedRef}
+        >
+          {children}
+        </ScrollView>
+        <Fader visible={fadeLeft} position={Fader.position.LEFT} size={FADER_SIZE} />
+        <Fader visible={fadeRight} position={Fader.position.RIGHT} size={FADER_SIZE} />
+      </>
+    );
+  }
+
+  return null;
+};
+
+// TODO: fix withScrollEnabler props (add <>)
+export default withScrollReached<FadedScrollViewProps>(withScrollEnabler(forwardRef<Props>(FadedScrollView)), {
+  horizontal: true,
+  threshold: 50
+});