Chapter 2 · Practice 1 of 5

Define styles with StyleSheet.create outside the component

Why it matters

Inline style objects are created again on every render and make components hard to read. Define styles once at module scope with StyleSheet.create, and compose them with arrays when something changes:

Static styles live in the stylesheet.
Dynamic values, such as a color from props, go in a small inline object added to the array.
Theme values (colors, spacing, font sizes) come from one tokens file, not magic numbers scattered across screens.

Keep each component's styles next to it, in the same file or a sibling file, so deleting a component deletes its styles too.

Put shared colors and spacing in one tokens module
Combine styles with arrays: [styles.card, selected && styles.selected]

Avoid

Building a new style object for every list row inside renderItem

Example

TSX

import { StyleSheet, Text, View } from 'react-native';
import { tokens } from '@/theme/tokens';

export function Badge({ label, color }: { label: string; color: string }) {
  return (
    <View style={[styles.badge, { backgroundColor: color }]}>
      <Text style={styles.label}>{label}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  badge: { paddingHorizontal: tokens.space.sm, borderRadius: tokens.radius.full },
  label: { color: tokens.color.onAccent, fontWeight: '600' },
});