React Native Style Props Reference

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.

The most important differences from CSS

Understanding a handful of key divergences from CSS avoids the majority of “why does my layout look wrong?” moments when coming from web development:

Shadows: the iOS/Android split

Shadow is the property group most likely to surprise cross-platform developers. iOS uses four props: shadowColor, shadowOffset (an {width, height} object), shadowOpacity, and shadowRadius. Android uses a single elevation number that maps to a Material Design depth level. Neither set affects the other platform. To get a shadow on both:

// Works on both iOS and Android
const styles = StyleSheet.create({
  card: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 4,
    elevation: 3,        // Android only, but harmless on iOS
  },
});

Tips and gotchas

• flexDirection defaults to column, the opposite of the web — the single most common porting bug.
• 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 left-to-right.
• Add overflow: 'hidden' to round-cornered containers on Android so child content is clipped to the border radius.
• Percentage values like '50%' work for many layout props (width, height, padding, margin) but are resolved against the parent’s matching dimension — not the viewport.
• Colors accept named values ('red'), hex ('#FF0000'), rgba('255,0,0,0.5'), and hsl() strings — all equivalent to their CSS counterparts.