feat: expose hooks

src/Container.tsx

@@ -300,13 +300,17 @@ const Container = React.forwardRef<CollapsibleRef, CollapsibleProps>(
       [children, lazy, tabNames.value, cancelLazyFadeIn]
     )
 
+    const headerTranslateY = useDerivedValue(() => {
+      return revealHeaderOnScroll
+        ? -accDiffClamp.value
+        : -Math.min(scrollYCurrent.value, headerScrollDistance.value)
+    }, [revealHeaderOnScroll])
+
     const stylez = useAnimatedStyle(() => {
       return {
         transform: [
           {
-            translateY: revealHeaderOnScroll
-              ? -accDiffClamp.value
-              : -Math.min(scrollYCurrent.value, headerScrollDistance.value),
+            translateY: headerTranslateY.value,
           },
         ],
       }
@@ -454,6 +458,7 @@ const Container = React.forwardRef<CollapsibleRef, CollapsibleProps>(
           snappingTo,
           contentHeights,
           setContentHeights,
+          headerTranslateY,
         }}
       >
         <Animated.View

src/hooks.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react'
 import { useWindowDimensions } from 'react-native'
 import { ContainerRef, RefComponent } from 'react-native-collapsible-tab-view'
-import {
+import Animated, {
   cancelAnimation,
   useAnimatedReaction,
   useAnimatedRef,
@@ -19,6 +19,7 @@ import {
   withTiming,
   interpolate,
   Extrapolate,
+  runOnJS,
 } from 'react-native-reanimated'
 import { useDeepCompareMemo } from 'use-deep-compare'
 
@@ -122,7 +123,7 @@ export function useTabNameContext(): TabName {
 }
 
 /**
- * Hook to access some key styles that make the whole think work.
+ * Hook to access some key styles that make the whole thing work.
  *
  * You can use this to get the progessViewOffset and pass to the refresh control of scroll view.
  */
@@ -546,3 +547,59 @@ export function useAfterMountEffect(effect: React.EffectCallback) {
   }, [didExecute, effect])
   return result
 }
+
+export function useConvertAnimatedToValue<T>(
+  animatedValue: Animated.SharedValue<T>
+) {
+  const [value, setValue] = useState(animatedValue.value)
+
+  useAnimatedReaction(
+    () => {
+      return animatedValue.value
+    },
+    (animValue) => {
+      if (animValue !== value) {
+        runOnJS(setValue)(animValue)
+      }
+    },
+    [value]
+  )
+
+  return value
+}
+
+interface HeaderMeasurements {
+  /**
+   * Animated value that represents the current Y translation of the header
+   */
+  top: Animated.SharedValue<number>
+  /**
+   * The height of the header
+   */
+  height: number
+}
+
+export function useHeaderMeasurements(): HeaderMeasurements {
+  const { headerTranslateY, headerHeight } = useTabsContext()
+  return {
+    top: headerTranslateY,
+    height: headerHeight,
+  }
+}
+
+/**
+ * Returns the currently focused tab name
+ */
+export function useFocusedTab() {
+  const { focusedTab } = useTabsContext()
+  const focusedTabValue = useConvertAnimatedToValue(focusedTab)
+  return focusedTabValue
+}
+
+/**
+ * Returns an animated value representing the current tab index, as a floating point number
+ */
+export function useAnimatedTabIndex() {
+  const { indexDecimal } = useTabsContext()
+  return indexDecimal
+}

src/index.tsx

@@ -33,6 +33,11 @@ export const Tabs = {
 }
 
 export { Container, Tab, Lazy, FlatList, ScrollView }
-export { useTabsContext, useTabNameContext, useCollapsibleStyle } from './hooks'
+export {
+  useHeaderMeasurements,
+  useFocusedTab,
+  useAnimatedTabIndex,
+  useCollapsibleStyle,
+} from './hooks'
 export { MaterialTabBar } from './MaterialTabBar/TabBar'
 export { MaterialTabItem } from './MaterialTabBar/TabItem'

src/types.ts

@@ -205,6 +205,8 @@ export type ContextType<T extends TabName = TabName> = {
   >
 
   contentInset: number
+
+  headerTranslateY: Animated.SharedValue<number>
 }
 
 export type ScrollViewProps = ComponentProps<typeof Animated.ScrollView>