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 can loop indefinitely. Set the loop option on a timing transition to one of two modes:
  • 'repeat' — restarts the animation from the beginning each cycle
  • 'reverse' — alternates direction, animating forward then backward
Spring animations do not support looping. loop is only available on type: 'timing' transitions.
initialAnimate is required for looping. It defines the starting value the animation resets to (for 'repeat') or reverses from (for 'reverse'). Without it, the loop has no defined start point.

​
Examples

​
Pulsing opacity

Uses loop: 'reverse' to fade between 0.3 and 1 continuously. 
<EaseView
  initialAnimate={{ opacity: 0.3 }}
  animate={{ opacity: 1 }}
  transition={{ type: 'timing', duration: 1000, easing: 'easeInOut', loop: 'reverse' }}
/>

​
Marquee-style scroll

Uses loop: 'repeat' to scroll content from its starting position to -300 pixels, then jump back and repeat. 
<EaseView
  initialAnimate={{ translateX: 0 }}
  animate={{ translateX: -300 }}
  transition={{ type: 'timing', duration: 3000, easing: 'linear', loop: 'repeat' }}
/>

​
Loop modes compared

ModeBehaviorCommon use cases
'repeat'Jumps back to initialAnimate value and plays againMarquee scroll, progress indicators
'reverse'Plays forward to animate, then backward to initialAnimate, and repeatsPulse, breathe, shimmer

Build docs developers (and LLMs) love

Get started for freeTalk to us