@hero-design/rn 8.115.1 → 8.116.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.116.0
+
+### Minor Changes
+
+- [#4647](https://github.com/Thinkei/hero-design/pull/4647) [`a5254d3e57528ec951ec233be9a1c6f6d9234a7b`](https://github.com/Thinkei/hero-design/commit/a5254d3e57528ec951ec233be9a1c6f6d9234a7b) Thanks [@cuongnguyeneh](https://github.com/cuongnguyeneh)! - feat: Add support for custom tab header
+
 ## 8.115.1
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,118 @@
+# @hero-design/rn
+
+## Overview
+
+`@hero-design/rn` is a React Native component library built with TypeScript and Emotion. It provides UI components, theming system, chart components (D3.js), form components, mobile-specific components (FAB, BottomSheet, Swipeable), and platform-specific implementations (iOS/Android) following Hero Design's design system principles.
+
+## Installation
+
+```sh
+yarn add @hero-design/rn
+```
+
+**Peer Dependencies:**
+
+```sh
+yarn add react@18.3.1 react-native@0.77.3
+yarn add @hero-design/react-native-month-year-picker@^8.43.2
+yarn add @ptomasroos/react-native-multi-slider@^2.2.2
+yarn add @react-native-community/datetimepicker@^3.5.2
+yarn add @react-native-community/slider@^4.5.1
+yarn add react-native-gesture-handler@~2.20.2
+yarn add react-native-linear-gradient@^2.8.3
+yarn add react-native-pager-view@^6.7.0
+yarn add react-native-safe-area-context@^4.7.0
+yarn add react-native-svg@^15.11.2
+yarn add react-native-vector-icons@^9.1.0
+yarn add react-native-webview@^13.10.2
+```
+
+**Requirements:**
+- React 18.3.1
+- React Native 0.77.3
+- Node.js >= 20.0.0 (20.19.5 recommended)
+- Yarn >= 4.0.2 (enabled via Corepack: `corepack enable`)
+- iOS Simulator or Android Emulator:
+  - **For visual tests compatibility**: iPhone 14 (iOS 18+) or Android Pixel 6 (API 30) are recommended
+  - **For non-visual fixes or demo purposes**: Any device frame with compatible OS version is sufficient
+
+## Usage
+
+### Basic Setup
+
+Wrap your application with `HeroDesignProvider` to enable theming, localization, and component features (Toast, Portal):
+
+```tsx
+import React from 'react';
+import { HeroDesignProvider, getTheme, Button, Card, Typography } from '@hero-design/rn';
+
+function App() {
+  const theme = getTheme();
+  
+  return (
+    <HeroDesignProvider theme={theme}>
+      <Card>
+        <Typography.Title>Welcome to Hero Design</Typography.Title>
+        <Button text="Get Started" intent="primary" onPress={() => {}} />
+      </Card>
+    </HeroDesignProvider>
+  );
+}
+```
+
+## Theming
+
+Hero Design React Native uses a powerful theming system built on Emotion.
+
+### Using ThemeSwitcher
+
+For product-specific themes, use `ThemeSwitcher` which provides a predefined theme. Available theme names: `ehWork`, `ehJobs`, `ehWorkDark`.
+
+```tsx
+import { ThemeSwitcher } from '@hero-design/rn';
+
+function App() {
+  return (
+    <ThemeSwitcher name="ehWork">
+      {/* Your app */}
+    </ThemeSwitcher>
+  );
+}
+```
+
+**Note:** `ThemeSwitcher` only provides theme. For Toast, Portal, and Locale features, use `HeroDesignProvider` with a theme from `getTheme()`.
+
+### Design Tokens
+
+The theme includes semantic design tokens organized by category:
+
+- **Colors**: Global colors (`defaultGlobalSurface`, `onDefaultGlobalSurface`, etc.) and brand colors (`primary`, `secondary`, etc.)
+- **Typography**: `theme.fontSizes`, `theme.fonts`, `theme.lineHeights`
+- **Spacing**: `theme.space` - Consistent spacing scale (`small`, `medium`, `large`, etc.)
+- **Shadows**: `theme.shadows` - Elevation and depth
+- **Components**: Component-specific theme configurations via `theme.__hd__`
+
+For comprehensive design token documentation, visit the [Mobile Design Tokens](https://design.employmenthero.com/mobile/mobile-design-tokens).
+
+## Examples
+
+For comprehensive examples and component documentation:
+
+- **Documentation Site**: Visit the [Hero Design documentation site](https://design.employmenthero.com/mobile/intro)
+- **Mobile Playground**: Explore the [rn-playground](https://github.com/Thinkei/hero-design/tree/master/apps/rn-playground)
+
+## Contributing
+
+Contributions to `@hero-design/rn` are welcome!
+
+To get started:
+
+1. Clone the repository: `git clone git@github.com:Thinkei/hero-design.git`
+2. Enable Corepack: `corepack enable`
+3. Install dependencies: `yarn install`
+4. Build the package: `yarn turbo run build --filter=@hero-design/rn`
+5. Run the playground: `yarn dev:rn`
+
+**Note:** An Expo account is required to start the playground. Contact the Hero Design team for access.
+
+For detailed contributing guidelines, see the main repository [Contributing documentation](https://design.employmenthero.com/mobile/Contributing/coContribution).

package/es/index.js

@@ -28030,51 +28030,19 @@ var getTabItem = function getTabItem(_ref) {
     color: color
   });
 };
-var Tabs = function Tabs(_ref2) {
-  var onTabPress = _ref2.onTabPress,
+var TabsHeader = function TabsHeader(_ref2) {
+  var tabs = _ref2.tabs,
     selectedTabKey = _ref2.selectedTabKey,
-    tabs = _ref2.tabs,
-    containerStyle = _ref2.containerStyle,
+    onTabPress = _ref2.onTabPress,
     barStyle = _ref2.barStyle,
-    _ref2$lazy = _ref2.lazy,
-    lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
-    _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
-    lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
-    _ref2$swipeEnabled = _ref2.swipeEnabled,
-    swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
-    componentTestID = _ref2.testID;
+    insets = _ref2.insets,
+    componentTestID = _ref2.componentTestID,
+    tabsWidth = _ref2.tabsWidth,
+    setTabsWidth = _ref2.setTabsWidth,
+    positionAnimatedValue = _ref2.positionAnimatedValue,
+    scrollOffsetAnimatedValue = _ref2.scrollOffsetAnimatedValue;
   var theme = useTheme$1();
-  var insets = useSafeAreaInsets();
-  var pagerViewRef = useRef(null);
-  var selectedTabIndex = tabs.findIndex(function (item) {
-    return item.key === selectedTabKey;
-  });
-  var scrollOffsetAnimatedValue = useRef(new Animated.Value(0)).current;
-  var positionAnimatedValue = useRef(new Animated.Value(0)).current;
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    tabsWidth = _useState2[0],
-    setTabsWidth = _useState2[1];
-  var _useHandlePageScroll = useHandlePageScroll(),
-    onPageScrollStateChanged = _useHandlePageScroll.onPageScrollStateChanged,
-    hasScrolled = _useHandlePageScroll.hasScrolled;
-  useEffect(function () {
-    if (selectedTabIndex !== -1) {
-      var _pagerViewRef$current;
-      (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 || _pagerViewRef$current.setPage(selectedTabIndex);
-    }
-  }, [selectedTabIndex]);
-  var tabContextProviderValue = useMemo(function () {
-    return {
-      selectedTabKey: selectedTabKey
-    };
-  }, [selectedTabKey]);
-  return /*#__PURE__*/React__default.createElement(TabContext.Provider, {
-    value: tabContextProviderValue
-  }, /*#__PURE__*/React__default.createElement(TabContainer$1, {
-    style: containerStyle,
-    testID: componentTestID
-  }, /*#__PURE__*/React__default.createElement(HeaderTabWrapper$1, {
+  return /*#__PURE__*/React__default.createElement(HeaderTabWrapper$1, {
     themeInsets: insets,
     style: barStyle,
     testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
@@ -28113,7 +28081,67 @@ var Tabs = function Tabs(_ref2) {
     scrollOffsetAnimatedValue: scrollOffsetAnimatedValue,
     tabsLength: tabs.length,
     tabsWidth: tabsWidth
-  }))), /*#__PURE__*/React__default.createElement(AnimatedPagerView, {
+  })));
+};
+var Tabs = function Tabs(_ref3) {
+  var onTabPress = _ref3.onTabPress,
+    selectedTabKey = _ref3.selectedTabKey,
+    tabs = _ref3.tabs,
+    containerStyle = _ref3.containerStyle,
+    barStyle = _ref3.barStyle,
+    _ref3$lazy = _ref3.lazy,
+    lazy = _ref3$lazy === void 0 ? false : _ref3$lazy,
+    _ref3$lazyPreloadDist = _ref3.lazyPreloadDistance,
+    lazyPreloadDistance = _ref3$lazyPreloadDist === void 0 ? 1 : _ref3$lazyPreloadDist,
+    _ref3$swipeEnabled = _ref3.swipeEnabled,
+    swipeEnabled = _ref3$swipeEnabled === void 0 ? true : _ref3$swipeEnabled,
+    componentTestID = _ref3.testID,
+    header = _ref3.header;
+  var insets = useSafeAreaInsets();
+  var pagerViewRef = useRef(null);
+  var selectedTabIndex = tabs.findIndex(function (item) {
+    return item.key === selectedTabKey;
+  });
+  var scrollOffsetAnimatedValue = useRef(new Animated.Value(0)).current;
+  var positionAnimatedValue = useRef(new Animated.Value(0)).current;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    tabsWidth = _useState2[0],
+    setTabsWidth = _useState2[1];
+  var _useHandlePageScroll = useHandlePageScroll(),
+    onPageScrollStateChanged = _useHandlePageScroll.onPageScrollStateChanged,
+    hasScrolled = _useHandlePageScroll.hasScrolled;
+  useEffect(function () {
+    if (selectedTabIndex !== -1) {
+      var _pagerViewRef$current;
+      (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 || _pagerViewRef$current.setPage(selectedTabIndex);
+    }
+  }, [selectedTabIndex]);
+  var tabContextProviderValue = useMemo(function () {
+    return {
+      selectedTabKey: selectedTabKey
+    };
+  }, [selectedTabKey]);
+  var headerProps = useMemo(function () {
+    return {
+      tabs: tabs,
+      selectedTabKey: selectedTabKey,
+      onTabPress: onTabPress,
+      barStyle: barStyle,
+      insets: insets,
+      componentTestID: componentTestID,
+      tabsWidth: tabsWidth,
+      setTabsWidth: setTabsWidth,
+      positionAnimatedValue: positionAnimatedValue,
+      scrollOffsetAnimatedValue: scrollOffsetAnimatedValue
+    };
+  }, [tabs, selectedTabKey, onTabPress, barStyle, insets, componentTestID, tabsWidth, setTabsWidth, positionAnimatedValue, scrollOffsetAnimatedValue]);
+  return /*#__PURE__*/React__default.createElement(TabContext.Provider, {
+    value: tabContextProviderValue
+  }, /*#__PURE__*/React__default.createElement(TabContainer$1, {
+    style: containerStyle,
+    testID: componentTestID
+  }, header ? header(headerProps) : /*#__PURE__*/React__default.createElement(TabsHeader, headerProps), /*#__PURE__*/React__default.createElement(AnimatedPagerView, {
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageSelected: function onPageSelected(e) {
@@ -28154,6 +28182,7 @@ var Tabs = function Tabs(_ref2) {
   }))));
 };
 var index$2 = Object.assign(Tabs, {
+  Header: TabsHeader,
   Scroll: ScrollableTab,
   ScrollHeader: ScrollableTabHeader,
   useIsFocused: useIsFocused

package/lib/index.js

@@ -28059,51 +28059,19 @@ var getTabItem = function getTabItem(_ref) {
     color: color
   });
 };
-var Tabs = function Tabs(_ref2) {
-  var onTabPress = _ref2.onTabPress,
+var TabsHeader = function TabsHeader(_ref2) {
+  var tabs = _ref2.tabs,
     selectedTabKey = _ref2.selectedTabKey,
-    tabs = _ref2.tabs,
-    containerStyle = _ref2.containerStyle,
+    onTabPress = _ref2.onTabPress,
     barStyle = _ref2.barStyle,
-    _ref2$lazy = _ref2.lazy,
-    lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
-    _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
-    lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
-    _ref2$swipeEnabled = _ref2.swipeEnabled,
-    swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
-    componentTestID = _ref2.testID;
+    insets = _ref2.insets,
+    componentTestID = _ref2.componentTestID,
+    tabsWidth = _ref2.tabsWidth,
+    setTabsWidth = _ref2.setTabsWidth,
+    positionAnimatedValue = _ref2.positionAnimatedValue,
+    scrollOffsetAnimatedValue = _ref2.scrollOffsetAnimatedValue;
   var theme = useTheme$1();
-  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
-  var pagerViewRef = React.useRef(null);
-  var selectedTabIndex = tabs.findIndex(function (item) {
-    return item.key === selectedTabKey;
-  });
-  var scrollOffsetAnimatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
-  var positionAnimatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
-  var _useState = React.useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    tabsWidth = _useState2[0],
-    setTabsWidth = _useState2[1];
-  var _useHandlePageScroll = useHandlePageScroll(),
-    onPageScrollStateChanged = _useHandlePageScroll.onPageScrollStateChanged,
-    hasScrolled = _useHandlePageScroll.hasScrolled;
-  React.useEffect(function () {
-    if (selectedTabIndex !== -1) {
-      var _pagerViewRef$current;
-      (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 || _pagerViewRef$current.setPage(selectedTabIndex);
-    }
-  }, [selectedTabIndex]);
-  var tabContextProviderValue = React.useMemo(function () {
-    return {
-      selectedTabKey: selectedTabKey
-    };
-  }, [selectedTabKey]);
-  return /*#__PURE__*/React__namespace.default.createElement(TabContext.Provider, {
-    value: tabContextProviderValue
-  }, /*#__PURE__*/React__namespace.default.createElement(TabContainer$1, {
-    style: containerStyle,
-    testID: componentTestID
-  }, /*#__PURE__*/React__namespace.default.createElement(HeaderTabWrapper$1, {
+  return /*#__PURE__*/React__namespace.default.createElement(HeaderTabWrapper$1, {
     themeInsets: insets,
     style: barStyle,
     testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
@@ -28142,7 +28110,67 @@ var Tabs = function Tabs(_ref2) {
     scrollOffsetAnimatedValue: scrollOffsetAnimatedValue,
     tabsLength: tabs.length,
     tabsWidth: tabsWidth
-  }))), /*#__PURE__*/React__namespace.default.createElement(AnimatedPagerView, {
+  })));
+};
+var Tabs = function Tabs(_ref3) {
+  var onTabPress = _ref3.onTabPress,
+    selectedTabKey = _ref3.selectedTabKey,
+    tabs = _ref3.tabs,
+    containerStyle = _ref3.containerStyle,
+    barStyle = _ref3.barStyle,
+    _ref3$lazy = _ref3.lazy,
+    lazy = _ref3$lazy === void 0 ? false : _ref3$lazy,
+    _ref3$lazyPreloadDist = _ref3.lazyPreloadDistance,
+    lazyPreloadDistance = _ref3$lazyPreloadDist === void 0 ? 1 : _ref3$lazyPreloadDist,
+    _ref3$swipeEnabled = _ref3.swipeEnabled,
+    swipeEnabled = _ref3$swipeEnabled === void 0 ? true : _ref3$swipeEnabled,
+    componentTestID = _ref3.testID,
+    header = _ref3.header;
+  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+  var pagerViewRef = React.useRef(null);
+  var selectedTabIndex = tabs.findIndex(function (item) {
+    return item.key === selectedTabKey;
+  });
+  var scrollOffsetAnimatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
+  var positionAnimatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    tabsWidth = _useState2[0],
+    setTabsWidth = _useState2[1];
+  var _useHandlePageScroll = useHandlePageScroll(),
+    onPageScrollStateChanged = _useHandlePageScroll.onPageScrollStateChanged,
+    hasScrolled = _useHandlePageScroll.hasScrolled;
+  React.useEffect(function () {
+    if (selectedTabIndex !== -1) {
+      var _pagerViewRef$current;
+      (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 || _pagerViewRef$current.setPage(selectedTabIndex);
+    }
+  }, [selectedTabIndex]);
+  var tabContextProviderValue = React.useMemo(function () {
+    return {
+      selectedTabKey: selectedTabKey
+    };
+  }, [selectedTabKey]);
+  var headerProps = React.useMemo(function () {
+    return {
+      tabs: tabs,
+      selectedTabKey: selectedTabKey,
+      onTabPress: onTabPress,
+      barStyle: barStyle,
+      insets: insets,
+      componentTestID: componentTestID,
+      tabsWidth: tabsWidth,
+      setTabsWidth: setTabsWidth,
+      positionAnimatedValue: positionAnimatedValue,
+      scrollOffsetAnimatedValue: scrollOffsetAnimatedValue
+    };
+  }, [tabs, selectedTabKey, onTabPress, barStyle, insets, componentTestID, tabsWidth, setTabsWidth, positionAnimatedValue, scrollOffsetAnimatedValue]);
+  return /*#__PURE__*/React__namespace.default.createElement(TabContext.Provider, {
+    value: tabContextProviderValue
+  }, /*#__PURE__*/React__namespace.default.createElement(TabContainer$1, {
+    style: containerStyle,
+    testID: componentTestID
+  }, header ? header(headerProps) : /*#__PURE__*/React__namespace.default.createElement(TabsHeader, headerProps), /*#__PURE__*/React__namespace.default.createElement(AnimatedPagerView, {
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageSelected: function onPageSelected(e) {
@@ -28183,6 +28211,7 @@ var Tabs = function Tabs(_ref2) {
   }))));
 };
 var index$2 = Object.assign(Tabs, {
+  Header: TabsHeader,
   Scroll: ScrollableTab,
   ScrollHeader: ScrollableTabHeader,
   useIsFocused: useIsFocused

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.115.1",
+  "version": "8.116.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/sonar-project.properties

@@ -4,6 +4,6 @@ sonar.organization=thinkei
 
 sonar.sources=.
 sonar.inclusions=**/*
-sonar.exclusions=**/__tests__/**,**/public/**,**/stats/**,**.config.js,**/testUtils/**
+sonar.exclusions=**/__tests__/**,**/public/**,**/stats/**,**.config.js,**/testUtils/**,**/lcov-report/**
 sonar.java.binaries=**/src/main/java
-sonar.javascript.lcov.reportPaths=./coverage/lcov.info
+sonar.javascript.lcov.reportPaths=rn-test-results*/lcov.info

package/src/components/Tabs/ScrollableTabs.tsx

@@ -10,7 +10,7 @@ import { TabContainer } from './StyledScrollableTabs';
 import useHandlePageScroll from './useHandlePageScroll';
 import { ScreenContext, TabContext } from './useIsFocused';
 
-export interface ScrollableTabProps extends TabsProps {
+export interface ScrollableTabProps extends Omit<TabsProps, 'header'> {
   variant?: 'underlined' | 'highlighted';
   header?: FunctionComponent<ScrollableTabHeaderProps>;
 }

package/src/components/Tabs/index.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@emotion/react';
-import type { ReactElement, ReactNode } from 'react';
+import type { FunctionComponent, ReactElement, ReactNode } from 'react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { Animated, TouchableWithoutFeedback, View } from 'react-native';
@@ -37,6 +37,18 @@ export type TabType = {
   badge?: BadgeConfigType;
 };
 
+export interface TabsHeaderProps {
+  tabs: TabType[];
+  selectedTabKey: string;
+  onTabPress: (key: string) => void;
+  barStyle?: StyleProp<ViewStyle>;
+  insets: { top: number; right: number; bottom: number; left: number };
+  componentTestID?: string;
+  tabsWidth: number;
+  setTabsWidth: (width: number) => void;
+  positionAnimatedValue: Animated.Value;
+  scrollOffsetAnimatedValue: Animated.Value;
+}
 export interface TabsProps extends ViewProps {
   /**
    * Callback which is called on tab press, receiving key of upcoming active Tab.
@@ -77,6 +89,10 @@ export interface TabsProps extends ViewProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Custom header component.
+   */
+  header?: FunctionComponent<TabsHeaderProps>;
 }
 
 const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
@@ -105,6 +121,77 @@ const getTabItem = ({
   return item({ color });
 };
 
+const TabsHeader = ({
+  tabs,
+  selectedTabKey,
+  onTabPress,
+  barStyle,
+  insets,
+  componentTestID,
+  tabsWidth,
+  setTabsWidth,
+  positionAnimatedValue,
+  scrollOffsetAnimatedValue,
+}: TabsHeaderProps) => {
+  const theme = useTheme();
+  return (
+    <HeaderTabWrapper
+      themeInsets={insets}
+      style={barStyle}
+      testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+    >
+      <View>
+        <HeaderTab
+          onLayout={(e) => {
+            const { width } = e.nativeEvent.layout;
+            if (tabsWidth !== width) {
+              setTabsWidth(width);
+            }
+          }}
+        >
+          {tabs.map((tab) => {
+            const {
+              key,
+              testID,
+              activeItem,
+              inactiveItem: originalInactiveItem,
+              badge,
+            } = tab;
+
+            const active = selectedTabKey === key;
+            const inactiveItem = originalInactiveItem ?? activeItem;
+            const tabItem = getTabItem({
+              item: active ? activeItem : inactiveItem,
+              color: theme.__hd__.tabs.colors.text,
+              active,
+            });
+
+            return (
+              <TouchableWithoutFeedback
+                key={key}
+                onPress={() => {
+                  onTabPress(key);
+                }}
+                testID={testID}
+              >
+                <HeaderTabItem>
+                  <TabWithBadge config={badge} tabItem={tabItem} />
+                </HeaderTabItem>
+              </TouchableWithoutFeedback>
+            );
+          })}
+        </HeaderTab>
+        <ActiveTabIndicator
+          positionAnimatedValue={positionAnimatedValue}
+          scrollOffsetAnimatedValue={scrollOffsetAnimatedValue}
+          tabsLength={tabs.length}
+          tabsWidth={tabsWidth}
+        />
+      </View>
+    </HeaderTabWrapper>
+  );
+};
+
 const Tabs = ({
   onTabPress,
   selectedTabKey,
@@ -115,8 +202,8 @@ const Tabs = ({
   lazyPreloadDistance = 1,
   swipeEnabled = true,
   testID: componentTestID,
+  header,
 }: TabsProps): ReactElement => {
-  const theme = useTheme();
   const insets = useSafeAreaInsets();
   const pagerViewRef = useRef<PagerView>(null);
   const selectedTabIndex = tabs.findIndex(
@@ -141,63 +228,37 @@ const Tabs = ({
     [selectedTabKey]
   );
 
+  const headerProps = useMemo(
+    () => ({
+      tabs,
+      selectedTabKey,
+      onTabPress,
+      barStyle,
+      insets,
+      componentTestID,
+      tabsWidth,
+      setTabsWidth,
+      positionAnimatedValue,
+      scrollOffsetAnimatedValue,
+    }),
+    [
+      tabs,
+      selectedTabKey,
+      onTabPress,
+      barStyle,
+      insets,
+      componentTestID,
+      tabsWidth,
+      setTabsWidth,
+      positionAnimatedValue,
+      scrollOffsetAnimatedValue,
+    ]
+  );
+
   return (
     <TabContext.Provider value={tabContextProviderValue}>
       <TabContainer style={containerStyle} testID={componentTestID}>
-        <HeaderTabWrapper
-          themeInsets={insets}
-          style={barStyle}
-          testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
-        >
-          <View>
-            <HeaderTab
-              onLayout={(e) => {
-                const { width } = e.nativeEvent.layout;
-                if (tabsWidth !== width) {
-                  setTabsWidth(width);
-                }
-              }}
-            >
-              {tabs.map((tab) => {
-                const {
-                  key,
-                  testID,
-                  activeItem,
-                  inactiveItem: originalInactiveItem,
-                  badge,
-                } = tab;
-
-                const active = selectedTabKey === key;
-                const inactiveItem = originalInactiveItem ?? activeItem;
-                const tabItem = getTabItem({
-                  item: active ? activeItem : inactiveItem,
-                  color: theme.__hd__.tabs.colors.text,
-                  active,
-                });
-
-                return (
-                  <TouchableWithoutFeedback
-                    key={key}
-                    onPress={() => {
-                      onTabPress(key);
-                    }}
-                    testID={testID}
-                  >
-                    <HeaderTabItem>
-                      <TabWithBadge config={badge} tabItem={tabItem} />
-                    </HeaderTabItem>
-                  </TouchableWithoutFeedback>
-                );
-              })}
-            </HeaderTab>
-            <ActiveTabIndicator
-              positionAnimatedValue={positionAnimatedValue}
-              scrollOffsetAnimatedValue={scrollOffsetAnimatedValue}
-              tabsLength={tabs.length}
-              tabsWidth={tabsWidth}
-            />
-          </View>
-        </HeaderTabWrapper>
+        {header ? header(headerProps) : <TabsHeader {...headerProps} />}
         <AnimatedPagerView
           initialPage={selectedTabIndex}
           ref={pagerViewRef}
@@ -250,6 +311,7 @@ const Tabs = ({
 };
 
 export default Object.assign(Tabs, {
+  Header: TabsHeader,
   Scroll: ScrollableTabs,
   ScrollHeader: ScrollableTabHeader,
   useIsFocused,

package/types/components/Tabs/ScrollableTabs.d.ts

@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import React from 'react';
 import type { TabsProps } from '.';
 import type { ScrollableTabHeaderProps } from './ScrollableTabsHeader/ScrollableTabsHeader';
-export interface ScrollableTabProps extends TabsProps {
+export interface ScrollableTabProps extends Omit<TabsProps, 'header'> {
     variant?: 'underlined' | 'highlighted';
     header?: FunctionComponent<ScrollableTabHeaderProps>;
 }

package/types/components/Tabs/index.d.ts

@@ -1,6 +1,7 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { FunctionComponent, ReactElement, ReactNode } from 'react';
 import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
 import type { IconName } from '../Icon';
 import type { BadgeConfigType } from './TabWithBadge';
 export type ItemType = string | IconName | ((props: {
@@ -14,6 +15,23 @@ export type TabType = {
     testID?: string;
     badge?: BadgeConfigType;
 };
+export interface TabsHeaderProps {
+    tabs: TabType[];
+    selectedTabKey: string;
+    onTabPress: (key: string) => void;
+    barStyle?: StyleProp<ViewStyle>;
+    insets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    componentTestID?: string;
+    tabsWidth: number;
+    setTabsWidth: (width: number) => void;
+    positionAnimatedValue: Animated.Value;
+    scrollOffsetAnimatedValue: Animated.Value;
+}
 export interface TabsProps extends ViewProps {
     /**
      * Callback which is called on tab press, receiving key of upcoming active Tab.
@@ -54,8 +72,13 @@ export interface TabsProps extends ViewProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Custom header component.
+     */
+    header?: FunctionComponent<TabsHeaderProps>;
 }
-declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => ReactElement) & {
+declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, header, }: TabsProps) => ReactElement) & {
+    Header: ({ tabs, selectedTabKey, onTabPress, barStyle, insets, componentTestID, tabsWidth, setTabsWidth, positionAnimatedValue, scrollOffsetAnimatedValue, }: TabsHeaderProps) => React.JSX.Element;
     Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, variant, header, }: import("./ScrollableTabs").ScrollableTabProps) => React.JSX.Element;
     ScrollHeader: ({ onTabPress, selectedIndex, tabs, barStyle, testID, insets, variant, }: import("./ScrollableTabsHeader/ScrollableTabsHeader").ScrollableTabHeaderProps) => React.JSX.Element;
     useIsFocused: () => boolean | undefined;