From 15e53e05d926affed837be8cd2959946e4a1ee5b Mon Sep 17 00:00:00 2001
From: Cuong Lam <thanhcuong1990@gmail.com>
Date: Mon, 22 May 2023 10:41:35 +0700
Subject: [PATCH] Allow to custom MaterialTab indicator

---
 README.md                     | 33 +++++++++++++++++++++++++++++++++
 src/MaterialTabBar/TabBar.tsx |  3 ++-
 src/MaterialTabBar/index.tsx  |  6 +++++-
 src/MaterialTabBar/types.ts   |  4 ++++
 src/index.tsx                 |  7 ++++++-
 5 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 0dc4c3dc..3cd114bc 100644
--- a/README.md
+++ b/README.md
@@ -29,6 +29,7 @@
   - [Default Tab Bar](#default-tab-bar)
     - [MaterialTabBar](#materialtabbar)
     - [MaterialTabItem](#materialtabitem)
+    - [IndicatorComponent](#indicatorcomponent)
 - [Known Issues](#known-issues)
   - [Android FlatList Pull to Refresh](#android-flatlist-pull-to-refresh)
   - [iOS FlatList StickyHeaderIndices](#ios-flatlist-stickyheaderindices)
@@ -352,6 +353,38 @@ Any additional props are passed to the pressable component.
 |`style`|`StyleProp<ViewStyle>`|Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.|
 
 
+### IndicatorComponent
+To custom `MaterialTabBar` indicator we can use `IndicatorComponent` as a prop of `MaterialTabBar`.
+```tsx
+  const CustomTabbar = useCallback(
+    (props) => {
+      return (
+        <MaterialTabBar
+          {...props}
+          TabItemComponent={CustomTabItem}
+          IndicatorComponent={CustomTabIndicator}
+        />
+      )
+    },
+    []
+  )
+
+  return (
+    <Tabs.Container
+      renderTabBar={CustomTabbar}
+    >
+    ...
+    </Tabs.Container>
+  )
+```
+#### Props
+
+|name|type|description|
+|:----:|:----:|:----:|
+|`indexDecimal`|``SharedValue<number>``||
+|`itemsLayout`|`ItemLayout[]`|ItemLayout = { width: number, x: number }|
+|`style`|`StyleProp<ViewStyle>`||
+|`fadeIn`|`boolean \| undefined`||
 
 # Known Issues
 
diff --git a/src/MaterialTabBar/TabBar.tsx b/src/MaterialTabBar/TabBar.tsx
index 2adf7200..615ea8d0 100644
--- a/src/MaterialTabBar/TabBar.tsx
+++ b/src/MaterialTabBar/TabBar.tsx
@@ -48,6 +48,7 @@ const MaterialTabBar = <T extends TabName = TabName>({
   indicatorStyle,
   index,
   TabItemComponent = MaterialTabItem,
+  IndicatorComponent = Indicator,
   getLabelText = (name) => String(name).toUpperCase(),
   onTabPress,
   style,
@@ -222,7 +223,7 @@ const MaterialTabBar = <T extends TabName = TabName>({
         )
       })}
       {itemsLayout.length === nTabs && (
-        <Indicator
+        <IndicatorComponent
           indexDecimal={indexDecimal}
           itemsLayout={itemsLayout}
           fadeIn={scrollEnabled}
diff --git a/src/MaterialTabBar/index.tsx b/src/MaterialTabBar/index.tsx
index adf4d6fa..682b21d7 100644
--- a/src/MaterialTabBar/index.tsx
+++ b/src/MaterialTabBar/index.tsx
@@ -1,3 +1,7 @@
 export { MaterialTabBar, TABBAR_HEIGHT } from './TabBar'
 export { MaterialTabItem } from './TabItem'
-export type { MaterialTabBarProps, MaterialTabItemProps } from './types'
+export type {
+  MaterialTabBarProps,
+  MaterialTabItemProps,
+  IndicatorProps,
+} from './types'
diff --git a/src/MaterialTabBar/types.ts b/src/MaterialTabBar/types.ts
index 796fa6b2..6c7bee02 100644
--- a/src/MaterialTabBar/types.ts
+++ b/src/MaterialTabBar/types.ts
@@ -49,6 +49,10 @@ export type MaterialTabBarProps<N extends TabName> = TabBarProps<N> & {
    * React component to render as tab bar item
    */
   TabItemComponent?: (props: MaterialTabItemProps<N>) => React.ReactElement
+  /**
+   * React component to render as indicator
+   */
+  IndicatorComponent?: React.FC<IndicatorProps>
   /**
    * Function to compute the tab item label text
    */
diff --git a/src/index.tsx b/src/index.tsx
index 019eb4bc..e0dc0c5e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,7 +2,11 @@ import { Container } from './Container'
 import { FlashList } from './FlashList'
 import { FlatList } from './FlatList'
 import { Lazy } from './Lazy'
-import { MaterialTabBarProps, MaterialTabItemProps } from './MaterialTabBar'
+import {
+  MaterialTabBarProps,
+  MaterialTabItemProps,
+  IndicatorProps,
+} from './MaterialTabBar'
 import { ScrollView } from './ScrollView'
 import { SectionList } from './SectionList'
 import { Tab } from './Tab'
@@ -28,6 +32,7 @@ export type {
   OnTabChangeCallback,
   TabItemProps,
   TabProps,
+  IndicatorProps,
 }
 
 export const Tabs = {