{"record":{"id":"794c1bf53da6ffc0","repo":"necolas/react-native-web","slug":"stylesheet-compose-only-accepts-2-arguments-rec","errorCode":null,"errorMessage":"StyleSheet.compose() only accepts 2 arguments, received ${len}: ${JSON.stringify(readableStyles)}","messagePattern":"StyleSheet\\.compose\\(\\) only accepts 2 arguments, received (.+?): (.+?)","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-native-web/src/exports/StyleSheet/index.js","lineNumber":109,"sourceCode":"        }\n        compiledStyles = compileAndInsertAtomic(styleObj);\n      }\n      staticStyleMap.set(styleObj, compiledStyles);\n    }\n  });\n  return styles;\n}\n\n/**\n * compose\n */\nfunction compose(style1: any, style2: any): any {\n  if (process.env.NODE_ENV !== 'production') {\n    /* eslint-disable prefer-rest-params */\n    const len = arguments.length;\n    if (len > 2) {\n      const readableStyles = [...arguments].map((a) => flatten(a));\n      throw new Error(\n        `StyleSheet.compose() only accepts 2 arguments, received ${len}: ${JSON.stringify(\n          readableStyles\n        )}`\n      );\n    }\n    /* eslint-enable prefer-rest-params */\n    /*\n    console.warn(\n      'StyleSheet.compose(a, b) is deprecated; use array syntax, i.e., [a,b].'\n    );\n    */\n  }\n  return [style1, style2];\n}\n\n/**\n * flatten\n */","sourceCodeStart":91,"sourceCodeEnd":127,"githubUrl":"https://github.com/necolas/react-native-web/blob/a9de220ba9e65bdea540fb5322ffb1da2b0bf442/packages/react-native-web/src/exports/StyleSheet/index.js#L91-L127","documentation":"StyleSheet.compose merges exactly two styles (mirroring RN's variadic-free API and enabling caching of pairs). Called with more than 2 arguments in development, it throws, showing the flattened styles for debugging. Production builds skip the check.","triggerScenarios":"StyleSheet.compose(a, b, c, ...) with 3+ arguments in a non-production build.","commonSituations":"Assuming compose is variadic like array concat or RN's flatten; refactoring code from flatten to compose; spreading an array of styles into compose.","solutions":["Compose pairwise: StyleSheet.compose(a, StyleSheet.compose(b, c)).","Use StyleSheet.flatten([...]) or an array style prop (style={[a, b, c]}) for many styles.","Guard spread usage so it cannot exceed 2 items, or switch to array styles."],"exampleFix":"// before\nStyleSheet.compose(a, b, c)\n// after\nstyle={[a, b, c]} // or StyleSheet.flatten([a, b, c])","handlingStrategy":"validation","validationCode":"function safeCompose(...styles) {\n  if (styles.length > 2) throw new RangeError('compose takes 2 args; use StyleSheet.flatten([...]) for more');\n  return StyleSheet.compose(styles[0], styles[1]);\n}","typeGuard":"null","tryCatchPattern":"try { s = StyleSheet.compose(a, b, c); } catch (e) { if (/only accepts 2 arguments/.test(e.message)) s = StyleSheet.flatten([a, b, c]); else throw e; }","preventionTips":["Remember compose is strictly binary; use array style props for N styles","Never spread an arbitrary-length array into StyleSheet.compose","Prefer style={[a, b, c]} idiom in RN-web code"],"tags":["react-native-web","stylesheet","argument-count","dev-only"],"backgroundTag":"invalid-argument-count","analyzedSha":"a9de220ba9e65bdea540fb5322ffb1da2b0bf442","analyzedAt":"2026-09-01T10:01:09.883Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T15:18:49.778Z"}