animationName

animationName lets you specify keyframes for the animation.

Loading...

Reference

function App() {
  return (
    <Animated.View
      style={{
        animationName: {
          '100%': {
            transform: [{ translateX: 100 }],
          },
        },
        animationDuration: '300ms',
      }}
    />
  );
}

Type definitions

import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';

type PlainStyle = ViewStyle & TextStyle & ImageStyle;

type CSSAnimationKeyframes<S extends object = PlainStyle> = Record<
  CSSAnimationKeyframeSelector,
  CSSAnimationKeyframeBlock<S>
>;

Values

<keyframes>

A JavaScript object with offset values used as keys and corresponding style properties as values. This object controls the intermediate steps of an animation by providing styles for animation steps. The keys of a keyframes object can be:

• <percentage> - a string which is a number between 0 and 100 followed by %,
• from - an alias for 0% offset,
• end- an alias for 100% offset.
• <number> - a floating-point number between 0 and 1.

Keyframes can be defined inline (and provided directly to animationName property) or as a separate variable:

const pulse: CSSAnimationKeyframes = {
  from: {
    transform: [{ scale: 0.8 }, { rotateZ: '-15deg' }],
  },
  to: {
    transform: [{ scale: 1.2 }, { rotateZ: '15deg' }],
  },
};

animationName: pulse,

<keyframes[]>

An array of keyframe objects. The order in this array corresponds to the array of style properties passed to the animationDuration.

animationName: [fadeInOut, moveLeft, bounce],
animationDuration: ['2.5s', '5s', '1s'],

none

No animation.

Example

Loading...

Remarks

• At minimum 1 keyframe is required to create an animation. Reanimated will take the current state of the element as the first keyframe.
• If multiple animations target the same property, the animation later in the array will override changes from the previous one.

Platform compatibility

Android	iOS	Web
✅	✅	✅