react-native-collapsible-header-tab-view 1.0.0 → 1.0.2

package/README.md

@@ -22,6 +22,7 @@ yarn add react-native-collapsible-header-tab-view
 
 ### 依赖
 
+本库依赖 react-native-pager-view, 确保您项目安装正确版本的pagerView
 ```bash
 npm install react-native-pager-view
 ```
@@ -40,13 +41,11 @@ export function App() {
       renderTabBar={(props) => <TabBarComponent {...props} />}
     >
       <TabFlatList
-        index={0}
         data={data1}
         renderItem={({ item }) => <ItemComponent item={item} />}
         keyExtractor={(item) => item.id}
       />
       <TabFlatList
-        index={1}
         data={data2}
         renderItem={({ item }) => <ItemComponent item={item} />}
         keyExtractor={(item) => item.id}

package/dist/TabFlatList.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FlatList, FlatListProps, NativeScrollEvent, NativeSyntheticEvent } from "react-native";
+export type TabFlatListProps<T> = Omit<FlatListProps<T>, "onScroll"> & {
+    onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+};
+export declare const TabFlatList: <T>(props: TabFlatListProps<T> & {
+    ref?: React.Ref<FlatList<T>>;
+}) => React.ReactElement;
+//# sourceMappingURL=TabFlatList.d.ts.map

package/dist/TabFlatList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabFlatList.d.ts","sourceRoot":"","sources":["../../src/TabFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,QAAQ,EACR,aAAa,EAEb,iBAAiB,EACjB,oBAAoB,EAErB,MAAM,cAAc,CAAC;AAUtB,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,CAAC;AAkGF,eAAO,MAAM,WAAW,EAAmC,CAAC,CAAC,EAC3D,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC1D,KAAK,CAAC,YAAY,CAAC"}

package/dist/TabScrollView.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { NativeScrollEvent, NativeSyntheticEvent, ScrollView, ScrollViewProps } from "react-native";
+export type TabScrollViewProps = Omit<ScrollViewProps, "onScroll"> & {
+    onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+};
+declare const TabScrollView: React.ForwardRefExoticComponent<Omit<ScrollViewProps, "onScroll"> & {
+    onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+} & React.RefAttributes<ScrollView>>;
+export { TabScrollView };
+//# sourceMappingURL=TabScrollView.d.ts.map

package/dist/TabScrollView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabScrollView.d.ts","sourceRoot":"","sources":["../../src/TabScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAA;AACd,OAAO,EAGL,iBAAiB,EACjB,oBAAoB,EACpB,UAAU,EACV,eAAe,EAChB,MAAM,cAAc,CAAA;AAIrB,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IACnE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CAChE,CAAA;AAED,QAAA,MAAM,aAAa;eAHN,CAAC,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI;oCA+DhE,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/context.d.ts

@@ -0,0 +1,6 @@
+import { CollapsibleContextValue } from "./types";
+export declare const CollapsibleContext: import("react").Context<CollapsibleContextValue | null>;
+export declare const TabIndexContext: import("react").Context<number>;
+export declare const useCollapsible: () => CollapsibleContextValue;
+export declare const useTabIndex: () => number;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAEjD,eAAO,MAAM,kBAAkB,yDAAsD,CAAA;AAErF,eAAO,MAAM,eAAe,iCAA2B,CAAA;AAEvD,eAAO,MAAM,cAAc,+BAM1B,CAAA;AAED,eAAO,MAAM,WAAW,cAAoC,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { CollapsibleTabViewProps, CollapsibleTabViewRef } from "./types";
+export { TabFlatList } from "./TabFlatList";
+export { TabScrollView } from "./TabScrollView";
+export type { CollapsibleTabViewProps, CollapsibleTabViewRef, TabBarProps, } from "./types";
+declare const CollapsibleTabView: React.ForwardRefExoticComponent<CollapsibleTabViewProps & React.RefAttributes<CollapsibleTabViewRef>>;
+export default CollapsibleTabView;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAaf,OAAO,EAEL,uBAAuB,EACvB,qBAAqB,EAEtB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,qBAAqB,EACrB,WAAW,GACZ,MAAM,SAAS,CAAC;AAEjB,QAAA,MAAM,kBAAkB,uGAySvB,CAAC;AAwBF,eAAe,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,446 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  TabFlatList: () => TabFlatList,
+  TabScrollView: () => TabScrollView,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_react4 = __toESM(require("react"));
+var import_react_native3 = require("react-native");
+var import_react_native_pager_view = __toESM(require("react-native-pager-view"));
+
+// src/context.ts
+var import_react = require("react");
+var CollapsibleContext = (0, import_react.createContext)(null);
+var TabIndexContext = (0, import_react.createContext)(0);
+var useCollapsible = () => {
+  const ctx = (0, import_react.useContext)(CollapsibleContext);
+  if (!ctx) {
+    throw new Error("useCollapsible must be used within CollapsibleTabView");
+  }
+  return ctx;
+};
+var useTabIndex = () => (0, import_react.useContext)(TabIndexContext);
+
+// src/TabFlatList.tsx
+var import_react2 = __toESM(require("react"));
+var import_react_native = require("react-native");
+var AnimatedFlatListComponent = import_react_native.Animated.createAnimatedComponent(import_react_native.FlatList);
+var AnimatedFlatList = AnimatedFlatListComponent;
+var TabFlatListInner = ({
+  contentContainerStyle,
+  onScroll,
+  ListHeaderComponent,
+  ...props
+}, ref) => {
+  const index = useTabIndex();
+  const {
+    scrollY,
+    activeIndex,
+    stickyEnabled,
+    headerHeight,
+    tabBarHeight,
+    renderHeader,
+    renderTabBar,
+    registerRef,
+    syncScrollY
+  } = useCollapsible();
+  const innerRef = (0, import_react2.useRef)(null);
+  const isActive = activeIndex === index;
+  (0, import_react2.useEffect)(() => {
+    registerRef(index, innerRef.current);
+    return () => registerRef(index, null);
+  }, [index]);
+  (0, import_react2.useImperativeHandle)(ref, () => innerRef.current, []);
+  const handleScroll = (0, import_react2.useCallback)(
+    (e) => {
+      const y = e.nativeEvent.contentOffset.y;
+      syncScrollY(index, y);
+      onScroll?.(e);
+    },
+    [index, onScroll, syncScrollY]
+  );
+  const mergedHeader = (0, import_react2.useMemo)(() => {
+    if (stickyEnabled) return ListHeaderComponent;
+    const OriginalHeader = typeof ListHeaderComponent === "function" ? /* @__PURE__ */ import_react2.default.createElement(ListHeaderComponent, null) : ListHeaderComponent ?? null;
+    return /* @__PURE__ */ import_react2.default.createElement(import_react_native.View, null, renderHeader?.(), renderTabBar?.(), OriginalHeader);
+  }, [stickyEnabled, ListHeaderComponent, renderHeader, renderTabBar]);
+  const paddingTop = stickyEnabled ? headerHeight + tabBarHeight : 0;
+  const collapseRange = stickyEnabled ? headerHeight : 0;
+  const [containerHeight, setContainerHeight] = (0, import_react2.useState)(0);
+  const handleLayout = (0, import_react2.useCallback)((e) => {
+    setContainerHeight(e.nativeEvent.layout.height);
+  }, []);
+  const minHeight = containerHeight > 0 ? containerHeight + collapseRange : 0;
+  return /* @__PURE__ */ import_react2.default.createElement(
+    AnimatedFlatList,
+    {
+      ...props,
+      ref: innerRef,
+      onLayout: handleLayout,
+      ListHeaderComponent: mergedHeader,
+      contentContainerStyle: [
+        paddingTop > 0 && { paddingTop },
+        minHeight > 0 && { minHeight },
+        contentContainerStyle
+      ],
+      onScroll: isActive && stickyEnabled ? import_react_native.Animated.event(
+        [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+        {
+          useNativeDriver: true,
+          listener: handleScroll
+        }
+      ) : handleScroll,
+      scrollEventThrottle: 16,
+      showsVerticalScrollIndicator: false
+    }
+  );
+};
+var TabFlatList = (0, import_react2.forwardRef)(TabFlatListInner);
+
+// src/TabScrollView.tsx
+var import_react3 = __toESM(require("react"));
+var import_react_native2 = require("react-native");
+var TabScrollView = (0, import_react3.forwardRef)(
+  ({ contentContainerStyle, onScroll, children, ...props }, ref) => {
+    const index = useTabIndex();
+    const { scrollY, activeIndex, headerHeight, tabBarHeight, registerRef, syncScrollY } = useCollapsible();
+    const innerRef = (0, import_react3.useRef)(null);
+    const isActive = activeIndex === index;
+    (0, import_react3.useEffect)(() => {
+      registerRef(index, innerRef.current);
+      return () => registerRef(index, null);
+    }, [index]);
+    (0, import_react3.useImperativeHandle)(ref, () => innerRef.current, []);
+    const handleScroll = (0, import_react3.useCallback)(
+      (e) => {
+        const y = e.nativeEvent.contentOffset.y;
+        syncScrollY(index, y);
+        onScroll?.(e);
+      },
+      [index, onScroll, syncScrollY]
+    );
+    const paddingTop = headerHeight + tabBarHeight;
+    const collapseRange = headerHeight;
+    const [containerHeight, setContainerHeight] = (0, import_react3.useState)(0);
+    const handleLayout = (0, import_react3.useCallback)((e) => {
+      setContainerHeight(e.nativeEvent.layout.height);
+    }, []);
+    const minHeight = containerHeight > 0 ? containerHeight + collapseRange : 0;
+    return /* @__PURE__ */ import_react3.default.createElement(
+      import_react_native2.Animated.ScrollView,
+      {
+        ref: innerRef,
+        ...props,
+        onLayout: handleLayout,
+        contentContainerStyle: [
+          { paddingTop },
+          minHeight > 0 && { minHeight },
+          contentContainerStyle
+        ],
+        onScroll: isActive ? import_react_native2.Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+          useNativeDriver: true,
+          listener: handleScroll
+        }) : handleScroll,
+        scrollEventThrottle: 16,
+        showsVerticalScrollIndicator: false
+      },
+      children
+    );
+  }
+);
+
+// src/index.tsx
+var CollapsibleTabView = (0, import_react4.forwardRef)(
+  ({
+    children,
+    renderHeader,
+    estimatedHeaderHeight = 0,
+    estimatedTabBarHeight = 0,
+    stickyEnabled = true,
+    stickyTop = 0,
+    renderTabBar,
+    initialTabIndex = 0,
+    onTabChange,
+    onScroll: onScrollProp,
+    swipeEnabled = true,
+    style
+  }, ref) => {
+    const [activeIndex, setActiveIndex] = (0, import_react4.useState)(initialTabIndex);
+    const pagerRef = (0, import_react4.useRef)(null);
+    const pages = (0, import_react4.useMemo)(
+      () => import_react4.default.Children.toArray(children).filter(import_react4.default.isValidElement),
+      [children]
+    );
+    (0, import_react4.useImperativeHandle)(ref, () => ({
+      scrollToTab: (index, animated = true) => {
+        if (index === activeIndex || index < 0 || index >= pages.length) return;
+        syncTabOnSwitch(index);
+        setActiveIndex(index);
+        if (animated) {
+          pagerRef.current?.setPage(index);
+        } else {
+          pagerRef.current?.setPageWithoutAnimation(index);
+        }
+        onTabChange?.(index);
+      },
+      getActiveIndex: () => activeIndex
+    }));
+    const hasEstimate = estimatedHeaderHeight > 0;
+    const headerHeightRef = (0, import_react4.useRef)(0);
+    const tabBarHeightRef = (0, import_react4.useRef)(0);
+    const [layout, setLayout] = (0, import_react4.useState)({
+      headerHeight: estimatedHeaderHeight,
+      tabBarHeight: estimatedTabBarHeight,
+      ready: hasEstimate
+    });
+    const { headerHeight, tabBarHeight } = layout;
+    const visible = layout.ready;
+    const adjustY = (0, import_react4.useRef)(new import_react_native3.Animated.Value(0)).current;
+    const tryCommitLayout = (0, import_react4.useCallback)(() => {
+      const h = headerHeightRef.current;
+      const t = tabBarHeightRef.current;
+      if (h > 0 && t > 0) {
+        setLayout((prev) => {
+          if (Math.abs(prev.headerHeight - h) <= 1 && Math.abs(prev.tabBarHeight - t) <= 1) {
+            return prev;
+          }
+          const diff = h + t - (prev.headerHeight + prev.tabBarHeight);
+          if (prev.ready && Math.abs(diff) > 1) {
+            adjustY.setValue(-diff);
+            import_react_native3.Animated.timing(adjustY, {
+              toValue: 0,
+              duration: 200,
+              useNativeDriver: true
+            }).start();
+          }
+          return { headerHeight: h, tabBarHeight: t, ready: true };
+        });
+      }
+    }, []);
+    const handleHeaderLayout = (0, import_react4.useCallback)(
+      (e) => {
+        headerHeightRef.current = e.nativeEvent.layout.height;
+        tryCommitLayout();
+      },
+      [tryCommitLayout]
+    );
+    const handleTabBarLayout = (0, import_react4.useCallback)(
+      (e) => {
+        tabBarHeightRef.current = e.nativeEvent.layout.height;
+        tryCommitLayout();
+      },
+      [tryCommitLayout]
+    );
+    const scrollY = (0, import_react4.useRef)(new import_react_native3.Animated.Value(0)).current;
+    const tabScrollYMap = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
+    const tabRefs = (0, import_react4.useRef)(
+      /* @__PURE__ */ new Map()
+    );
+    const collapseRange = stickyEnabled ? Math.max(headerHeight - stickyTop, 0) : 0;
+    const headerTranslateY = (0, import_react4.useMemo)(
+      () => collapseRange > 0 ? scrollY.interpolate({
+        inputRange: [0, collapseRange],
+        outputRange: [0, -collapseRange],
+        extrapolate: "clamp"
+      }) : new import_react_native3.Animated.Value(0),
+      [scrollY, collapseRange]
+    );
+    const registerRef = (0, import_react4.useCallback)(
+      (index, ref2) => {
+        if (ref2) {
+          tabRefs.current.set(index, ref2);
+        } else {
+          tabRefs.current.delete(index);
+        }
+      },
+      []
+    );
+    const syncScrollY = (0, import_react4.useCallback)(
+      (index, y) => {
+        tabScrollYMap.current.set(index, y);
+        onScrollProp?.(y);
+      },
+      [onScrollProp]
+    );
+    const scrollTabTo = (0, import_react4.useCallback)((index, offset) => {
+      const ref2 = tabRefs.current.get(index);
+      if (!ref2) return;
+      if (ref2.scrollToOffset) {
+        ref2.scrollToOffset({ offset, animated: false });
+      } else if (ref2.scrollTo) {
+        ref2.scrollTo({ y: offset, animated: false });
+      } else if (ref2.getNode) {
+        const node = ref2.getNode();
+        if (node?.scrollToOffset) {
+          node.scrollToOffset({ offset, animated: false });
+        } else if (node?.scrollTo) {
+          node.scrollTo({ y: offset, animated: false });
+        }
+      }
+    }, []);
+    const syncTabOnSwitch = (0, import_react4.useCallback)(
+      (newIndex) => {
+        const currentY = tabScrollYMap.current.get(activeIndex) ?? 0;
+        const newTabSavedY = tabScrollYMap.current.get(newIndex) ?? 0;
+        const isCollapsed = currentY >= collapseRange - 1;
+        let targetY;
+        if (isCollapsed) {
+          targetY = Math.max(newTabSavedY, collapseRange);
+        } else {
+          targetY = Math.min(currentY, collapseRange);
+        }
+        import_react_native3.InteractionManager.runAfterInteractions(() => {
+          scrollTabTo(newIndex, targetY);
+          tabScrollYMap.current.set(newIndex, targetY);
+          scrollY.setValue(Math.min(targetY, collapseRange));
+        });
+      },
+      [activeIndex, collapseRange, scrollTabTo, scrollY]
+    );
+    const handleTabPress = (0, import_react4.useCallback)(
+      (index) => {
+        if (index === activeIndex) return;
+        syncTabOnSwitch(index);
+        setActiveIndex(index);
+        pagerRef.current?.setPageWithoutAnimation(index);
+        onTabChange?.(index);
+      },
+      [activeIndex, onTabChange, syncTabOnSwitch]
+    );
+    const handlePageSelected = (0, import_react4.useCallback)(
+      (e) => {
+        const newIndex = e.nativeEvent.position;
+        if (newIndex === activeIndex) return;
+        syncTabOnSwitch(newIndex);
+        setActiveIndex(newIndex);
+        onTabChange?.(newIndex);
+      },
+      [activeIndex, onTabChange, syncTabOnSwitch]
+    );
+    const tabBarProps = (0, import_react4.useMemo)(
+      () => ({
+        activeIndex,
+        onTabPress: handleTabPress
+      }),
+      [activeIndex, handleTabPress]
+    );
+    const renderTabBarNode = (0, import_react4.useCallback)(
+      () => renderTabBar(tabBarProps),
+      [renderTabBar, tabBarProps]
+    );
+    const contextValue = (0, import_react4.useMemo)(
+      () => ({
+        scrollY,
+        activeIndex,
+        stickyEnabled,
+        headerHeight,
+        tabBarHeight,
+        renderHeader: stickyEnabled ? void 0 : renderHeader,
+        renderTabBar: stickyEnabled ? void 0 : renderTabBarNode,
+        registerRef,
+        syncScrollY
+      }),
+      [
+        scrollY,
+        activeIndex,
+        stickyEnabled,
+        headerHeight,
+        tabBarHeight,
+        renderHeader,
+        renderTabBarNode,
+        registerRef,
+        syncScrollY
+      ]
+    );
+    return /* @__PURE__ */ import_react4.default.createElement(CollapsibleContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { style: [styles.container, style] }, /* @__PURE__ */ import_react4.default.createElement(
+      import_react_native3.Animated.View,
+      {
+        style: [
+          styles.pager,
+          !visible && styles.hidden,
+          { transform: [{ translateY: adjustY }] }
+        ]
+      },
+      /* @__PURE__ */ import_react4.default.createElement(
+        import_react_native_pager_view.default,
+        {
+          ref: pagerRef,
+          style: styles.pager,
+          initialPage: initialTabIndex,
+          onPageSelected: handlePageSelected,
+          scrollEnabled: swipeEnabled
+        },
+        pages.map((page, i) => /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { key: page?.key ?? i, style: styles.page }, /* @__PURE__ */ import_react4.default.createElement(TabIndexContext.Provider, { value: i }, page)))
+      )
+    ), stickyEnabled && /* @__PURE__ */ import_react4.default.createElement(
+      import_react_native3.Animated.View,
+      {
+        style: [
+          styles.overlay,
+          { transform: [{ translateY: headerTranslateY }] }
+        ],
+        pointerEvents: "box-none"
+      },
+      /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { pointerEvents: "box-none", onLayout: handleHeaderLayout }, renderHeader()),
+      /* @__PURE__ */ import_react4.default.createElement(import_react_native3.View, { onLayout: handleTabBarLayout }, renderTabBarNode())
+    )));
+  }
+);
+var styles = import_react_native3.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  pager: {
+    flex: 1
+  },
+  hidden: {
+    opacity: 0
+  },
+  page: {
+    flex: 1
+  },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10
+  }
+});
+var index_default = CollapsibleTabView;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabFlatList,
+  TabScrollView
+});