$ show codeherence/react-native-header
A React Native library providing high-performance animated headers for scroll views (ScrollView, FlatList, SectionList, FlashList). It leverages react-native-reanimated for smooth 60fps animations and supports both absolute and relative header positioning with fade-in/scale effects. The library exports composable components like Header, LargeHeader, FadingView, and ScalingView, plus container components that wrap native scrollable views with header logic. It is fully typed, follows React Native new architecture, and works with Expo. The example app demonstrates multiple real-world patterns including Twitter profile, inverted chat, and blurred surfaces. The core scroll logic is encapsulated in a reusable hook (useScrollContainerLogic) that manages shared values for scroll position, navbar visibility, and auto-fix scrolling behavior.
The LLM identified 3 files worth highlighting for reuse:
Encapsulates all scroll-driven animation logic (scrollY, showNavBar, largeHeaderOpacity) using Reanimated shared values, derived values, and worklets. Includes debounced auto-fix scroll for partially visible large headers. Extracting this hook into another project would provide a solid foundation for any animated header system. It demonstrates advanced Reanimated usage with runOnUI and scrollTo.
A simple animated view that fades its children based on a shared value opacity. It also disables pointer events when opacity is below a configurable threshold. This is a clean, self-contained component that can be reused in any React Native project needing conditional visibility with gesture blocking.
A view that scales and translates based on scrollY shared value. Supports configurable start/end ranges, scale factors, and translation direction (right/none). Uses interpolate and layout measurement to achieve a smooth zoom effect. This pattern can be extracted for any parallax or pull-to-scale UI behavior.