Inline styles vs StyleSheet.create

WHAT THIS TESTS This checks core React Native styling knowledge and a subtler grasp of object identity and re-render cost, which separates beginners from people who understand React's reconciliation.

A GOOD ANSWER COVERS In React Native there is no CSS file; styles are JavaScript objects with camelCased keys like backgroundColor and you pass them to the style prop. The prop accepts a single object or an array of objects that are merged left to right, with later entries overriding earlier ones, which is handy for combining base and conditional styles. StyleSheet.create takes a style object map and returns styles you reference by key. Defining them once at module scope means each render reuses the same stable object reference rather than allocating a new literal. That stability helps React skip work, plays nicely with memoized components, and StyleSheet also offers development-time validation of property names. Inline literal objects are created fresh on every render, so a component re-rendering many rows allocates many short-lived objects.

COMMON WRONG ANSWERS Saying inline styles are forbidden; they are fine for truly dynamic values. Describing CSS class selectors or cascading, which do not apply. Asserting StyleSheet is dramatically faster purely due to bridge ID lookups, which overstates the mechanism in modern versions.

LIKELY FOLLOW-UPS How do you combine a static style with a dynamic one? Why does a new style object each render matter for FlatList rows? Does StyleSheet still pass numeric IDs?

ONE CONCRETE EXAMPLE You define styles.card in StyleSheet.create and render fifty list rows. Each row reuses the same styles.card reference. For one row's dynamic highlight you pass an array, style={[styles.card, isActive && { borderColor: brand }]}, mixing a stable base with a small inline override only where needed.