StyleSheet.create and Inline Style Tradeoffs

WHAT THIS TESTS Whether you know React Native styling is JavaScript objects, not CSS, and understand the reference-stability benefit of StyleSheet.

A GOOD ANSWER COVERS In React Native you style components with plain JavaScript objects whose keys are a subset of CSS properties, laid out with flexbox by default. There is no global stylesheet, no selectors, and no cascade; the only inheritance is limited text styling within Text. StyleSheet.create takes an object of named style objects and returns them for use via the style prop. Its benefits are validation of style keys during development so typos are caught, a clearer organization separating styles from render logic, and stable object references. Because the styles are defined once at module scope, the same object identity is reused across every render. Inline style objects, by contrast, allocate a new object on each render, which adds garbage collection pressure and breaks shallow equality checks, so memoized children may re-render unnecessarily. For dynamic styles you typically combine a static StyleSheet base with a small inline object in an array.

COMMON WRONG ANSWERS Saying React Native uses real CSS, parses .css files, or supports cascading and descendant selectors. Claiming StyleSheet.create gives a large rendering speedup; the main wins are validation and reference stability, not raw paint speed. Forgetting that some dynamic styling still needs inline values.

LIKELY FOLLOW-UPS How to merge static and dynamic styles using an array of styles. Why a new inline object each render can defeat React.memo. Which CSS features are absent compared to the web.

ONE CONCRETE EXAMPLE A list cell defines its layout in StyleSheet.create at module scope, so all thousands of rows share one style object. The selected state adds an inline backgroundColor only for the active row via style={[styles.cell, isActive && styles.active]}, keeping the base reference stable.