How does styling work in React Native?

Question

Accepted Answer

React Native styling uses **JavaScript objects** (not CSS files) — applied via the `style` prop, often organized with `StyleSheet`. It uses a **Flexbox-based** layout system. The concepts resemble CSS but with JavaScript syntax and some differences. ## Styling with JavaScript objects ```jsx import { StyleSheet, View, Text } from 'react-native'; function Card() { return ( Hello ); } // StyleSheet.create — define styles as JS objects (camelCase properties) const styles = StyleSheet.create({ card: { padding: 16, backgroundColor: '#fff', // camelCase (not background-color) borderRadius: 8, }, title: { fontSize: 18, fontWeight: 'bold', color: '#333', }, }); ``` Styles are **JavaScript objects** with **camelCase** property names (`backgroundColor`, not `background-color`); `StyleSheet.create` organizes them. You can also pass inline objects or arrays of styles. ## Flexbox layout (the default) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Differences from web CSS ```text ✓ JS objects, camelCase props; no CSS files/classes; values often unitless numbers ✓ FLEXBOX by default (flexDirection defaults to 'column', unlike web's 'row') ✓ A subset of CSS properties (not everything web CSS has); some RN-specific behavior ✓ No cascade/inheritance like CSS (styles are per-component); use style arrays to combine ``` ## Why it matters Understanding styling in React Native is fundamental because **styling is essential to building any UI**, and React Native's approach differs from web CSS, so it's must-know practical knowledge. React Native styles UIs with **JavaScript objects** (via the `style` prop, organized with `StyleSheet`) rather than CSS files — and understanding this (camelCase property names like `backgroundColor`, defining styles as JS objects, combining styles with arrays) is necessary for styling any React Native component. Understanding the **Flexbox-based layout system** is particularly important: React Native uses Flexbox for layout (like CSS Flexbox, with flexDirection, justifyContent, alignItems), but with the key difference that **flexDirection defaults to 'column'** (not 'row' as on the web) — a common point of confusion. Flexbox is the primary layout mechanism, so understanding it is essential for arranging UIs. Understanding the **differences from web CSS** is important especially for web developers: JS objects with camelCase instead of CSS files/classes, unitless numeric values, a subset of CSS properties (not everything web has), the column-default flexbox, and no cascade/inheritance like CSS (styles are per-component) — these differences are common stumbling blocks that understanding clarifies. While the concepts resemble CSS (making it approachable for web developers), the syntax and some behaviors differ, so understanding React Native's specific approach is necessary. Since styling is essential to building any UI and React Native's JS-object, Flexbox-based approach (with its differences from web CSS) is how it's done, understanding styling in React Native is essential, foundational practical knowledge — necessary for building any React Native interface, and important for web developers to understand the differences from CSS, a core skill used constantly in React Native UI development.