Native Animation

Sign in Get all-access

Base List Row animation preview

Base List Row animation preview

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

npx nativeanimation add base-list-row

Base List Row

React Native List Row Component

A composable list row with press feedback and configurable copy, leading content, trailing content, 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

A composable list row with press feedback and configurable copy, leading content, trailing content, and theme.

How it works

A row lays out optional leading and trailing content around a flexible text column. Descriptions stop at two lines; side content moves to the top with a 2 pt inset.
Groups insert a 1 pt divider between direct children. inset adds a card surface, border, and xl radius.
A pressable row fades to the accent color at 50% opacity over 100 ms while a separate scale springs to 0.985 using the theme press spring (550/30, mass 1).
Release and cancellation restore both values. Gesture callbacks schedule the caller's action on the RN thread.

Install

npx nativeanimation add base-list-row

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

Load the Geist regular and medium fonts used by the theme once in your app, or supply your own font names in a custom theme. Interactive pieces need a GestureHandlerRootView at the app root. The usage examples with buttons or switches assume those Base pieces are installed separately.

Usage

import { BaseListGroup, BaseListRow } from './base-list-row';
import { BaseSwitch } from './base-switch';

<BaseListGroup inset>
  <BaseListRow title="Privacy and security"
    description="Keep your Nimbus workspace protected."
    onPress={openSecurity} />
  <BaseListRow title="Notifications"
    trailing={<BaseSwitch value={enabled} onValueChange={setEnabled}
      accessibilityLabel="Nimbus notifications" />} />
</BaseListGroup>

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
`BaseListRow: title`	`string`	`required`	Primary row label.
`description`	`string`	`—`	Supporting copy, limited to two lines.
`leading / trailing`	`ReactNode`	`—`	Icons, avatars, controls, or metadata. Use a nonpressable row for independently interactive children.
`onPress`	`() => void`	`—`	Makes the whole row a button.
`variant`	`'default' \| 'outline' \| 'muted'`	`'default'`	Transparent, bordered, or muted surface.
`size`	`'default' \| 'sm'`	`'default'`	16 pt padding or 16 × 12 pt padding.
`theme`	`BaseTheme`	`provider`	Override inherited by nested Base components.
`style`	`StyleProp<ViewStyle>`	`—`	Root style; also available on Group and Icon.
`testID / accessibilityLabel`	`string`	`—`	Native root identifier and optional accessible name.
`BaseListGroup: children`	`ReactNode`	`—`	Rows separated by a 1 pt border-colored line; pass rows directly.
`inset`	`boolean`	`false`	Adds a card surface with an xl radius and border.
`BaseListRowIcon: children`	`ReactNode`	`—`	A caller-supplied 16 pt icon in a 32 pt box.

Compatibility

Expo SDK 58 · React Native 0.88 · Reanimated 4.7 · react-native-worklets 0.13. Targets iOS, Android, and web, including Expo Go and development builds. Part of Native Animation Base, a free family sharing one theme; the CLI installs its family dependencies automatically.

Accessibility

Pressable rows are announced as buttons with their title and description and support accessibility activation and Enter/Space on web. Rows have a minimum 48 dp height on Android; a one-line sm row is 46 pt on iOS and 46 px on web. Put independently interactive controls in rows without onPress so their semantics stay separate. Reduce Motion keeps scale at 1 and makes the surface change immediate.

Touch targets

Android rows are at least 48 dp tall. A one-line sm row is 46 pt tall on iOS and 46 px on web. A default row is at least 54 on every platform. Content can make rows taller. Keep pressable rows at least 48 dp wide on Android or 44 pt wide on iOS and 44 px wide on web. Give separate trailing controls their own full targets.

Part of a shared foundation

Use it in a screen

Compose Base List Row 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
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	2	10/28/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

BaseListRow.tsx

import Animated, {
  ReduceMotion,
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  withTiming,
} from 'react-native-reanimated';
import {
  baseActivationProps,
  useBaseReducedMotion,
  alpha,
  BaseThemeProvider,
  spring,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, { Children } from 'react';
import { Platform, Text, View, type ViewProps } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { scheduleOnRN } from 'react-native-worklets';

export type BaseListRowProps = Omit<ViewProps, 'children'> & {
  title: string;
  description?: string;
  leading?: React.ReactNode;
  trailing?: React.ReactNode;
  onPress?: () => void;
  variant?: 'default' | 'outline' | 'muted';
  size?: 'default' | 'sm';
  theme?: BaseTheme;
};
export type BaseListGroupProps = ViewProps & {
  inset?: boolean;
  theme?: BaseTheme;
};
export type BaseListRowIconProps = ViewProps & { theme?: BaseTheme };

export function BaseListRow({
  title,
  description,
  leading,
  trailing,
  onPress,
  variant = 'default',
  size = 'default',
  theme: override,
  style,
  ...props
}: BaseListRowProps) {
  const theme = useBaseTheme(override);
  const { colors } = theme;
  const reduced = useBaseReducedMotion();
  const pressScale = useSharedValue(1);
  const fill = useSharedValue(0);
  const pressSpring = spring(theme, 'press');
  const choiceScale = theme.motion.scales.choice;
  const fillTiming = { duration: reduced ? 0 : 100 };
  const idleColor =
    variant === 'muted' ? alpha(colors.muted, 0.5) : alpha(colors.accent, 0);
  const activeColor = alpha(colors.accent, 0.5);
  const tap = Gesture.Tap()
    .enabled(
      !!onPress &&
        !props.accessibilityState?.disabled &&
        !props['aria-disabled'],
    )
    .onBegin(() => {
      pressScale.set(
        reduced
          ? 1
          : withSpring(choiceScale, {
              ...pressSpring,
              reduceMotion: ReduceMotion.Never,
            }),
      );
      fill.set(
        withTiming(1, { ...fillTiming, reduceMotion: ReduceMotion.Never }),
      );
    })
    .onFinalize(() => {
      pressScale.set(
        reduced
          ? 1
          : withSpring(1, { ...pressSpring, reduceMotion: ReduceMotion.Never }),
      );
      fill.set(
        withTiming(0, { ...fillTiming, reduceMotion: ReduceMotion.Never }),
      );
    })
    .onEnd((_event, success) => {
      if (success && onPress) scheduleOnRN(onPress);
    });
  const animated = useAnimatedStyle(() => ({
    transform: [{ scale: pressScale.get() }],
    backgroundColor: interpolateColor(
      fill.get(),
      [0, 1],
      [idleColor, activeColor],
    ),
  }));
  const row = (
    <Animated.View
      {...props}
      aria-checked={props['aria-checked'] ?? props.accessibilityState?.checked}
      aria-selected={
        props['aria-selected'] ?? props.accessibilityState?.selected
      }
      aria-expanded={
        props['aria-expanded'] ?? props.accessibilityState?.expanded
      }
      aria-disabled={
        props['aria-disabled'] ?? props.accessibilityState?.disabled
      }
      aria-busy={props['aria-busy'] ?? props.accessibilityState?.busy}
      accessible={onPress ? true : props.accessible}
      accessibilityRole={onPress ? 'button' : props.accessibilityRole}
      accessibilityLabel={
        props.accessibilityLabel ??
        (onPress ? [title, description].filter(Boolean).join('. ') : undefined)
      }
      onAccessibilityTap={onPress ?? props.onAccessibilityTap}
      accessibilityActions={
        onPress ? [{ name: 'activate' }] : props.accessibilityActions
      }
      onAccessibilityAction={(event) => {
        if (onPress && event.nativeEvent.actionName === 'activate') onPress();
        else props.onAccessibilityAction?.(event);
      }}
      {
        /* RN Web forwards DOM events rather than native event objects. */
        ...((onPress && Platform.OS === 'web'
          ? {
              tabIndex: 0,
              onKeyDown: (event: React.KeyboardEvent) => {
                if (event.key === 'Enter' || event.key === ' ') {
                  event.preventDefault();
                  onPress();
                }
              },
            }
          : {}) as object)
      }
      {
        /* RN Web forwards DOM events rather than native event objects. */
        ...((onPress
          ? baseActivationProps(onPress, props.accessibilityState?.disabled)
          : {}) as object)
      }
      style={[
        {
          minHeight: Platform.OS === 'android' ? 48 : 44,
          borderRadius: theme.radius.md,
          borderWidth: 1,
          borderColor: variant === 'outline' ? colors.border : 'transparent',
          paddingHorizontal: 16,
          paddingVertical: size === 'sm' ? 12 : 16,
          gap: size === 'sm' ? 10 : 16,
          flexDirection: 'row',
          alignItems: description ? 'flex-start' : 'center',
        },
        style,
        animated,
      ]}
    >
      <BaseThemeProvider theme={theme}>
        {leading ? (
          <View style={{ paddingTop: description ? 2 : 0, flexShrink: 0 }}>
            {leading}
          </View>
        ) : null}
        <View style={{ flex: 1, minWidth: 0 }}>
          <Text
            style={{
              fontFamily: theme.fonts.medium,
              fontSize: 14,
              lineHeight: 20,
              color: colors.foreground,
            }}
          >
            {title}
          </Text>
          {description ? (
            <Text
              numberOfLines={2}
              style={{
                fontFamily: theme.fonts.regular,
                fontSize: 14,
                lineHeight: 20,
                color: colors.mutedForeground,
              }}
            >
              {description}
            </Text>
          ) : null}
        </View>
        {trailing ? (
          <View style={{ paddingTop: description ? 2 : 0, flexShrink: 0 }}>
            {trailing}
          </View>
        ) : null}
      </BaseThemeProvider>
    </Animated.View>
  );
  return onPress ? <GestureDetector gesture={tap}>{row}</GestureDetector> : row;
}

export function BaseListGroup({
  children,
  inset = false,
  theme: override,
  style,
  ...props
}: BaseListGroupProps) {
  const theme = useBaseTheme(override);
  const items = Children.toArray(children);
  return (
    <BaseThemeProvider theme={theme}>
      <View
        {...props}
        style={[
          {
            borderRadius: inset ? theme.radius.xl : undefined,
            borderWidth: inset ? 1 : 0,
            borderColor: theme.colors.border,
            backgroundColor: inset ? theme.colors.card : undefined,
          },
          style,
        ]}
      >
        {items.map((child, index) => (
          <React.Fragment
            key={React.isValidElement(child) ? (child.key ?? index) : index}
          >
            {index > 0 ? (
              <View
                aria-hidden
                style={{ height: 1, backgroundColor: theme.colors.border }}
              />
            ) : null}
            {child}
          </React.Fragment>
        ))}
      </View>
    </BaseThemeProvider>
  );
}

export function BaseListRowIcon({
  theme: override,
  style,
  ...props
}: BaseListRowIconProps) {
  const theme = useBaseTheme(override);
  return (
    <View
      {...props}
      style={[
        {
          width: 32,
          height: 32,
          borderRadius: theme.radius.sm,
          borderWidth: 1,
          borderColor: theme.colors.border,
          backgroundColor: theme.colors.muted,
          alignItems: 'center',
          justifyContent: 'center',
        },
        style,
      ]}
    />
  );
}

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-list-row",
  "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"
  }
}