Styling with StyleSheet and Flexbox

React Native has no CSS files or class names, styles are plain JavaScript objects, usually created with StyleSheet.create.

StyleSheet basics

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

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

const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#1e293b',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
});

StyleSheet.create doesn't do anything magical at runtime, mainly it validates your style objects and lets React Native optimize how they're referenced, but functionally you can pass a plain object to style too.

Flexbox is the default layout system

Unlike the web, where display: flex is opt-in, every <View> in React Native lays out its children with Flexbox by default, and flexDirection defaults to 'column' (the opposite of the web's 'row' default).

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 12,
  },
});

Combining and conditionally applying styles

The style prop accepts an array of styles, later ones override earlier ones, this is the standard way to conditionally apply an extra style:

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