CollapsibleHeader Component

A flexible header component that animates based on scroll position, commonly used in profile screens or detail views. The header can collapse/expand as the user scrolls, providing a smooth transition between different header states.

Features

Animated Title: Slides up/down based on scroll position
Optional Avatar: Display user avatar next to the title
Configurable Actions: Right-side action buttons/icons
Back Button: Optional back navigation button
Flexible Layout: Center or left-aligned title positioning
Safe Area Support: Proper handling for different devices
Smooth Animations: React Native Reanimated powered transitions

Props

Prop	Type	Default	Description
`scrollY`	`SharedValue<number>`	-	The scroll position value from useSharedValue
`title`	`string`	`"Eronred"`	The title text to display
`avatarUri`	`string`	-	URL for the avatar image
`appearDistance`	`number`	`120`	Distance at which animation completes
`rightActions`	`ReactNode`	-	Right-side action buttons/icons
`isBackButton`	`boolean`	`true`	Whether to show back button

Usage

tsx

import { CollapsibleHeader } from './components/header/collapsible-header';
import { useSharedValue } from 'react-native-reanimated';
import { Ionicons } from '@expo/vector-icons';

const scrollY = useSharedValue(0);

<CollapsibleHeader
  scrollY={scrollY}
  title="Profile Name"
  avatarUri="https://example.com/avatar.jpg"
  rightActions={
    <View style={{ flexDirection: 'row', gap: 16 }}>
      <TouchableOpacity>
        <Ionicons name="settings-outline" size={20} color="#007AFF" />
      </TouchableOpacity>
      <TouchableOpacity>
        <Ionicons name="share-outline" size={20} color="#007AFF" />
      </TouchableOpacity>
    </View>
  }
/>

Animation

The component uses React Native Reanimated for smooth animations:

Title Animation: Translates from translateY: 38 to 0 as scrollY increases
Interpolation: Smooth interpolation with Extrapolation.CLAMP to prevent overshooting
Performance: Hardware-accelerated animations for 60fps performance

Styling

Layout

Height: Fixed 44px for consistent header sizing
Position: Absolute positioning with z-index: 100
Safe Area: Automatic handling of device safe areas

Examples

Basic Usage

tsx

<CollapsibleHeader
  scrollY={scrollY}
  title="My Profile"
/>

With Avatar and Actions

tsx

<CollapsibleHeader
  scrollY={scrollY}
  title="Eronred"
  avatarUri="https://avatars.githubusercontent.com/u/12345?v=4"
  rightActions={
    <TouchableOpacity>
      <Ionicons name="settings-outline" size={20} color="#007AFF" />
    </TouchableOpacity>
  }
/>

Left-Aligned Title (No Back Button)

tsx

<CollapsibleHeader
  scrollY={scrollY}
  title="Settings"
  isBackButton={false}
/>

Integration with ScrollView

To use with a ScrollView, connect the scroll position:

tsx

const scrollY = useSharedValue(0);

const onScroll = useAnimatedScrollHandler({
  onScroll: (event) => {
    scrollY.value = event.contentOffset.y;
  },
});

<CollapsibleHeader scrollY={scrollY} title="My App" />
<Animated.ScrollView onScroll={onScroll}>
  {/* Your content */}
</Animated.ScrollView>

Dependencies

react-native-reanimated - For animations
react-native-safe-area-context - For safe area handling
@expo/vector-icons - For icons (Ionicons)

Notes

The component is designed to work with React Native Reanimated's shared values
Safe area insets are automatically handled
The header stays fixed at the top while content scrolls underneath
Animation distance can be customized via appearDistance prop

Github Profile

About