import { ScrollProvider, useCollapsibleScroll } from '@uhg-abyss/mobile';

Usage

ScrollProvider shares animated scroll state through context so components like AppBar can respond to scroll position.

When used with AppBar, it enables hide/show behavior for AppBar content while the page scrolls. If the AppBar includes right-side content that should fade in during collapse (e.g. a search icon button), set the animateRight prop on AppBar to enable that animation.

useCollapsibleScroll returns:

• scrollProps: props to spread into your scrollable container
• reset: a reset function for scroll animation state

The ScrollContext also provides:

• shouldAnimate: a boolean that is false when the scroll view's content is not tall enough to support a full collapse of the header, automatically disabling collapse animations. This prevents partial or stuck collapse states on screens with limited content.
• resetHeight: clears the measured height and resets scroll state, used internally during route transitions.

When scrollProps are generated, the hook wires AppBar collapse handlers and merges them with handlers you pass in. It also applies:

• keyboardShouldPersistTaps="always"
• bounces={false}
• decelerationRate="fast"
• scrollEventThrottle={16} (unless overridden)

AppBar Integration

Use this pattern for screens that have an AppBar and a scrollable content area:

1. Wrap the screen with ScrollProvider.
2. Call useCollapsibleScroll() inside that provider.
3. Spread scrollProps into your scrollable container (Animated.ScrollView).
4. Render AppBar in the same provider tree.

import { Animated } from 'react-native';
import {
  AppBar,
  ScrollProvider,
  useCollapsibleScroll,
  SearchInputButton,
  ProgressBar,
} from '@uhg-abyss/mobile';

const ScreenContent = () => {
  const { scrollProps } = useCollapsibleScroll();

  return (
    <>
      <AppBar
        heading="Heading"
        headingAlignment="left"
        nestedContent={
          <AppBar.NestedContent>
            <SearchInputButton placeholder="Search" />
          </AppBar.NestedContent>
        }
      />
      <Animated.ScrollView {...scrollProps}>
        {/* Scrollable content */}
      </Animated.ScrollView>
    </>
  );
};

const App = () => {
  return (
    <ScrollProvider>
      <ScreenContent />
    </ScrollProvider>
  );
};

Notes

• useCollapsibleScroll must be called within ScrollProvider.
• AppBar and your scrollable container should both be descendants of the same provider instance.
• useCollapsibleScroll accepts optional Animated.ScrollView props and merges event handlers (onScroll, drag, momentum) with provider behavior.
• Collapse animations are automatically disabled when the scroll view's content is not tall enough to support a full collapse. This is driven by the shouldAnimate context value and requires no manual configuration.
• To animate the right side of the AppBar (fade/scale) during collapse, set the animateRight prop on AppBar. Without it, only the children/nested content will collapse.
• Currently the only scroll behavior is designed for vertical scrolling with collapse/expand transitions as displayed in AppBar.

ScrollProvider Props

ScrollProvider Props

Prop Name	Type	Default	Description
children	React.ReactNode	-	The component tree that consumes scroll context
onScroll	(e: NativeSyntheticEvent<NativeScrollEvent>) => void	-	Optional callback fired on scroll events from descendant scroll containers.
scrollY	Animated.Value	-	Optional external animated value for vertical scroll offset.

useCollapsibleScroll

useCollapsibleScroll(props?)

• props: optional Abyss.BaseProps<{}, 'Animated.ScrollView'> | Animated.AnimatedProps<ScrollViewProps> passed through to scrollProps
• returns { scrollProps, reset }
• merges onScroll, onScrollBeginDrag, onScrollEndDrag, and onMomentumScrollEnd with provider behavior