Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/AppAndFlow/react-native-ease/llms.txt

Use this file to discover all available pages before exploring further.

Timing animations transition from one value to another over a fixed duration with an easing curve. They are the default animation type in react-native-ease and map directly to CABasicAnimation on iOS and ObjectAnimator on Android. 
<EaseView
  animate={{ opacity: isVisible ? 1 : 0 }}
  transition={{ type: 'timing', duration: 300, easing: 'easeOut' }}
/>

​
Parameters

ParameterTypeDefaultDescription
type'timing'—Selects timing animation
durationnumber300Duration in milliseconds
easingEasingType'easeInOut'Easing curve — preset name or [x1, y1, x2, y2] cubic bezier
delaynumber0Delay in milliseconds before the animation starts
loop'repeat' | 'reverse'—'repeat' restarts from the beginning, 'reverse' alternates direction

​
Easing Presets

ValueBehaviorCubic bezier
'linear'Constant speed[0, 0, 1, 1]
'easeIn'Starts slow, accelerates[0.42, 0, 1, 1]
'easeOut'Starts fast, decelerates[0, 0, 0.58, 1]
'easeInOut'Slow start and end, fast middle (default)[0.42, 0, 0.58, 1]

​
Custom Cubic Bezier

Pass a [x1, y1, x2, y2] tuple for a custom easing curve. The values correspond to the two control points of the bezier curve and match the CSS cubic-bezier() function exactly.
  • x-values (x1, x2) must be between 0 and 1
  • y-values (y1, y2) can exceed 0–1 to produce overshoot or anticipation effects

​
Examples

​
Basic timing fade

<EaseView
  animate={{ opacity: isVisible ? 1 : 0 }}
  transition={{ type: 'timing', duration: 300, easing: 'easeOut' }}
/>

​
Material Design standard easing

<EaseView
  animate={{ opacity: isVisible ? 1 : 0 }}
  transition={{ type: 'timing', duration: 300, easing: [0.4, 0, 0.2, 1] }}
/>

​
Overshoot easing

Y-values outside 0–1 produce overshoot. The curve below creates a spring-like snap past the target before settling. 
<EaseView
  animate={{ scale: active ? 1.2 : 1 }}
  transition={{ type: 'timing', duration: 500, easing: [0.68, -0.55, 0.265, 1.55] }}
/>

​
Delayed start

<EaseView
  initialAnimate={{ opacity: 0, translateY: 20 }}
  animate={{ opacity: 1, translateY: 0 }}
  transition={{ type: 'timing', duration: 300, easing: 'easeOut', delay: 150 }}
/>
Choose 'easeOut' for elements entering the screen (fast start feels responsive), 'easeIn' for elements leaving (slow start, then gone), and 'easeInOut' for in-place transitions where smoothness matters more than speed.

Build docs developers (and LLMs) love

Get started for freeTalk to us