Quickstart

This guide walks you from zero to a working animation as fast as possible.

Install react-native-ease

npm install react-native-ease

Requires React Native 0.76+ with the new architecture enabled. See Installation for full setup details.

Import EaseView

Replace your View import with EaseView:

import { EaseView } from 'react-native-ease';

EaseView accepts all standard ViewProps — children, style, event handlers. You can use it anywhere you’d use a View.

Add an animate prop

Pass target values to the animate prop. When those values change, the view animates to them:

import { useState } from 'react';
import { Button } from 'react-native';
import { EaseView } from 'react-native-ease';

export function FadeExample() {
  const [visible, setVisible] = useState(true);

  return (
    <>
      <EaseView
        animate={{ opacity: visible ? 1 : 0 }}
        style={{ width: 200, height: 200, backgroundColor: '#3B82F6' }}
      />
      <Button title="Toggle" onPress={() => setVisible(v => !v)} />
    </>
  );
}

Press the button — the view fades in and out. Without a transition prop, Ease defaults to timing with a 300ms easeInOut curve.

Configure the transition

Use the transition prop to control how the animation plays:

<EaseView
  animate={{ opacity: visible ? 1 : 0 }}
  transition={{ type: 'timing', duration: 300, easing: 'easeOut' }}
  style={{ width: 200, height: 200, backgroundColor: '#3B82F6' }}
/>

The easing field accepts a preset name ('linear', 'easeIn', 'easeOut', 'easeInOut') or a [x1, y1, x2, y2] cubic bezier tuple:

// Material Design standard easing
transition={{ type: 'timing', duration: 300, easing: [0.4, 0, 0.2, 1] }}

Try a spring animation

Swap type: 'timing' for type: 'spring' for physics-based motion. Springs are great for interactive elements because they feel natural and are interruptible:

<EaseView
  animate={{ translateX: isOpen ? 200 : 0 }}
  transition={{ type: 'spring', damping: 15, stiffness: 120, mass: 1 }}
  style={{ width: 80, height: 80, backgroundColor: '#3B82F6', borderRadius: 8 }}
/>

Rapidly toggling isOpen is fine — each change smoothly redirects the animation from its current position.

More examples

Fade and slide on mount

Use initialAnimate to set starting values. On mount, the view starts at those values and animates to animate:

<EaseView
  initialAnimate={{ opacity: 0, translateY: 20 }}
  animate={{ opacity: 1, translateY: 0 }}
  transition={{ type: 'spring', damping: 15, stiffness: 120, mass: 1 }}
  style={styles.card}
>
  <Text>Slides up and fades in on mount</Text>
</EaseView>

Scale on press

import { useState } from 'react';
import { Pressable } from 'react-native';
import { EaseView } from 'react-native-ease';

export function ScaleButton({ children }) {
  const [pressed, setPressed] = useState(false);

  return (
    <Pressable
      onPressIn={() => setPressed(true)}
      onPressOut={() => setPressed(false)}
    >
      <EaseView
        animate={{ scale: pressed ? 0.95 : 1 }}
        transition={{ type: 'spring', damping: 20, stiffness: 300, mass: 1 }}
        style={styles.button}
      >
        {children}
      </EaseView>
    </Pressable>
  );
}

Staggered list entrance

Use delay to stagger animations across multiple elements:

{items.map((item, i) => (
  <EaseView
    key={item.id}
    initialAnimate={{ opacity: 0, translateY: 20 }}
    animate={{ opacity: 1, translateY: 0 }}
    transition={{ type: 'timing', duration: 300, delay: i * 100 }}
  >
    <Text>{item.label}</Text>
  </EaseView>
))}

Animated background color

<EaseView
  animate={{ backgroundColor: isActive ? '#3B82F6' : '#E5E7EB' }}
  transition={{ type: 'timing', duration: 300 }}
  style={styles.card}
>
  <Text>Tap to change color</Text>
</EaseView>

Key props at a glance

Prop	What it does
`animate`	Target values for animated properties. Changes trigger animations.
`initialAnimate`	Starting values on mount. Animates to `animate` on first render.
`transition`	Animation config: `{ type: 'timing' }` or `{ type: 'spring' }`. Defaults to timing 300ms.
`onTransitionEnd`	Callback fired when all animations complete with `{ finished: boolean }`.
`transformOrigin`	Pivot point for scale/rotation as 0–1 fractions. Default: `{ x: 0.5, y: 0.5 }`.

For the full prop list and all animatable properties, see the API Reference.

Get Started

Animations

Features

Guides

More examples

Fade and slide on mount

Scale on press

Staggered list entrance

Animated background color

Key props at a glance

​More examples

​Fade and slide on mount

​Scale on press

​Staggered list entrance

​Animated background color

​Key props at a glance

More examples

Fade and slide on mount

Scale on press

Staggered list entrance

Animated background color

Key props at a glance