(feature) css.keyframes() and CSS animations

[necolas]

Describe the feature request

Support css.keyframes on native. We can use Animated to polyfill this API and the following CSS props:

• animationDelay
• animationDirection
• animationDuration
• animationFillMode
• animationIterationCount
• animationName
• animationPlayState
• animationTimingFunction

[burhanyilmaz]

What you think about reanimated's keyframe animation? is it suitable for it?
https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/keyframe-animations/

import { Keyframe } from 'react-native-reanimated';

const keyframe = new Keyframe({
  0: {
    transform: [{ rotate: '0deg' }],
  },
  100: {
    transform: [{ rotate: '45deg' }],
  },
});

import { Keyframe } from 'react-native-reanimated';

const keyframe = new Keyframe({
  from: {
    transform: [{ rotate: '0deg' }],
  },
  to: {
    transform: [{ rotate: '45deg' }],
  },
});

[nandorojo]

One idea for this feature is to allow a pluggable View / Text component from the root so that one can use reanimated.

For example, in the root of the app, we could define some component that replaces the underlying View/Text used by RSD on native in the case of an animation. Something like:

import { configureAnimationComponents } from 'react-strict-dom'
import Animated from 'react-native-reanimated'

configureAnimationComponents({
  components: { View: Animated.View, ... },
  getKeyframeProps: (animation) => ({ style: ... })
})

Not married to any API, but this could be an interesting way to do it, where you 1) define the components, and 2) define the way to get the props to them based on the animation the user wants.

On web, this wouldn't necessarily be needed and would potentially mess with tree shaking.

Open to alternatives, but I've liked Tamagui's "animation driver" approach and think it could be an interesting addition here until the day that RN's actual animations are performant.

[MoOx]

reanimated v4 currently support css transitions and animations.