React Native Animated Parallax Header

Description:

Animated Parallax Header for React Native is a responsive component that helps you build dynamic, collapsible headers.

It uses react-native-reanimated to create smooth, 60 FPS animations that run on the native UI thread.

Features

• Expandable Image Header: The header image smoothly scales and transitions as you scroll.
• Scroll-Responsive: All animations are tied directly to scroll gestures for a fluid feel.
• Sticky State: The header locks into a compact, sticky state when you scroll past a certain point.
• Reanimated 3 Power: Leverages the latest version of Reanimated for optimal performance.
• Smart Retraction: The header intelligently retracts when you scroll up.
• Composable: Designed to work with other components like tab bars or content lists placed below it.

See It In Action

Use Cases

• Music and Streaming Apps: Perfect for artist or album pages where a large hero image collapses into a small, persistent header. This is the classic Spotify-style use case.
• Profile Screens: In a social or user-focused app, you can use this to feature a user’s profile picture or banner, which then collapses to reveal their content feed.
• Product Detail Pages: E-commerce apps can display a large product image that shrinks into the navigation bar as the user scrolls through the product details and reviews. This keeps the product visually present without occupying too much screen real estate.
• Article or Blog Headers: For content-heavy apps, a featured image for an article can serve as the parallax header, creating a more engaging reading experience as it transitions smoothly out of the way.

How to Use It

1. Clone the Repository from Github

git clone https://github.com/rit3zh/expo-animated-sticky-header
cd expo-animated-sticky-header

2. Install Dependencies

pnpm install

This will install the core dependencies:

• react-native-reanimated: The engine for the animations.
• expo-blur: Used for the blurred background effect on the sticky header.
• expo-symbols: Provides SF Symbols for iconography.
• expo-linear-gradient: Creates the gradient overlay on the image.

3. Run the project on the iOS simulator:

pnpm ios

4. Your project must have the react-native-reanimated/plugin in your babel.config.js. This is a common point of failure for developers new to Reanimated. Without it, the animations won’t work.

// babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'], // This line is crucial
  };
};

5. The header component needs to know the scroll position of your content. You achieve this by creating a scrollY shared value with Reanimated’s useSharedValue hook and passing it from your Animated.ScrollView or Animated.FlatList to the header component.

import Animated, { useSharedValue } from 'react-native-reanimated';
const MyScreen = () => {
  const scrollY = useSharedValue(0);
  return (
    <>
      <ParallaxHeader scrollY={scrollY} />
      <Animated.ScrollView
        onScroll={({ nativeEvent }) => {
          scrollY.value = nativeEvent.contentOffset.y;
        }}
        scrollEventThrottle={16} // Important for smooth updates
      >
        {/* Your content here */}
      </Animated.ScrollView>
    </>
  );
};

FAQs

Q: Can I use this with a FlatList or SectionList?
A: Yes. Just use Animated.FlatList or Animated.SectionList instead of Animated.ScrollView. The key is that the scrollable component must be an Animated component from Reanimated so it can efficiently pass scroll events.

Q: How do I adjust the final height of the sticky header?
A: You would need to modify the interpolation output ranges inside the component’s source code. Look for the useAnimatedStyle hook that controls the header’s height and change the target value in the interpolate function’s output range array.

Q: Will this work on Android?
A: Absolutely. react-native-reanimated and the Expo modules used are cross-platform. The setup and logic are identical for both iOS and Android, so you should get a consistent experience.