Native Animation

Sign in Get all-access

Base Header animation preview

Base Header animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add base-header

Base Header

React Native Header Component

A navigation header with configurable titles, back action, action slots, alignment, safe-area inset, theme, and scroll-driven title handoff.

Native Animation Base · Free · MIT

Read and download source

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this component

A navigation header with configurable titles, back action, action slots, alignment, safe-area inset, theme, and scroll-driven title handoff.

How it works

The bar is 56 pt tall plus the host-supplied top inset. Back and action controls have 48 dp targets on Android and 44 pt targets on iOS and web.
Center alignment reserves equal space on both sides using the measured action width.
A shared scroll value fades the bottom border in from 0–8 pt. No React state changes per scroll frame.
With a large title, scrolling 0–40 pt fades it out and shifts it up 8 pt; the small title fades in from 24–48 pt. The large title keeps its layout space. Without a scroll value it stays visible.

Install

npx nativeanimation add base-header

The CLI also copies the family modules listed in registryDependencies. Dependencies, if you copy by hand:

npx expo install lucide-react-native react-native-svg react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

import { Share2 } from 'lucide-react-native';
import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
import { BaseHeader, BaseHeaderAction } from './base-header';

// Inside a component:
const scrollY = useSharedValue(0);
const onScroll = useAnimatedScrollHandler((event) => {
  scrollY.set(event.contentOffset.y);
});

return (
  <>
    <BaseHeader
      title="Settings"
      topInset={insets.top}
      largeTitle
      align="left"
      scrollY={scrollY}
      onBack={goBack}
      actions={[
        <BaseHeaderAction key="share" accessibilityLabel="Share settings" onPress={share}>
          <Share2 size={20} color={theme.colors.foreground} />
        </BaseHeaderAction>,
      ]}
    />
    <Animated.ScrollView onScroll={onScroll} scrollEventThrottle={16}>
      {children}
    </Animated.ScrollView>
  </>
);

Wrap your app in BaseThemeProvider (from base-theme) to choose light/dark and an accent; without it, pieces use the light neutral theme. Every piece also takes a theme prop that wins over the provider.

Props

Prop	Type	Default	Description
`title`	`string`	—	Required one-line navigation title.
`subtitle`	`string`	—	Optional supporting label.
`onBack`	`() => void`	—	Shows a back button when supplied.
`backLabel`	`string`	`Back`	Accessible back button label.
`actions`	`ReactNode`	—	Right-side controls. Use BaseHeaderAction or supply 48 dp targets on Android and 44 pt targets on iOS and web.
`align`	`'center' \| 'left'`	`center`	Title alignment.
`scrollY`	`SharedValue<number>`	—	Host scroll position in points.
`largeTitle`	`boolean`	`false`	Shows a 30 pt title beneath the bar.
`topInset`	`number`	`0`	Safe-area top inset supplied by the host.
`BaseHeaderAction.children`	`ReactNode`	—	Action icon or content.
`BaseHeaderAction.accessibilityLabel`	`string`	—	Required action name.
`BaseHeaderAction.onPress`	`() => void`	—	Required action callback.
`BaseHeaderAction.disabled`	`boolean`	`false`	Disables action activation.
`BaseHeaderAction.theme / testID`	`BaseTheme / string`	—	Optional action theme override and identifier.
`theme`	`BaseTheme`	`provider`	Overrides the theme from BaseThemeProvider.
`style`	`StyleProp<ViewStyle>`	—	Container style.
`testID`	`string`	—	Stable identifier on the root view.

Compatibility

Expo SDK 58 · React Native 0.88 · Reanimated 4.7 · react-native-worklets 0.13. Runs on iOS, Android and web, in Expo Go and in development builds. Part of Native Animation Base, a free family that shares one theme: install base-theme once (the CLI does it for you) and every Base piece picks it up. Free forever. MIT.

Accessibility

The navigation title is exposed once as a heading; the visual large duplicate is hidden from screen readers. Back and action controls support screen reader activation and Enter/Space on web. Android controls reserve 48 dp without enlarging the icons. With Reduce Motion on, scroll-driven opacity remains, while title translation and press scaling are disabled. Supply meaningful labels for custom actions.

Touch targets

Back and BaseHeaderAction reserve 48×48 dp on Android and 44×44 pt on iOS and 44 px on web. Adjacent action centers are at least 48 dp apart on Android and 44 pt apart on iOS and 44 px apart on web. Icons stay the same size. Give custom actions the same space, and keep the header wide enough for both sides.

Part of a shared foundation

Use it in a screen

Compose Base Header with other Base components and a single shared theme. Ask your agent to read each API, then connect real navigation, state, and callbacks.

Build a habit tracker Build with an agent CLI and manual installation Theme and dark mode Accessibility checklist Native Animation Base UI library

Go further.

Base covers the everyday. Choose a more expressive interaction when your app calls for it.

Another way to solve this task · $9

Stacked Category Cards ↗

A category stack whose tabs unfold into detail cards, with configurable categories, title, colors, and fonts.

Another way to solve this task · $9

Review Approval Card ↗

A moderation queue with swipe-to-approve or decline feedback, with configurable reviews, labels, colors, and fonts.

Source code

Loading public source…

Dependencies

Package	Version
lucide-react-native	^1.61.0
react-native-gesture-handler	~3.3.0
react-native-reanimated	4.7.1
react-native-svg	15.16.0
react-native-worklets	0.13.0

Compatibility

SDK	Status	Revision	Last revision	Platforms	Dependencies
Expo SDK 58	Tested	2	10/28/2026	iOS, Web, Android	lucide-react-native ^1.61.0, react-native-gesture-handler ~3.3.0, react-native-reanimated 4.7.1, react-native-svg 15.16.0, react-native-worklets 0.13.0
Expo SDK 57	Tested	1	10/27/2026	iOS, Web, Android	lucide-react-native ^1.61.0, react-native-gesture-handler ~2.32.0, react-native-reanimated 4.5.1, react-native-svg 15.15.4, react-native-worklets 0.10.1

Scroll the table horizontally to review every column ↔

More animations

BaseHeader.tsx

import {
  useBaseReducedMotion,
  BaseThemeProvider,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, { Children, useState } from 'react';
import {
  Platform,
  Text,
  View,
  type StyleProp,
  type ViewStyle,
} from 'react-native';
import ChevronLeft from 'lucide-react-native/icons/chevron-left';
import Animated, {
  Extrapolation,
  interpolate,
  useAnimatedStyle,
  type SharedValue,
} from 'react-native-reanimated';

import { BaseHeaderAction } from './BaseHeaderAction';

export type BaseHeaderProps = {
  title: string;
  subtitle?: string;
  onBack?: () => void;
  backLabel?: string;
  actions?: React.ReactNode;
  align?: 'center' | 'left';
  scrollY?: SharedValue<number>;
  largeTitle?: boolean;
  topInset?: number;
  theme?: BaseTheme;
  style?: StyleProp<ViewStyle>;
  testID?: string;
};

export function BaseHeader({
  title,
  subtitle,
  onBack,
  backLabel = 'Back',
  actions,
  align = 'center',
  scrollY,
  largeTitle = false,
  topInset = 0,
  theme: override,
  style,
  testID,
}: BaseHeaderProps) {
  const theme = useBaseTheme(override);
  const reduced = useBaseReducedMotion();
  const [actionsWidth, setActionsWidth] = useState(
    Children.count(actions) * (Platform.OS === 'android' ? 48 : 44),
  );
  const actionSize = Platform.OS === 'android' ? 48 : 44;
  const sideWidth = Math.max(onBack ? actionSize : 0, actionsWidth);
  const borderStyle = useAnimatedStyle(() => ({
    opacity: scrollY
      ? interpolate(scrollY.get(), [0, 8], [0, 1], Extrapolation.CLAMP)
      : 0,
  }));
  const smallStyle = useAnimatedStyle(() => ({
    opacity: largeTitle
      ? scrollY
        ? interpolate(scrollY.get(), [24, 48], [0, 1], Extrapolation.CLAMP)
        : 0
      : 1,
  }));
  const largeStyle = useAnimatedStyle(() => ({
    opacity: scrollY
      ? interpolate(scrollY.get(), [0, 40], [1, 0], Extrapolation.CLAMP)
      : 1,
    transform: [
      {
        translateY:
          reduced || !scrollY
            ? 0
            : interpolate(scrollY.get(), [0, 40], [0, -8], Extrapolation.CLAMP),
      },
    ],
  }));
  return (
    <BaseThemeProvider theme={theme}>
      <View
        testID={testID}
        style={[
          {
            paddingTop: Math.max(0, topInset),
            backgroundColor: theme.colors.background,
          },
          style,
        ]}
      >
        <View
          style={{
            height: 56,
            paddingHorizontal: 8,
            flexDirection: 'row',
            alignItems: 'center',
            gap: 4,
          }}
        >
          <View
            style={{
              width: align === 'center' ? sideWidth : onBack ? actionSize : 0,
              alignItems: 'flex-start',
            }}
          >
            {onBack ? (
              <BaseHeaderAction
                theme={theme}
                accessibilityLabel={backLabel}
                onPress={onBack}
                testID={testID ? `${testID}-back` : undefined}
              >
                <ChevronLeft size={20} color={theme.colors.foreground} />
              </BaseHeaderAction>
            ) : null}
          </View>
          <Animated.View
            style={[
              {
                flex: 1,
                minWidth: 0,
                alignItems: align === 'center' ? 'center' : 'flex-start',
              },
              smallStyle,
            ]}
          >
            <Text
              numberOfLines={1}
              accessibilityRole="header"
              style={{
                fontFamily: theme.fonts.medium,
                fontSize: 16,
                lineHeight: 22,
                color: theme.colors.foreground,
              }}
            >
              {title}
            </Text>
            {subtitle ? (
              <Text
                numberOfLines={1}
                style={{
                  fontFamily: theme.fonts.regular,
                  fontSize: 12,
                  lineHeight: 16,
                  color: theme.colors.mutedForeground,
                }}
              >
                {subtitle}
              </Text>
            ) : null}
          </Animated.View>
          <View
            style={{ width: align === 'center' ? sideWidth : actionsWidth }}
          />
          <View
            onLayout={(event) => {
              const width = event.nativeEvent.layout.width;
              setActionsWidth((current) =>
                current === width ? current : width,
              );
            }}
            style={{
              position: 'absolute',
              right: 8,
              top: Platform.OS === 'android' ? 4 : 6,
              flexDirection: 'row',
              alignItems: 'center',
            }}
          >
            {Children.toArray(actions).map((action, index) => (
              <View
                key={
                  React.isValidElement(action) ? (action.key ?? index) : index
                }
                style={{
                  minWidth: actionSize,
                  minHeight: actionSize,
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                {action}
              </View>
            ))}
          </View>
        </View>
        {largeTitle ? (
          <Animated.View
            aria-hidden
            accessibilityElementsHidden
            importantForAccessibility="no-hide-descendants"
            style={[
              { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 12 },
              largeStyle,
            ]}
          >
            <Text
              numberOfLines={1}
              style={{
                fontFamily: theme.fonts.medium,
                fontSize: 30,
                lineHeight: 40,
                letterSpacing: -0.75,
                color: theme.colors.foreground,
              }}
            >
              {title}
            </Text>
            {subtitle ? (
              <Text
                style={{
                  fontFamily: theme.fonts.regular,
                  fontSize: 14,
                  lineHeight: 20,
                  color: theme.colors.mutedForeground,
                }}
              >
                {subtitle}
              </Text>
            ) : null}
          </Animated.View>
        ) : null}
        <Animated.View
          aria-hidden
          pointerEvents="none"
          style={[
            {
              position: 'absolute',
              height: 1,
              bottom: 0,
              left: 0,
              right: 0,
              backgroundColor: theme.colors.border,
            },
            borderStyle,
          ]}
        />
      </View>
    </BaseThemeProvider>
  );
}

BaseHeaderAction.tsx

import {
  baseActivationProps,
  useBaseReducedMotion,
  spring,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React from 'react';
import { Platform } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import { scheduleOnRN } from 'react-native-worklets';

const NO_WEB_OUTLINE =
  Platform.OS === 'web' ? ({ outlineStyle: 'none' } as object) : null;

export type BaseHeaderActionProps = {
  children: React.ReactNode;
  accessibilityLabel: string;
  onPress: () => void;
  disabled?: boolean;
  theme?: BaseTheme;
  testID?: string;
};

export function BaseHeaderAction({
  children,
  accessibilityLabel: label,
  onPress,
  disabled = false,
  theme: override,
  testID,
}: BaseHeaderActionProps) {
  const theme = useBaseTheme(override);
  const reduced = useBaseReducedMotion();
  const pressed = useSharedValue(1);
  const tap = Gesture.Tap()
    .enabled(!disabled)
    .onBegin(() => {
      pressed.set(
        reduced
          ? 1
          : withSpring(theme.motion.scales.press, spring(theme, 'press')),
      );
    })
    .onFinalize(() => {
      pressed.set(reduced ? 1 : withSpring(1, spring(theme, 'press')));
    })
    .onEnd((_event, success) => {
      if (success) scheduleOnRN(onPress);
    });
  const animated = useAnimatedStyle(() => ({
    transform: [{ scale: pressed.get() }],
  }));
  return (
    <GestureDetector gesture={tap}>
      <Animated.View
        testID={testID}
        accessible
        accessibilityRole="button"
        accessibilityLabel={label}
        accessibilityState={{ disabled }}
        aria-disabled={disabled}

        {
          /* RN Web forwards DOM events rather than native event objects. */
          ...((Platform.OS === 'web'
            ? {
                tabIndex: disabled ? -1 : 0,
                // Gesture Handler activates on key-up; prevent browser scrolling without firing twice.
                onKeyDown: (event: React.KeyboardEvent) => {
                  if (
                    !disabled &&
                    (event.key === 'Enter' || event.key === ' ')
                  ) {
                    event.preventDefault();
                  }
                },
              }
            : {}) as object)
        }
        {
          /* RN Web forwards DOM events rather than native event objects. */
          ...(baseActivationProps(onPress, disabled) as object)
        }
        style={[
          {
            width: Platform.OS === 'android' ? 48 : 44,
            height: Platform.OS === 'android' ? 48 : 44,
            alignItems: 'center',
            justifyContent: 'center',
            borderRadius: theme.radius.md,
          },
          NO_WEB_OUTLINE,
          animated,
        ]}
      >
        {children}
      </Animated.View>
    </GestureDetector>
  );
}

LICENSE

MIT License

Copyright (c) 2026 Native Animation

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

nativeanimation.manifest.json

{
  "schemaVersion": 1,
  "id": "base-header",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme",
    "base-list-row"
  ],
  "dependencies": {
    "lucide-react-native": "^1.61.0",
    "react-native-gesture-handler": "~3.3.0",
    "react-native-reanimated": "4.7.1",
    "react-native-svg": "15.16.0",
    "react-native-worklets": "0.13.0"
  }
}