Per-Property Transitions - react-native-ease

By default, a single transition config applies to all animated properties. When you need finer control — for example, a snappy spring for movement but a quick fade for opacity — pass a TransitionMap instead of a single config. A TransitionMap maps property categories to individual transition configs:

<EaseView
  animate={{ opacity: visible ? 1 : 0, translateY: visible ? 0 : 30 }}
  transition={{
    opacity: { type: 'timing', duration: 150, easing: 'easeOut' },
    transform: { type: 'spring', damping: 12, stiffness: 200 },
  }}
/>

Category keys

Key	Properties covered
`default`	Fallback for any category not explicitly listed in the map
`transform`	`translateX`, `translateY`, `scaleX`, `scaleY`, `rotate`, `rotateX`, `rotateY`
`opacity`	`opacity`
`borderRadius`	`borderRadius`
`backgroundColor`	`backgroundColor`

Using `default` as a fallback

When a category is not listed in the map, the library falls back to the default key. If no default key is present either, the library default (timing 300ms easeInOut) applies.

<EaseView
  animate={{ opacity: 1, scale: 1.2, translateY: -20 }}
  transition={{
    default: { type: 'spring', damping: 15, stiffness: 120 },
    opacity: { type: 'timing', duration: 200, easing: 'easeOut' },
  }}
/>

In this example, scale and translateY (both in the transform category) use the spring defined under default. opacity uses its own timing config.

When to use per-property vs a single config

Scenario	Recommendation
All properties should move the same way	Single config
Opacity should fade faster than transforms spring	Per-property map
Background color needs timing while transforms spring	Per-property map
You want a global fallback with one override	`default` + specific key

On Android, backgroundColor is animated with ValueAnimator.ofArgb(), which only supports timing transitions. If you specify type: 'spring' for the backgroundColor key, it silently falls back to timing with a 300ms duration.

Powered by Mintlify

Auto-generate your docs