necolas/react-native-web · error · Error

StyleSheet.compose() only accepts 2 arguments, received ${le

Error message

StyleSheet.compose() only accepts 2 arguments, received ${len}: ${JSON.stringify(readableStyles)}

What it means

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.

Source

Thrown at packages/react-native-web/src/exports/StyleSheet/index.js:109

        }
        compiledStyles = compileAndInsertAtomic(styleObj);
      }
      staticStyleMap.set(styleObj, compiledStyles);
    }
  });
  return styles;
}

/**
 * compose
 */
function compose(style1: any, style2: any): any {
  if (process.env.NODE_ENV !== 'production') {
    /* eslint-disable prefer-rest-params */
    const len = arguments.length;
    if (len > 2) {
      const readableStyles = [...arguments].map((a) => flatten(a));
      throw new Error(
        `StyleSheet.compose() only accepts 2 arguments, received ${len}: ${JSON.stringify(
          readableStyles
        )}`
      );
    }
    /* eslint-enable prefer-rest-params */
    /*
    console.warn(
      'StyleSheet.compose(a, b) is deprecated; use array syntax, i.e., [a,b].'
    );
    */
  }
  return [style1, style2];
}

/**
 * flatten
 */

View on GitHub (pinned to a9de220ba9)

Solutions

1. Compose pairwise: StyleSheet.compose(a, StyleSheet.compose(b, c)).
2. Use StyleSheet.flatten([...]) or an array style prop (style={[a, b, c]}) for many styles.
3. Guard spread usage so it cannot exceed 2 items, or switch to array styles.

Example fix

// before
StyleSheet.compose(a, b, c)
// after
style={[a, b, c]} // or StyleSheet.flatten([a, b, c])

function safeCompose(...styles) {
  if (styles.length > 2) throw new RangeError('compose takes 2 args; use StyleSheet.flatten([...]) for more');
  return StyleSheet.compose(styles[0], styles[1]);
}

null

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; }

When it happens

Trigger: StyleSheet.compose(a, b, c, ...) with 3+ arguments in a non-production build.

Common situations: Assuming compose is variadic like array concat or RN's flatten; refactoring code from flatten to compose; spreading an array of styles into compose.

Related errors

• The <Image> component cannot contain children. If you want t
• Invalid CSS keyframes type: ${typeof keyframesValue}
• Image: asset with ID "${source}" could not be found. Please
• Unrecognized signal `${signal}` or state `${curState}` for T
• Touchable cannot transition from `${curState}` to `${signal}

AI-assisted analysis of necolas/react-native-web@a9de220ba9 (2026-09-01). Data as JSON: /api/errors/794c1bf53da6ffc0. Report an issue: GitHub.