diff --git a/src/Container.tsx b/src/Container.tsx index 93084297..7c39f6ff 100644 --- a/src/Container.tsx +++ b/src/Container.tsx @@ -300,13 +300,17 @@ const Container = React.forwardRef( [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( snappingTo, contentHeights, setContentHeights, + headerTranslateY, }} > ( + animatedValue: Animated.SharedValue +) { + 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 + /** + * 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 +} diff --git a/src/index.tsx b/src/index.tsx index ed3b5c2e..2498eadf 100644 --- a/src/index.tsx +++ b/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' diff --git a/src/types.ts b/src/types.ts index e9c4af8b..788f6e93 100644 --- a/src/types.ts +++ b/src/types.ts @@ -205,6 +205,8 @@ export type ContextType = { > contentInset: number + + headerTranslateY: Animated.SharedValue } export type ScrollViewProps = ComponentProps