React Native Styling Cheat Sheet: StyleSheet, Flexbox & Platform Styles

React Native styles are JavaScript objects, usually wrapped in StyleSheet.create. Layout is Flexbox with a default flexDirection of column. Numbers are density-independent pixels, not CSS pixels on the web. There is no cascade of stylesheets and no Grid unless you add a library.

This React Native cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• StyleSheet: StyleSheet.create validates keys and caches IDs. Arrays of styles merge left-to-right.
• Flex: Default column. flex: 1 fills remaining space on the parent’s main axis.
• Gap: gap is supported in modern RN. Otherwise margin on children.
• Units: Bare numbers (padding: 16). % is relative to parent. No rem/vw unless you compute them.
• Color: Strings (#2563eb, rgba(...)). No CSS variables unless you theme in JS.
• Platform: Platform.select({ ios: {}, android: {} }) or Platform.OS.
• Hairline: StyleSheet.hairlineWidth for 1px-like dividers.
• Not CSS: No display: grid, margin-left kebab-case, or * selectors. CamelCase properties.

Copy-paste examples

Column screen with platform padding

Parent needs flex: 1 to fill the screen. Merge styles in an array for pressed or error states.

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

export function Screen({ children }) {
  return <View style={styles.screen}>{children}</View>;
}
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    paddingHorizontal: 16,
    paddingTop: Platform.select({ ios: 8, android: 16 }),
    backgroundColor: '#f8fafc',
  },
  title: { fontSize: 22, fontWeight: '700', marginBottom: 12 },
});

Common mistakes

• Writing className or CSS files and expecting them to apply.
• Using web-only properties (gridTemplateColumns, boxShadow as CSS string).
• Hardcoded width: 400 that overflows small phones.
• Forgetting flex: 1 on the root View so content does not fill the screen.

FAQ

1. Can I use Tailwind? Not web Tailwind. NativeWind and similar tools map utilities to StyleSheet. You still debug Flexbox.

1. Shadow on Android vs iOS? iOS uses shadow* props. Android uses elevation. Libraries like react-native-shadow exist if you need parity.

1. How do I do media queries? useWindowDimensions and JS branches, or a breakpoint helper. There is no @media in StyleSheet.

Related React Native cheat sheets

• React Native Cheat Sheet 2026
• React Native Components Cheat Sheet
• React Native Navigation Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds mobile app development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.