@yarmolenkod/react-native-animations

Ready-made React Native animation components, powered by Reanimated. JS/TS-only.

Installation

npm install @yarmolenkod/react-native-animations react-native-reanimated

Reanimated requires its Babel plugin. In your app's babel.config.js add react-native-worklets/plugin as the last plugin (Expo SDK 54+ already includes it via babel-preset-expo).

Usage

import { FadeIn, SlideIn } from '@yarmolenkod/react-native-animations';

<FadeIn>
  <Text>Hello</Text>
</FadeIn>;

<SlideIn direction="up" distance={24}>
  <Text>Slides up</Text>
</SlideIn>;

Components

| Component | Kind | Key props | | --------- | -------- | ------------------------------------ | | FadeIn | entrance | duration, delay | | SlideIn | entrance | direction, distance, duration, delay | | ScaleIn | entrance | from, duration, delay | | RotateIn | entrance | from, duration, delay | | FlipIn | entrance | axis, duration, delay | | ZoomIn | entrance | from, duration, delay | | Pulse | loop | minScale, maxScale, duration | | Bounce | loop | height, duration | | Shake | loop | distance, duration | | Spin | loop | duration, direction | | Flash | loop | minOpacity, duration | | Heartbeat | loop | scale, duration | | Swing | loop | angle, duration | | Float | loop | distance, duration |

All components accept style and wrap their children.

Configuration

Every component works with zero config, but accepts optional props for fine-tuning. All are backward compatible — omit them and nothing changes.

Shared by all:

| Prop | Type | Description | | -------------- | --------------------------------- | ----------------------------------------------------------- | | duration | number | Animation duration in ms. | | easing | EasingFunction | Easing curve, e.g. Easing.out(Easing.cubic). | | reduceMotion | 'system' \| 'always' \| 'never' | Override the OS reduce-motion setting (default 'system'). | | transition | Transition | Escape-hatch for spring physics / advanced timing. |

Entrance only (FadeIn, SlideIn, ScaleIn, RotateIn, FlipIn, ZoomIn):

| Prop | Type | Description | | ------------ | ------------ | ----------------------------------- | | delay | number | Delay before starting, in ms. | | onComplete | () => void | Called once the animation finishes. |

Loop only (Pulse, Bounce, Shake, Spin, Flash, Heartbeat, Swing, Float):

| Prop | Type | Description | | ------------ | ------------------- | ---------------------------------------------------------------- | | loop | boolean \| number | true/omitted = infinite, false = once, n = repeat n times. | | pingPong | boolean | Reverse every other repetition. | | onComplete | () => void | Called when a finite loop finishes (never for infinite loops). |

Examples

import { FadeIn, ScaleIn, Pulse } from '@yarmolenkod/react-native-animations';
import { Easing } from 'react-native-reanimated';

// Custom easing
<FadeIn duration={600} easing={Easing.out(Easing.cubic)} />

// Spring physics via the transition escape-hatch
<ScaleIn transition={{ type: 'spring', damping: 12, stiffness: 120 }} />

// Run a loop a fixed number of times
<Pulse loop={3} pingPong onComplete={() => console.log('done')} />

Notes: transition overrides the top-level duration/easing. A spring transition doesn't apply to Heartbeat (multi-step) or Spin (linear), and pingPong is ignored by Heartbeat. Changing only easing/transition on a running loop won't restart it.

License

MIT