Skip to main content
This guide walks you from zero to a working animation as fast as possible.
1

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.
2

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.
3

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.
4

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] }}
5

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

PropWhat it does
animateTarget values for animated properties. Changes trigger animations.
initialAnimateStarting values on mount. Animates to animate on first render.
transitionAnimation config: { type: 'timing' } or { type: 'spring' }. Defaults to timing 300ms.
onTransitionEndCallback fired when all animations complete with { finished: boolean }.
transformOriginPivot 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.

Build docs developers (and LLMs) love

Get started for freeTalk to us