{"record":{"id":"02dd7b43249362de","repo":"necolas/react-native-web","slug":"invalid-css-keyframes-type-typeof-keyframesvalu","errorCode":null,"errorMessage":"Invalid CSS keyframes type: ${typeof keyframesValue}","messagePattern":"Invalid CSS keyframes type: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-native-web/src/exports/StyleSheet/compiler/index.js","lineNumber":496,"sourceCode":"        const rule = keyframes[stepName];\n        const block = createDeclarationBlock(rule);\n        return `${stepName}${block}`;\n      })\n      .join('') +\n    '}';\n\n  const rules = prefixes.map((prefix) => {\n    return `@${prefix}keyframes ${identifier}${steps}`;\n  });\n  return [identifier, rules];\n}\n\n/**\n * Create CSS keyframes rules and names from a StyleSheet keyframes object.\n */\nfunction processKeyframesValue(keyframesValue) {\n  if (typeof keyframesValue === 'number') {\n    throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);\n  }\n\n  const animationNames = [];\n  const rules = [];\n  const value = Array.isArray(keyframesValue)\n    ? keyframesValue\n    : [keyframesValue];\n\n  value.forEach((keyframes) => {\n    if (typeof keyframes === 'string') {\n      // Support external animation libraries (identifiers only)\n      animationNames.push(keyframes);\n    } else {\n      // Create rules for each of the keyframes\n      const [identifier, keyframesRules] = createKeyframes(keyframes);\n      animationNames.push(identifier);\n      rules.push(...keyframesRules);\n    }","sourceCodeStart":478,"sourceCodeEnd":514,"githubUrl":"https://github.com/necolas/react-native-web/blob/a9de220ba9e65bdea540fb5322ffb1da2b0bf442/packages/react-native-web/src/exports/StyleSheet/compiler/index.js#L478-L514","documentation":"processKeyframesValue compiles StyleSheet keyframes objects into CSS @keyframes. A keyframes value of type 'number' cannot be interpreted as keyframes, so the compiler throws. It signals that a non-keyframes object was passed where StyleSheet keyframes were expected.","triggerScenarios":"Passing a number as a keyframes value to StyleSheet.create or animationName composition, e.g. animationName: 300 or a numeric variable instead of a keyframes object/array.","commonSituations":"Confusing animationDuration (number) with animationName (keyframes); a dynamic value that resolves to a number; typos where a style value was pasted into the keyframes slot.","solutions":["Set animationName to a StyleSheet.keyframes({...}) result or a keyframes object, not a number.","Check the value bound to keyframesValue at runtime — fix whatever variable resolves to a number.","Use animation-duration styles for timing numbers instead of the keyframes slot."],"exampleFix":"// before\nStyleSheet.create({ anim: { animationName: 300, animationDuration: '2s' } })\n// after\nconst kf = StyleSheet.keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });\nStyleSheet.create({ anim: { animationName: kf, animationDuration: '2s' } })","handlingStrategy":"type-guard","validationCode":"function assertKeyframes(v) {\n  const ok = v && (Array.isArray(v) ? v.length > 0 : typeof v === 'object');\n  if (!ok) throw new TypeError('animationName/keyframes must be a keyframes object, got: ' + typeof v);\n}","typeGuard":"const isKeyframesValue = (v) => v != null && (Array.isArray(v) || (typeof v === 'object' && typeof v !== 'number'));","tryCatchPattern":"try { const styles = StyleSheet.create({ anim: { animationName: kf } }); } catch (e) { if (/Invalid CSS keyframes/.test(e.message)) console.error('keyframes must be an object/array, not a number'); }","preventionTips":["Only assign StyleSheet.keyframes(...) results to animationName","Keep durations in animationDuration/animationDelay, never in the keyframes slot","Type-check animationName values with Flow/TS where possible"],"tags":["react-native-web","stylesheet","keyframes","type-error"],"backgroundTag":"invalid-css-keyframes-type","analyzedSha":"a9de220ba9e65bdea540fb5322ffb1da2b0bf442","analyzedAt":"2026-09-01T10:01:09.883Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T15:18:49.778Z"}