Why does flexDirection default to column in React Native?

React Native chose 'column' as the default because mobile layouts are predominantly vertical stacks, whereas the web CSS default is 'row'. If you assume CSS defaults your layout will look rotated, so set flexDirection explicitly when in doubt.

What is the difference between shadow props and elevation?

The shadowColor, shadowOffset, shadowOpacity and shadowRadius props only render on iOS. Android uses the single numeric elevation prop, which maps to Material Design shadow depth. To get a shadow on both platforms you must set both.

Are sizes in pixels or some other unit?

Numeric sizes are in density-independent pixels (dp). Font sizes use scale-independent pixels (sp) on Android so they respect the user's font-scale accessibility setting. Strings like '50%' are also accepted for many layout props.

Can I use percentage values in React Native styles?

Yes, several layout props (width, height, margin, padding, top/left etc.) accept percentage strings such as '100%'. They are resolved against the parent's corresponding dimension, just like in CSS.

Why is my borderRadius not clipping the child image on Android?

Android does not clip overflowing children to a rounded border by default. Add overflow:'hidden' to the rounded container so the child is masked to the rounded corners.

React Native Style Props Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

React Native StyleSheet, all in one place

React Native styling looks like CSS but is its own subset: camelCased property names, no cascade, dp units instead of px, and a Yoga flexbox engine with different defaults. This reference lists the properties you actually use day to day — grouped by Layout, Typography, Color, Border, Shadow, Transform and Image — with the value type, accepted values and the platform each one runs on.

How it works

Every style you write is a plain object that React Native passes to its native layout engine (Yoga) and to platform views. The lookup table here records three things per property: the JavaScript value type (number, string, enum, color, object or array), the realistic accepted values, and whether it is honored on iOS, Android or both. Search matches against the name, the values and the notes, so you can also find a prop by what it does (“italic”, “scroll”, “rotate”). The platform filter keeps Both entries visible while hiding props that only apply to the other platform.

Tips and gotchas

flexDirection defaults to column, the opposite of the web — the single most common porting bug.
Shadows are split: use shadowColor/shadowOffset/shadowOpacity/shadowRadius for iOS and elevation for Android, and set both for cross-platform parity.
lineHeight is an absolute dp value, not a multiplier like in CSS.
transform takes an array of single-key objects, e.g. [{ rotate: '45deg' }, { scale: 1.2 }], applied in order.
Add overflow: 'hidden' to round-cornered containers on Android so child content is clipped to the radius.