transitionBehavior

transitionBehavior lets you determine whether the transition is applied to discrete properties. Defaults to normal which transitions only continuous properties and discards discrete properties.

Loading...

Reference

function App() {
  return (
    <Animated.View
      style={{
        transitionProperty: 'alignItems',
        transitionDuration: 500,
        transitionBehavior: 'allowDiscrete',
      }}
    />
  );
}

Type definitions

type CSSTransitionBehavior = 'normal' | 'allowDiscrete';

Values

allowDiscrete

Allows transitions to be applied to discrete properties, resulting in delayed changes.

normal

Doesn't allow transitions to be applied to discrete properties, resulting in changes applied immediately.

Example

Loading...

Remarks

• Discrete style properties (like flexDirection, justifyContent) can't be smoothly animated using the transitionProperty property. For example, you can't animate smoothly from alignItems: start to alignItems: center. You can use Layout Animations to animate discrete style properties instead.

• When using allowDiscrete the discrete properties flip between two values at the midpoint of the animation, except for the display property, which is immediately at the moment of the transition start.

Platform compatibility

Android	iOS	Web
✅	✅	✅