Native Animation

Sign in Get all-access

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

npx nativeanimation add base-animated-icon

Base Animated Icon

React Native Animated Icon Component

Animated stroke icons that ring, draw, and turn, with configurable icon, size, color, and stroke width.

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

Animated stroke icons that ring, draw, and turn, with configurable icon, size, color, and stroke width.

How it works

Each icon is drawn with react-native-svg from Lucide's paths.
Changing trigger plays its motion once: the bell swings (0 → 20° → −10° … in 900 ms) while its clapper sways, the trend line draws itself and its arrow pops in, the refresh arrow turns 45° and back on a spring, the double check draws its two strokes in turn.
Stroke drawing animates strokeDashoffset with precomputed path lengths.
Size, color and stroke width match Lucide's API so it sits next to regular lucide-react-native icons.

Install

npx nativeanimation add base-animated-icon

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

npx expo install react-native-reanimated react-native-worklets react-native-svg

Usage

import { BaseAnimatedIcon } from './base-animated-icon';

const [ring, setRing] = useState(0);
<Pressable onPress={() => setRing((n) => n + 1)} accessibilityLabel="Notifications">
  <BaseAnimatedIcon name="bell" trigger={ring} size={20} />
</Pressable>

Inside a button, playing on each sync:

<BaseButton variant="outline" onPress={sync} leading={<BaseAnimatedIcon name="refresh-cw" size={16} trigger={syncs} />}>
  Sync now
</BaseButton>

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
`name`	`'bell' \| 'trending-up' \| 'refresh-cw' \| 'check-check'`	—	Which icon.
`trigger`	`number`	`0`	Change it to play the motion once.
`animateOnMount`	`boolean`	`false`	Plays once when it appears.
`size`	`number`	`20`	Width and height.
`color`	`string`	foreground	Stroke color.
`strokeWidth`	`number`	`2`	Stroke width on Lucide's 24 grid.
`accessibilityLabel`	`string`	—	Set it when the icon carries meaning on its own.
`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

Decorative by default (hidden from screen readers unless you pass accessibilityLabel). With Reduce Motion on, the icon stays still.

Part of a shared foundation

Use it in a screen

Compose Base Animated Icon 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-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	1	10/27/2026	iOS, Web, Android	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	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

BaseAnimatedIcon.tsx

import Animated, {
  ReduceMotion,
  Easing,
  useAnimatedProps,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withSequence,
  withSpring,
  withTiming,
  type SharedValue,
} from 'react-native-reanimated';
import {
  useBaseReducedMotion,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, { useEffect } from 'react';

import Svg, { Path } from 'react-native-svg';

export type BaseAnimatedIconName =
  'bell' | 'trending-up' | 'refresh-cw' | 'check-check';

export type BaseAnimatedIconProps = {
  name: BaseAnimatedIconName;
  /** Change this value (a counter works well) to play the animation once. */
  trigger?: number;
  /** Plays once when mounted. */
  animateOnMount?: boolean;
  size?: number;
  color?: string;
  strokeWidth?: number;
  theme?: BaseTheme;
  testID?: string;
  accessibilityLabel?: string;
};

const AnimatedPath = Animated.createAnimatedComponent(Path);
const easeInOut = Easing.bezier(0.42, 0, 0.58, 1);
const easeOut = Easing.bezier(0, 0, 0.58, 1);

// Keyframes spread evenly over a duration.
function keyframes(values: number[], duration: number, easing = easeInOut) {
  const step = duration / (values.length - 1);
  const [, ...rest] = values;
  return withSequence(
    ReduceMotion.Never,
    ...rest.map((v) =>
      withTiming(v, {
        reduceMotion: ReduceMotion.Never,
        duration: step,
        easing,
      }),
    ),
  );
}

// Path data from Lucide (ISC). Lengths are precomputed for the stroke-draw effect.
const PATHS = {
  bellBody:
    'M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326',
  bellClapper: 'M10.268 21a2 2 0 0 0 3.464 0',
  trendLine: 'M2 17l6.5-6.5 5 5L22 7',
  trendTip: 'M16 7h6v6',
  refresh: [
    'M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8',
    'M21 3v5h-5',
    'M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16',
    'M8 16H3v5',
  ],
  check1: 'm2 12 5 5L18 6',
  check2: 'm13 16 1.5 1.5L22 10',
};
const LENGTH = { trendLine: 28.3, check1: 22.7, check2: 12.8 };

export function BaseAnimatedIcon({
  name,
  trigger = 0,
  animateOnMount = false,
  size = 20,
  color,
  strokeWidth = 2,
  theme: override,
  testID,
  accessibilityLabel,
}: BaseAnimatedIconProps) {
  const theme = useBaseTheme(override);
  const stroke = color ?? theme.colors.foreground;
  const reduced = useBaseReducedMotion();

  // a: rotation or scale of the whole icon, b: secondary part, c/d: stroke-draw progress.
  const a = useSharedValue(name === 'check-check' ? 1 : 0);
  const b = useSharedValue(name === 'trending-up' ? 1 : 0);
  const c = useSharedValue(1);
  const d = useSharedValue(1);
  const played = React.useRef(false);

  useEffect(() => {
    if (!played.current) {
      played.current = true;
      if (!animateOnMount) return;
    }
    if (reduced) return;
    switch (name) {
      case 'bell':
        a.set(keyframes([0, 20, -10, 10, -5, 3, 0], 900));
        b.set(keyframes([0, -6, 5, -5, 4, -3, 2, 0], 1100));
        break;
      case 'trending-up':
        c.set(0);
        c.set(
          withTiming(1, {
            reduceMotion: ReduceMotion.Never,
            duration: 500,
            easing: easeInOut,
          }),
        );
        b.set(0);
        b.set(
          withDelay(
            360,
            withTiming(1, {
              reduceMotion: ReduceMotion.Never,
              duration: 240,
              easing: easeOut,
            }),
            ReduceMotion.Never,
          ),
        );
        break;
      case 'refresh-cw':
        a.set(
          withSequence(
            ReduceMotion.Never,
            withSpring(45, {
              reduceMotion: ReduceMotion.Never,
              stiffness: 150,
              damping: 25,
              mass: 1,
            }),
            withSpring(0, {
              reduceMotion: ReduceMotion.Never,
              stiffness: 150,
              damping: 25,
              mass: 1,
            }),
          ),
        );
        break;
      case 'check-check':
        a.set(keyframes([1, 1.1, 1], 800));
        c.set(0);
        c.set(
          withTiming(1, {
            reduceMotion: ReduceMotion.Never,
            duration: 600,
            easing: easeInOut,
          }),
        );
        d.set(0);
        d.set(
          withDelay(
            200,
            withTiming(1, {
              reduceMotion: ReduceMotion.Never,
              duration: 600,
              easing: easeInOut,
            }),
            ReduceMotion.Never,
          ),
        );
        break;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [trigger]);

  const unit = size / 24;
  const wholeStyle = useAnimatedStyle(() => {
    if (name === 'bell' || name === 'refresh-cw')
      return { transform: [{ rotate: `${a.get()}deg` }] };
    if (name === 'check-check') return { transform: [{ scale: a.get() }] };
    return {};
  });
  const partStyle = useAnimatedStyle(() => {
    if (name === 'bell') return { transform: [{ translateX: b.get() * unit }] };
    if (name === 'trending-up')
      return { opacity: b.get(), transform: [{ scale: 0.3 + 0.7 * b.get() }] };
    return {};
  });

  const svgProps = {
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke,
    strokeWidth,
    strokeLinecap: 'round' as const,
    strokeLinejoin: 'round' as const,
  };
  const layer = { position: 'absolute' as const, top: 0, left: 0 };

  return (
    <Animated.View
      testID={testID}
      accessible={!!accessibilityLabel}
      accessibilityLabel={accessibilityLabel}
      style={[
        {
          width: size,
          height: size,
          transformOrigin: name === 'bell' ? 'top' : 'center',
        },
        wholeStyle,
      ]}
    >
      {name === 'bell' ? (
        <>
          <Svg {...svgProps} style={layer}>
            <Path d={PATHS.bellBody} />
          </Svg>
          <Animated.View style={[layer, partStyle]}>
            <Svg {...svgProps}>
              <Path d={PATHS.bellClapper} />
            </Svg>
          </Animated.View>
        </>
      ) : null}
      {name === 'trending-up' ? (
        <>
          <Svg {...svgProps} style={layer}>
            <DrawnPath
              d={PATHS.trendLine}
              length={LENGTH.trendLine}
              progress={c}
            />
          </Svg>
          <Animated.View
            style={[
              layer,
              { width: size, height: size, transformOrigin: '91.7% 29.2%' },
              partStyle,
            ]}
          >
            <Svg {...svgProps}>
              <Path d={PATHS.trendTip} />
            </Svg>
          </Animated.View>
        </>
      ) : null}
      {name === 'refresh-cw' ? (
        <Svg {...svgProps}>
          {PATHS.refresh.map((p) => (
            <Path key={p} d={p} />
          ))}
        </Svg>
      ) : null}
      {name === 'check-check' ? (
        <Svg {...svgProps}>
          <DrawnPath d={PATHS.check1} length={LENGTH.check1} progress={c} />
          <DrawnPath d={PATHS.check2} length={LENGTH.check2} progress={d} />
        </Svg>
      ) : null}
    </Animated.View>
  );
}

function DrawnPath({
  d,
  length,
  progress,
}: {
  d: string;
  length: number;
  progress: SharedValue<number>;
}) {
  const animatedProps = useAnimatedProps(() => ({
    strokeDashoffset: length * (1 - progress.get()),
    strokeOpacity: Math.min(1, progress.get() * 4),
  }));
  return (
    <AnimatedPath
      d={d}
      strokeDasharray={[length, length]}
      animatedProps={animatedProps}
    />
  );
}

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-animated-icon",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme"
  ],
  "dependencies": {
    "react-native-reanimated": "4.7.1",
    "react-native-svg": "15.16.0",
    "react-native-worklets": "0.13.0"
  }
}