Fix transform in exiting animation

[m-bert]

Summary

Right now, if element has any transform (for example translateX), exiting won't work correctly. This happens because during animations we write transform directly into components' style to avoid problems with delay. On the other hand, exiting works with snapshots which already take care about components position, including transforms.

In order to fix that we can ignore creating animation with transform and reset dummy.style.transform.

Test plan

Test code

import React from 'react';
import { StyleSheet, View, Text, Pressable } from 'react-native';
import Animated, {
  FadeIn,
  FadeInDown,
  FadeOutDown,
} from 'react-native-reanimated';

export default function App() {
  const [showExiting, setShowExiting] = React.useState(false);

  return (
    <View style={styles.container}>
      {showExiting ? (
        <View style={[styles.box, styles.exitingBox]} key={'FadeOutDown'}>
          <Text style={styles.exitingText}>{'FadeOutDown'}</Text>
        </View>
      ) : (
        <Animated.View
          entering={FadeIn}
          exiting={FadeOutDown}
          key={'FadeIn'}
          style={[
            styles.box,
            styles.enteringBox,
            { transform: [{ translateX: 20 }] },
          ]}>
          <Text style={styles.enteringText}>{'FadeIn'}</Text>
        </Animated.View>
      )}

      <Pressable
        style={styles.button}
        onPress={() => setShowExiting(!showExiting)}>
        <Text style={{ color: 'white' }}> Click me! </Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    height: 50,
    width: 250,
    margin: 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
  enteringBox: {
    backgroundColor: '#b58df1',
  },
  enteringText: {
    fontSize: 16,
    color: 'white',
  },
  exitingBox: {
    borderColor: '#b58df1',
    borderStyle: 'dashed',
    borderWidth: 1,
  },
  exitingText: {
    fontSize: 16,
    color: '#b58df1',
  },
  button: {
    width: 100,
    height: 40,
    marginTop: 50,
    backgroundColor: '#b58df1',
    borderRadius: 5,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
});

[mrousavy]

Do the snapshots also take scale into account? Trying to debug #5475 rn...