Parallax Header

A scroll view with a hero that stretches when pulled past the top, drifts at half speed as you scroll, and ends as a compact bar whose title fades in. The content slides over the hero, so give the hero a full-bleed background. With reduced motion the hero scrolls with the content and the bar simply appears once it is covered. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add parallax-header

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/parallax-header.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { Text, View } from "react-native";
import { ParallaxHeader } from "@/components/ui/parallax-header";

export default function Example() {
  return (
    <ParallaxHeader
      title="Coastal Trails"
      header={<View style={{ flex: 1, backgroundColor: "#2f7fb8" }} />}
    >
      <Text style={{ padding: 20 }}>Scrolling content goes here.</Text>
    </ParallaxHeader>
  );
}

The component fills its parent, so give the parent a height (a screen with flex: 1 is enough).

Props