Native Animation

Sign in Get all-access

Base Tabs animation preview

Base Tabs animation preview

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

npx nativeanimation add base-tabs

Base Tabs

React Native Tabs Component

Tabs with a spring-driven highlight and shifting content, with configurable labels, panels, and theme.

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

Related guides

React Native Bottom Navigation Animation with Animated Tabs

Tabs with a spring-driven highlight and shifting content, with configurable labels, panels, and theme.

How it works

The tab list has a muted track, 3 pt padding, equal-width triggers.
One shared value holds the selected index; the highlight's position and width derive from it with a spring (stiffness 300, damping 30, mass 1), so taps mid-motion retarget smoothly.
Tab text fades between muted and foreground in 200 ms.
The outgoing panel fades out in 150 ms; the new one fades in over 300 ms from a 12 pt shift in the direction of travel.

Install

npx nativeanimation add base-tabs

The CLI also copies base-theme. Dependencies, if you copy by hand:

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

Usage

import { BaseTabs } from './base-tabs';

<BaseTabs
  tabs={[
    { value: 'account', label: 'Account', content: <AccountForm /> },
    { value: 'password', label: 'Password', content: <PasswordForm /> },
  ]}
/>

Controlled, without panels (as a segmented control):

<BaseTabs value={period} onValueChange={setPeriod} tabs={[{ value: 'monthly', label: 'Monthly' }, { value: 'yearly', label: 'Yearly' }]} />

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
`tabs`	`{ value: string; label: string; content?: ReactNode }[]`	—	Tabs in order.
`value`	`string`	—	Selected tab (controlled).
`defaultValue`	`string`	first tab	Initial tab (uncontrolled).
`onValueChange`	`(value: string) => void`	—	Called when a tab is chosen.
`theme`	`BaseTheme`	provider	Overrides the theme from `BaseThemeProvider`.
`testID`	`string`	—	Test 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.

Accessibility

Announced as a tab list; each trigger reports its selected state. Triggers reserve 48 dp on Android and 44 pt on iOS/web around the 36 pt visual track, with no overlapping targets. Supports screen-reader activation and Enter/Space on web. With Reduce Motion on, the highlight and panel change instantly.

Part of a shared foundation

Use it in a screen

Compose Base Tabs 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

Collapsible Profile Tabs ↗

Profile tabs with a collapsing header and remembered scroll positions, with configurable tabs, header content, palette, and fonts.

Another way to solve this task · $9

Routed Shared Element ↗

A cover-to-detail transition with a measured return path, with configurable items, labels, palette, and fonts.

Source code

Loading public source…

Dependencies

Package	Version
react-native-gesture-handler	~3.3.0
react-native-reanimated	4.7.1
react-native-worklets	0.13.0

Compatibility

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

Scroll the table horizontally to review every column ↔

More animations

BaseTabs.tsx

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

export type BaseTab = {
  value: string;
  label: string;
  content?: React.ReactNode;
};

export type BaseTabsProps = {
  tabs: BaseTab[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  theme?: BaseTheme;
  testID?: string;
};

export function BaseTabs({
  tabs,
  value: controlled,
  defaultValue,
  onValueChange,
  theme: override,
  testID,
}: BaseTabsProps) {
  const theme = useBaseTheme(override);
  const { colors } = theme;
  const reduced = useBaseReducedMotion();
  const [internal, setInternal] = useState(defaultValue ?? tabs[0]?.value);
  const value = controlled ?? internal;
  const index = Math.max(
    0,
    tabs.findIndex((t) => t.value === value),
  );

  // Triggers are flex-1, so the highlight geometry follows from the list width alone.
  const listWidth = useSharedValue(0);
  const slot = useSharedValue(index);
  const placed = useRef(false);

  useEffect(() => {
    if (!placed.current || reduced) slot.set(index);
    else slot.set(withSpring(index, spring(theme, 'selection')));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [index, reduced]);

  const onListLayout = (e: LayoutChangeEvent) => {
    listWidth.set(e.nativeEvent.layout.width);
    placed.current = true;
  };

  // Panel: the outgoing content leaves in panelOut, the new one enters in panelIn from a 12px shift.
  const [shown, setShown] = useState(value);
  const panel = useSharedValue(1);
  const direction = useSharedValue(1);
  const lastIndex = useRef(index);

  useEffect(() => {
    if (value === shown) return;
    direction.set(index >= lastIndex.current ? 1 : -1);
    lastIndex.current = index;
    const swap = (next: string) => {
      setShown(next);
      panel.set(withTiming(1, timing(theme, 'panelIn', reduced)));
    };
    panel.set(
      withTiming(0, timing(theme, 'panelOut', reduced), (finished) => {
        if (finished) scheduleOnRN(swap, value);
      }),
    );
  }, [value, shown, index, theme, reduced, panel, direction]);

  const panelStyle = useAnimatedStyle(() => ({
    opacity: panel.get(),
    transform: [
      {
        translateX:
          (1 - panel.get()) * theme.motion.shifts.tabs * direction.get(),
      },
    ],
  }));

  const dark = theme.scheme === 'dark';
  const count = tabs.length;
  const highlightStyle = useAnimatedStyle(() => {
    const w = (listWidth.get() - 6) / count;
    return { width: w, transform: [{ translateX: 3 + slot.get() * w }] };
  });

  const select = (next: string) => {
    if (controlled === undefined) setInternal(next);
    onValueChange?.(next);
  };

  const content = tabs.find((t) => t.value === shown)?.content;

  return (
    <View testID={testID} style={{ gap: 8 }}>
      <View
        accessibilityRole="tablist"
        onLayout={onListLayout}
        style={{
          height: Platform.OS === 'android' ? 48 : 44,
          paddingHorizontal: 3,
          borderRadius: theme.radius.lg,
          backgroundColor: 'transparent',
          flexDirection: 'row',
        }}
      >
        <View
          pointerEvents="none"
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            top: (Platform.OS === 'android' ? 48 : 44) / 2 - 18,
            height: 36,
            borderRadius: theme.radius.lg,
            backgroundColor: colors.muted,
          }}
        />
        <Animated.View
          pointerEvents="none"
          style={[
            {
              position: 'absolute',
              top: (Platform.OS === 'android' ? 48 : 44) / 2 - 15,
              height: 29,
              left: 0,
              borderRadius: theme.radius.md,
              borderWidth: 1,
              borderColor: dark ? colors.input : 'transparent',
              backgroundColor: dark ? colors.inputSurface : colors.background,
              boxShadow: theme.shadow.sm,
            },
            highlightStyle,
          ]}
        />
        {tabs.map((tab) => (
          <TabTrigger
            key={tab.value}
            label={tab.label}
            testID={testID ? `${testID}-tab-${tab.value}` : undefined}
            active={tab.value === value}
            theme={theme}
            onPress={() => select(tab.value)}
          />
        ))}
      </View>
      {content !== undefined ? (
        <Animated.View style={panelStyle}>{content}</Animated.View>
      ) : null}
    </View>
  );
}

function TabTrigger({
  label,
  active,
  theme,
  onPress,
  testID,
}: {
  testID?: string;
  label: string;
  active: boolean;
  theme: BaseTheme;
  onPress: () => void;
}) {
  const reduced = useBaseReducedMotion();
  const progress = useSharedValue(active ? 1 : 0);
  useEffect(() => {
    progress.set(withTiming(active ? 1 : 0, timing(theme, 'color', reduced)));
  }, [active, theme, reduced, progress]);

  // text-foreground/60 in light, text-muted-foreground in dark; active text-foreground.
  const idle =
    theme.scheme === 'dark'
      ? theme.colors.mutedForeground
      : 'rgba(10,10,10,0.6)';
  const textStyle = useAnimatedStyle(() => ({
    color: interpolateColor(
      progress.get(),
      [0, 1],
      [idle, theme.colors.foreground],
    ),
  }));

  const tap = Gesture.Tap().onEnd((_event, success) => {
    if (success) scheduleOnRN(onPress);
  });

  return (
    <GestureDetector gesture={tap}>
      <View
        accessible
        testID={testID}
        accessibilityRole="tab"
        accessibilityState={{ selected: active }}
        aria-selected={active}
        {
          /* RN Web forwards DOM events rather than native event objects. */
          ...(baseActivationProps(onPress) as object)
        }
        style={{
          flex: 1,
          height: Platform.OS === 'android' ? 48 : 44,
          minWidth: Platform.OS === 'android' ? 48 : 44,
          alignItems: 'center',
          justifyContent: 'center',
          paddingHorizontal: 8,
        }}
      >
        <Animated.Text
          numberOfLines={1}
          style={[
            { fontFamily: theme.fonts.medium, fontSize: 14, lineHeight: 20 },
            textStyle,
          ]}
        >
          {label}
        </Animated.Text>
      </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-tabs",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme"
  ],
  "dependencies": {
    "react-native-gesture-handler": "~3.3.0",
    "react-native-reanimated": "4.7.1",
    "react-native-worklets": "0.13.0"
  }
}