React Native StyleSheet Cheat Sheet: Every Property You Use

This React Native StyleSheet cheat sheet is the list of properties you will actually reach for, with the values each one accepts. People look for this as a React Native cheat sheet or as React Native CSS, and both names are fair: styling here looks like CSS and is not CSS, and most of the time lost to it goes on the handful of places where the two quietly disagree — so those are covered too.

Before the tables: how styles are written

React Native has no stylesheet files and no class names. Styles are JavaScript objects, and StyleSheet.create is how you declare them:

import { StyleSheet, View, Text } from 'react-native';

export default function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
  },
  title: {
    fontSize: 18,
    fontWeight: '700',
  },
});

You can pass an array to combine styles, and false entries are ignored — which is how conditional styling is done:

<View style={[ styles.card, isActive && styles.cardActive ]} />

Layout and dimensions

Numbers are density-independent pixels, not CSS pixels, and they carry no unit — padding in React Native is padding: 16, never 16px. Percentages are the exception and must be strings: width: '50%'.

Flexbox in React Native

If you came looking for a React Native flexbox cheat sheet, this is the part that matters. React Native uses Flexbox for everything, and three of its defaults are different from the browser — which is where web experience actively misleads you:

• flexDirection defaults to column, not row. A View stacks its children vertically until you say otherwise.
• alignContent defaults to flex-start rather than stretch.
• flexShrink defaults to 0, not 1. Children do not shrink to fit unless you tell them to, which is why text overflows its container more often here than on the web.

There is no display: grid, no float, and no position: fixed. Everything is Flexbox or absolute positioning.

// A row with the two items pushed to opposite ends
const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
});

Colors, background and opacity

Text and typography

Text styles only work on a <Text> component. Setting fontSize on a <View> does nothing at all — there is no inheritance from a View to the text inside it. This catches almost everyone once.

fontWeight takes a string, not a number: '700', not 700.

Borders and border radius

React Native border properties work much as you would expect, and per-side variants exist for all of them — borderTopWidth, borderLeftColor and so on. Per-corner radii use the corner name: borderTopLeftRadius, borderBottomRightRadius.

One catch on Android: a border radius only clips a child image if the parent also has overflow: 'hidden'. On iOS it clips without it, which is how a rounded avatar ends up square on Android only.

Position and layering

position accepts only 'relative' (the default) and 'absolute'. There is no fixed and no sticky. An absolutely positioned child is placed against its parent, not the screen.

Shadows and elevation

The single most common React Native styling bug: shadows are platform-specific. The four shadow* properties work on iOS and do nothing on Android; elevation works on Android and does nothing on iOS. You need both.

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#FFFFFF',   // Android needs this for elevation to show
    // iOS
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.12,
    shadowRadius: 8,
    // Android
    elevation: 4,
  },
});

Note the backgroundColor. On Android, elevation draws nothing on a transparent background, so a card with a shadow and no background colour renders flat.

Styling for one platform only

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  header: {
    paddingTop: Platform.OS === 'ios' ? 44 : 24,
    ...Platform.select({
      ios:     { shadowOpacity: 0.1 },
      android: { elevation: 3 },
    }),
  },
});

What web CSS does that React Native does not

Common questions

Is StyleSheet.create faster than a plain object?

Marginally, and less than it used to be. The real reason to use it is that it validates your style keys — a typo like backgrondColor throws instead of being silently ignored, which is worth more than the performance.

Why is my text not centred?

textAlign: 'center' centres text inside its own Text element. To centre the Text within its parent, the parent needs alignItems: 'center'. They are two different things and doing the wrong one is the most common reason centring appears not to work.

How do I make a responsive layout?

There are no media queries. Use flex and percentages for most of it, and useWindowDimensions() when you genuinely need the screen size — it re-renders on rotation, which Dimensions.get() does not.

Why does my shadow not appear on Android?

Because Android ignores the shadow* properties entirely. Add elevation, and make sure the element has a backgroundColor.

Views: 478