Styling with StyleSheet Instead of CSS in React Native

In HTML/CSS you separate structure (HTML) from appearance (a CSS file or the class attribute). React Native has no CSS at all – instead, you write styles as JavaScript objects. This chapter shows the key differences and similarities.

StyleSheet.create() instead of a .css file

Instead of an external .css file with classes like .card { padding: 16px; }, in React Native you define a JavaScript object with StyleSheet.create():

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  card: {
    padding: 16,
    backgroundColor: '#ffffff',
    borderRadius: 8,
  },
});

// Usage in JSX:
<View style={styles.card}>...</View>

StyleSheet.create() isn't technically required – you could also pass a plain object {{ padding: 16 }}. But it brings performance benefits and validation, which is why it's the standard.

The key differences from CSS

HTML/Web	React Native
Units like `16px`, `1em`, `%`	just plain numbers, e.g. `16` (= density-independent pixels); `%` works for some properties
`background-color` (kebab-case)	`backgroundColor` (camelCase) – every CSS property becomes camelCase
`display: flex` is one option among many	flexbox is the DEFAULT layout mode for every `View` – there is no other layout system
`flex-direction: row` (default)	`flexDirection: 'column'` is the default (not row, unlike the web!)
Combine CSS classes via multiple `class` values	an array of style objects: `style={{[styles.base, styles.active]}}`
Pseudo-classes like `:hover`	don't exist (no mouse) – use `onPressIn`/`onPressOut` for touch states instead

Achtung: The flexbox default is the biggest trap for web developers: in the browser, flex-direction defaults to row (side by side). In React Native the default is column (stacked) – every View automatically stacks its children vertically until you explicitly set flexDirection: 'row'.

Preview: what our ProductCard will look like

Not a real file yet – just a preview of the styles we'll actually create in components/ProductCard.js in the next chapter:

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    padding: 12,
    marginBottom: 8,
    backgroundColor: '#f9fafb',
    borderRadius: 8,
    alignItems: 'center',
  },
  image: { width: 60, height: 60, borderRadius: 4 },
  info: { marginLeft: 12, flex: 1 },
  name: { fontSize: 16, fontWeight: '600' },
  price: { fontSize: 14, color: '#6b7280' },
});

flex: 1 on info makes that area take up all remaining available space – comparable to flex-grow: 1 in CSS. In the next chapter we'll use exactly these styles in our first own component.

Tipp: Have Tailwind experience? There's a popular library called NativeWind that maps Tailwind class names onto React Native styles. For this tutorial we deliberately stick to the built-in StyleSheet so you understand the fundamentals without an extra dependency – you can add NativeWind later any time.