Allow to custom MaterialTabBar indicator

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
 

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}

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'

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
    */

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 = {