Component

Parallax Header

A scroll view with a parallax, pull-to-zoom header.

Preview

How to use AI prompt

How to use

Minimal, copy-pasteable code.

Profile.tsx

import { ParallaxHeader } from "react-native-foonto";
import { ImageBackground, Text, View } from "react-native";

export function Profile() {
  return (
    <ParallaxHeader
      headerHeight={280}
      renderHeader={() => (
        <ImageBackground
          source={{ uri: "https://picsum.photos/800" }}
          style={{ flex: 1, justifyContent: "flex-end", padding: 20 }}
        >
          {/* Give big bold text an explicit lineHeight (Android clips it otherwise) */}
          <Text style={{ color: "#fff", fontSize: 32, lineHeight: 40, fontWeight: "800" }}>
            Mount Foonto
          </Text>
        </ImageBackground>
      )}
      contentContainerStyle={{ padding: 16, gap: 12 }}
    >
      {Array.from({ length: 10 }).map((_, i) => (
        <View key={i} style={{ height: 80, borderRadius: 16, backgroundColor: "#f4f4f5" }} />
      ))}
    </ParallaxHeader>
  );
}

Props

Prop	Type	Default	Description
`renderHeader`req	`() => ReactNode`	—	Renders the header content (image, gradient, title…).
`children`req	`ReactNode`	—	Scrollable content below the header.
`headerHeight`	`number`	280	Height of the header area in px.
`style`	`FoontoStyle`	—	Style for the scroll view.
`contentContainerStyle`	`FoontoStyle`	—	Style for the content below the header.

AI prompt

Install the library, then paste this into your AI coding agent to wire it up.

AI prompt

Add a parallax, pull-to-zoom scroll header to a screen using the `react-native-foonto` library.

1. Make sure `react-native-foonto` and `react-native-reanimated` (v4+) are installed.
2. Import `ParallaxHeader` from `react-native-foonto`.
3. Replace the screen's outer ScrollView with `<ParallaxHeader>`.
4. Pass `renderHeader` returning an ImageBackground (or gradient) with a title pinned to the bottom.
5. Give any large/bold header text an explicit `lineHeight` so it isn't clipped on Android.
6. Put the scrollable content as `children`; set `headerHeight` to match your header art.
7. Verify the header scrolls slower than the content and scales up when pulled past the top.