Skip to main content
AnimateProps defines the set of properties that EaseView can animate. All properties are set as flat values — there is no transform array like in standard React Native styles. Properties not specified in animate default to their identity values (the value that produces no visible change — 0 for translations, 1 for scale, etc.).

​
Type definition

import type { ColorValue } from 'react-native';

type AnimateProps = {
  opacity?: number;
  translateX?: number;
  translateY?: number;
  scale?: number;
  scaleX?: number;
  scaleY?: number;
  rotate?: number;
  rotateX?: number;
  rotateY?: number;
  borderRadius?: number;
  backgroundColor?: ColorValue;
};

​
Properties

​
opacity
number
default:"1"
View opacity. Accepts values from 0 (fully transparent) to 1 (fully opaque).
<EaseView animate={{ opacity: isVisible ? 1 : 0 }} />
​
translateX
number
default:"0"
Horizontal translation in density-independent pixels. Positive values move the view right; negative values move it left.
<EaseView animate={{ translateX: isOpen ? 0 : -300 }} />
​
translateY
number
default:"0"
Vertical translation in density-independent pixels. Positive values move the view down; negative values move it up.
<EaseView animate={{ translateY: visible ? 0 : 20 }} />
​
scale
number
default:"1"
Uniform scale factor applied to both axes. 1 is normal size, 0.5 is half size, 2 is double size.This is a shorthand that sets both scaleX and scaleY. If scaleX or scaleY is also provided, those values override scale for their respective axis.
<EaseView animate={{ scale: active ? 1.05 : 1 }} />
​
scaleX
number
default:"1"
Horizontal scale factor. Overrides scale for the X axis when both are specified.
<EaseView animate={{ scaleX: expanded ? 1 : 0 }} />
​
scaleY
number
default:"1"
Vertical scale factor. Overrides scale for the Y axis when both are specified.
<EaseView animate={{ scaleY: expanded ? 1 : 0 }} />
​
rotate
number
default:"0"
Z-axis rotation in degrees. Positive values rotate clockwise.
<EaseView animate={{ rotate: isOpen ? 45 : 0 }} />
​
rotateX
number
default:"0"
X-axis rotation in degrees (3D perspective flip around the horizontal axis). Positive values tip the top of the view away from the viewer.
<EaseView animate={{ rotateX: flipped ? 180 : 0 }} />
​
rotateY
number
default:"0"
Y-axis rotation in degrees (3D perspective flip around the vertical axis). Positive values tip the right side of the view away from the viewer.
<EaseView animate={{ rotateY: flipped ? 180 : 0 }} />
​
borderRadius
number
default:"0"
Border radius in pixels. Uses hardware-accelerated clipping — ViewOutlineProvider + clipToOutline on Android and layer.cornerRadius + layer.masksToBounds on iOS. Children are clipped to the rounded bounds.Unlike React Native’s style-based borderRadius (which uses a Canvas drawable on Android), this clips children correctly and is GPU-accelerated.When borderRadius is in animate, any borderRadius in style is automatically stripped to avoid conflicts.
<EaseView
  animate={{ borderRadius: expanded ? 0 : 16 }}
  style={styles.card}
>
  <Image source={heroImage} style={styles.image} />
</EaseView>
​
backgroundColor
ColorValue
Background color. Accepts any React Native color value — hex strings, named colors, rgb(), rgba(), etc.When backgroundColor is in animate, any backgroundColor in style is automatically stripped to avoid conflicts.
On Android, backgroundColor animation uses ValueAnimator.ofArgb() which only supports timing transitions. If the active transition is type: 'spring', it silently falls back to timing with the default duration. On iOS, both timing and spring transitions work for background color.
<EaseView
  animate={{ backgroundColor: isActive ? '#3B82F6' : '#E5E7EB' }}
  transition={{ type: 'timing', duration: 300 }}
/>

​
Full example

<EaseView
  animate={{
    opacity: 1,
    translateX: 0,
    translateY: 0,
    scale: 1,       // shorthand for scaleX + scaleY
    scaleX: 1,      // overrides scale for X axis
    scaleY: 1,      // overrides scale for Y axis
    rotate: 0,      // Z-axis rotation in degrees
    rotateX: 0,     // X-axis rotation in degrees (3D)
    rotateY: 0,     // Y-axis rotation in degrees (3D)
    borderRadius: 12,
    backgroundColor: '#ffffff',
  }}
  transition={{ type: 'spring', damping: 15, stiffness: 120 }}
/>

​
Identity defaults

Properties omitted from animate use their identity values:
PropertyIdentity value
opacity1
translateX0
translateY0
scale1
scaleX1
scaleY1
rotate0
rotateX0
rotateY0
borderRadius0
backgroundColor'transparent'

​
scale shorthand behavior

scale is a convenience shorthand. When only scale is specified, it applies equally to both axes: 
// These two are equivalent:
<EaseView animate={{ scale: 1.2 }} />
<EaseView animate={{ scaleX: 1.2, scaleY: 1.2 }} />
When scale and an explicit scaleX or scaleY are both provided, the explicit value wins for that axis: 
// scaleX stays at 1.2, but scaleY is overridden to 0.8
<EaseView animate={{ scale: 1.2, scaleY: 0.8 }} />
  • EaseView — the component that accepts animate and initialAnimate
  • Transition — control the animation curve

Build docs developers (and LLMs) love

Get started for freeTalk to us