3. StyleSheet and Flexbox

React Native styles with plain JS objects (camelCase properties, unitless numbers meaning density-independent pixels), grouped with `StyleSheet.create` for a small performance win and better readability.

Layout is Flexbox by default, but the default `flexDirection` is `column` (unlike the web's `row`), which trips up many newcomers.

import { StyleSheet, View } from "react-native";

const styles = StyleSheet.create({
  row: { flexDirection: "row", justifyContent: "space-between", padding: 12 },
  box: { flex: 1, backgroundColor: "#111827", borderRadius: 8 },
});

function Row() {
  return (
    <View style={styles.row}>
      <View style={styles.box} />
      <View style={styles.box} />
    </View>
  );
}

The `style` prop also accepts an array, e.g. `style={[styles.box, isActive && styles.active]}`, which is the idiomatic way to conditionally combine styles.

Read in another language

How to study this topic

Scoring

Check your understanding

Badges