feat: add onIndexChange prop

example/src/App.tsx

@@ -17,6 +17,7 @@ import Default from './Default'
 import DiffClamp from './DiffClamp'
 import DiffClampSnap from './DiffClampSnap'
 import Lazy from './Lazy'
+import OnIndexChange from './OnIndexChange'
 import QuickStartDemo from './QuickStartDemo'
 import Ref from './Ref'
 import ScrollOnHeader from './ScrollOnHeader'
@@ -39,6 +40,7 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   UndefinedHeaderHeight,
   StartOnSpecificTab,
   Ref,
+  OnIndexChange,
 ]
 
 const ExampleList: React.FC<object> = () => {

example/src/OnIndexChange.tsx

@@ -0,0 +1,45 @@
+import React, { useContext } from 'react'
+
+import { OnTabChangeCallback, TabBarProps } from '../../src/types'
+import ExampleComponent from './Shared/ExampleComponent'
+import { Header } from './Shared/Header'
+import { TabNames } from './Shared/Tabs'
+import { ExampleComponentType } from './types'
+
+const exampleTitle = 'On index change example'
+
+const TitleContext = React.createContext<string>(exampleTitle)
+
+const HeaderComponent = (props: TabBarProps<TabNames>) => {
+  const title = useContext(TitleContext)
+  return <Header title={title} {...props} />
+}
+
+const OnIndexChange: ExampleComponentType = () => {
+  const [title, setTitle] = React.useState(exampleTitle)
+
+  const onIndexChange = React.useCallback<OnTabChangeCallback<TabNames>>(
+    ({ prevIndex, index, prevTabName, tabName }) => {
+      const title = `prev: ${prevTabName}\ncurr: ${tabName}`
+      setTitle(title)
+    },
+    []
+  )
+
+  const MemoizedTabs = React.useMemo(() => {
+    return (
+      <ExampleComponent
+        HeaderComponent={HeaderComponent}
+        onIndexChange={onIndexChange}
+      />
+    )
+  }, [onIndexChange])
+
+  return (
+    <TitleContext.Provider value={title}>{MemoizedTabs}</TitleContext.Provider>
+  )
+}
+
+OnIndexChange.title = exampleTitle
+
+export default OnIndexChange

example/src/Shared/ExampleComponentScrollableTabs.tsx

@@ -4,6 +4,7 @@ import {
   CollapsibleProps,
   RefComponent,
   ContainerRef,
+  MaterialTabBar,
 } from 'react-native-collapsible-tab-view'
 import { useAnimatedRef } from 'react-native-reanimated'
 
@@ -55,14 +56,12 @@ const Example: React.FC<Props> = (props) => {
       headerHeight={HEADER_HEIGHT}
       refMap={refMap}
       lazy
-      tabBarProps={{
-        scrollEnabled: true,
-      }}
+      TabBarComponent={(props) => <MaterialTabBar {...props} scrollEnabled />}
       {...props}
     >
       {Object.keys(refMap).map((name) => {
         return (
-          <Tabs.ScrollView key={name} name={name as TabNames}>
+          <Tabs.ScrollView key={name}>
             <ArticleContent />
           </Tabs.ScrollView>
         )

example/src/Shared/Header.tsx

@@ -2,14 +2,19 @@ import React from 'react'
 import { StyleSheet, View, Text } from 'react-native'
 import { TabBarProps } from 'react-native-collapsible-tab-view'
 
+import { TabNames } from './Tabs'
+
 type Props = {
   title: string
   height?: number
 }
 
 export const HEADER_HEIGHT = 250
 
-const Header: React.FC<Props> = ({ title, height = HEADER_HEIGHT }) => {
+export const Header = ({
+  title,
+  height = HEADER_HEIGHT,
+}: TabBarProps<TabNames> & Props) => {
   return (
     <View style={[styles.root, { height }]}>
       <Text style={styles.text}>{title}</Text>
@@ -18,8 +23,8 @@ const Header: React.FC<Props> = ({ title, height = HEADER_HEIGHT }) => {
 }
 
 function buildHeader<T extends TabBarProps<any>>(title: string) {
-  const NewHeader: React.FC<T> = () => {
-    return <Header title={title} />
+  const NewHeader = (props: T) => {
+    return <Header title={title} {...props} />
   }
 
   return NewHeader

src/createCollapsibleTabs.tsx

@@ -72,6 +72,7 @@ const createCollapsibleTabs = <T extends ParamList>() => {
         lazy,
         cancelLazyFadeIn,
         pagerProps,
+        onIndexChange,
       },
       ref
     ) => {
@@ -178,6 +179,14 @@ const createCollapsibleTabs = <T extends ParamList>() => {
           if (i !== index.value) {
             offset.value =
               scrollY.value[index.value] - scrollY.value[i] + offset.value
+            if (onIndexChange) {
+              runOnJS(onIndexChange)({
+                prevIndex: index.value,
+                index: i,
+                prevTabName: tabNames.value[index.value],
+                tabName: tabNames.value[i],
+              })
+            }
             index.value = i
           }
         }

src/index.tsx

@@ -9,6 +9,7 @@ import {
   RefComponent,
   ContainerRef,
   CollapsibleRef,
+  OnTabChangeCallback,
 } from './types'
 
 export type {
@@ -20,6 +21,7 @@ export type {
   MaterialTabItemProps,
   MaterialTabItem,
   CollapsibleRef,
+  OnTabChangeCallback,
 }
 
 export { default as createCollapsibleTabs } from './createCollapsibleTabs'

src/types.ts

@@ -35,6 +35,13 @@ export type TabBarProps<T extends ParamList> = {
   onTabPress: (name: T) => void
 }
 
+export type OnTabChangeCallback<T extends ParamList> = (data: {
+  prevIndex: number
+  index: number
+  prevTabName: T
+  tabName: T
+}) => void
+
 export type CollapsibleProps<T extends ParamList> = {
   initialTabName?: T
   containerRef: React.RefObject<ContainerRef>
@@ -63,6 +70,7 @@ export type CollapsibleProps<T extends ParamList> = {
     | 'showsHorizontalScrollIndicator'
     | 'getItemLayout'
   >
+  onIndexChange?: OnTabChangeCallback<T>
 }
 
 export type ContextType<T extends ParamList> = {