Inline styles vs StyleSheet.create
styling fundamentals and object identity.
styles are JS objects passed to the style prop; StyleSheet.create registers styles once for stable references and validation, while inline objects recreate on each render.
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.
Interview question
Why can defining styles with StyleSheet.create be preferable to inline literal objects in a long list?
- a.It forces all styles to be applied synchronously on the native main thread
- b.It automatically converts pixel units to platform-independent dp values
- c.It reuses a stable object reference across renders instead of allocating a new object each timeCorrect
- d.It enables CSS cascade and selector matching for nested components
Why? this is the answer
StyleSheet styles are created once and referenced by key, giving stable references that avoid per-render allocations. React Native has no CSS cascade, and unit handling is not what StyleSheet.create provides.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
- #react-native
- #styling
- #stylesheet
- #performance
- #rendering
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles