feat: rename onIndexChange to onTabChange and add onIndexChange(number)

example/src/App.tsx

@@ -19,7 +19,7 @@ import DiffClampSnap from './DiffClampSnap'
 import DynamicTabs from './DynamicTabs'
 import Lazy from './Lazy'
 import MinHeaderHeight from './MinHeaderHeight'
-import OnIndexChange from './OnIndexChange'
+import OnTabChange from './OnTabChange'
 import QuickStartDemo from './QuickStartDemo'
 import Ref from './Ref'
 import ScrollOnHeader from './ScrollOnHeader'
@@ -42,7 +42,7 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   UndefinedHeaderHeight,
   StartOnSpecificTab,
   Ref,
-  OnIndexChange,
+  OnTabChange,
   DynamicTabs,
   MinHeaderHeight,
 ]

example/src/OnIndexChange.tsx → example/src/OnTabChange.tsx

@@ -5,7 +5,7 @@ import ExampleComponent from './Shared/ExampleComponent'
 import { Header } from './Shared/Header'
 import { ExampleComponentType } from './types'
 
-const exampleTitle = 'On index change example'
+const exampleTitle = 'On tab change example'
 
 const TitleContext = React.createContext<string>(exampleTitle)
 
@@ -21,7 +21,7 @@ const OnIndexChange: ExampleComponentType = () => {
     <TitleContext.Provider value={title}>
       <ExampleComponent
         HeaderComponent={HeaderComponent}
-        onIndexChange={({ prevIndex, index, prevTabName, tabName }) => {
+        onTabChange={({ prevIndex, index, prevTabName, tabName }) => {
           const title = `prev: ${prevTabName}\ncurr: ${tabName}`
           setTitle(title)
         }}

src/Container.tsx

@@ -22,7 +22,12 @@ import { MaterialTabBar, TABBAR_HEIGHT } from './MaterialTabBar'
 import { Tab } from './Tab'
 import { AnimatedFlatList, ONE_FRAME_MS, scrollToImpl } from './helpers'
 import { useAnimatedDynamicRefs, useContainerRef, useTabProps } from './hooks'
-import { CollapsibleProps, CollapsibleRef, TabName } from './types'
+import {
+  CollapsibleProps,
+  CollapsibleRef,
+  IndexChangeEventData,
+  TabName,
+} from './types'
 
 const init = (children: any) => {
   if (React.Children.count(children) === 0) {
@@ -82,6 +87,7 @@ const Container = React.forwardRef<CollapsibleRef, CollapsibleProps>(
       cancelLazyFadeIn,
       pagerProps,
       onIndexChange,
+      onTabChange,
     },
     ref
   ) => {
@@ -234,6 +240,14 @@ const Container = React.forwardRef<CollapsibleRef, CollapsibleProps>(
       []
     )
 
+    const propagateTabChange = React.useCallback(
+      (change: IndexChangeEventData<TabName>) => {
+        onTabChange?.(change)
+        onIndexChange?.(change.index)
+      },
+      [onIndexChange, onTabChange]
+    )
+
     useAnimatedReaction(
       () => {
         return calculateNextOffset.value
@@ -242,14 +256,12 @@ const Container = React.forwardRef<CollapsibleRef, CollapsibleProps>(
         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],
-            })
-          }
+          runOnJS(propagateTabChange)({
+            prevIndex: index.value,
+            index: i,
+            prevTabName: tabNames.value[index.value],
+            tabName: tabNames.value[i],
+          })
           index.value = i
         }
       },

src/types.ts

@@ -100,9 +100,14 @@ export type CollapsibleProps = {
     | 'getItemLayout'
   >
   /**
-   * Callback fired when the index changes. It receives the previous and current index and tabnames.
+   * Callback fired when the index changes. It receives the current index.
    */
-  onIndexChange?: OnTabChangeCallback<TabName>
+  onIndexChange?: (index: number) => void
+
+  /**
+   * Callback fired when the tab changes. It receives the previous and current index and tabnames.
+   */
+  onTabChange?: OnTabChangeCallback<TabName>
 }
 
 export type ContextType<T extends TabName = TabName> = {