fix: animationName and animationDuration incorrectly mapping

Author: marklawlor

example/src/App.tsx

@@ -1,25 +1,14 @@
-import { StyleSheet, Text, View } from "react-native";
+import { Text, View } from "react-native";
 
 import { StatusBar } from "expo-status-bar";
 
 import "../global.css";
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text className="text-green-800 duration-[5s] transition-colors">
-        Hello world!!!
-      </Text>
+    <View className="flex-1 bg-white items-center justify-center">
+      <Text className="text-blue-800 animate-bounce">Hello world!!!</Text>
       <StatusBar style="auto" />
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

src/__tests__/compiler/compiler.test.tsx

@@ -258,7 +258,7 @@ test.skip("animations", () => {
                   animationDirection: ["normal"],
                   animationDuration: [1000],
                   animationFillMode: ["none"],
-                  animationIterationCount: [-1],
+                  animationIterationCount: ["infinite"],
                   animationName: [[{}, "animation", ["spin"], 1]],
                   animationPlayState: ["running"],
                   animationTimingFunction: ["linear"],

src/compiler/keyframes.ts

@@ -10,9 +10,9 @@ import type { StylesheetBuilder } from "./stylesheet";
 
 export function parseIterationCount(
   value: AnimationIterationCount[],
-): number[] {
+): (number | "infinite")[] {
   return value.map((value) => {
-    return value.type === "infinite" ? -1 : value.value;
+    return value.type === "infinite" ? value.type : value.value;
   });
 }
 

src/native/styles/resolve.ts

@@ -38,7 +38,6 @@ export type StyleResolver = (
 const functionResolvers = {
   ...shorthands,
   ...functions,
-  animationName: shorthands.animation,
   lineHeight,
   em,
   rem,

src/native/styles/shorthands/animation.ts

@@ -76,8 +76,6 @@ export const animation: StyleFunctionResolver = (
     return;
   }
 
-  animationShortHandTuples.pop();
-
   const nameTuple = animationShortHandTuples.find(
     (tuple) => tuple[1] === "animationName",
   );
@@ -121,3 +119,13 @@ export const animation: StyleFunctionResolver = (
 
   return applyShorthand(animationShortHandTuples);
 };
+
+export const animationName: StyleFunctionResolver = (
+  resolveValue,
+  value,
+  get,
+  options,
+) => {
+  const shorthand: any = animation(resolveValue, value, get, options);
+  return shorthand.animationName;
+};