Week 2: Core Components & Flexbox Styling

1. The Core Components

React Native ships a small set of built-in components that render to real native UI elements on each platform. These five cover the large majority of what you'll build:

• View — the fundamental layout container, roughly a <div>'s job
• Text — the only component that can contain literal text
• Image — displays images, from a local file, a bundled asset, or a remote URL
• ScrollView — a scrollable container for content that might overflow the screen
• Pressable — the modern way to make anything respond to touch (replaces the older TouchableOpacity/TouchableHighlight)

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

export function ProfileCard() {
  return (
    <ScrollView>
      <View style={{ padding: 16, alignItems: 'center' }}>
        <Image
          source={{ uri: 'https://example.com/avatar.jpg' }}
          style={{ width: 80, height: 80, borderRadius: 40 }}
        />
        <Text style={{ fontSize: 18, fontWeight: '600', marginTop: 8 }}>
          Ada Lovelace
        </Text>
        <Text style={{ color: '#666' }}>Mobile Engineer</Text>
      </View>
    </ScrollView>
  );
}

Image's source prop takes either require('./local.png') for a bundled local asset, or {'{'} uri: '...' {'}'} for a remote URL — unlike the web's <img src="...">, these are two structurally different prop shapes, not the same string in both cases.

2. Text Has Real Rules

This trips up nearly everyone coming from web React: literal text must be wrapped in a Text component. Unlike HTML, where text can sit directly inside any element, a bare string inside a View throws an error:

// Error: Text strings must be rendered within a <Text> component
function Broken() {
  return <View>Hello</View>;
}

function Working() {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
}

Text components can also nest inside each other to compose styled spans of text within one paragraph — the equivalent of a <span> inside a <p> on the web:

<Text style={{ fontSize: 16 }}>
  Regular text, then <Text style={{ fontWeight: 'bold' }}>bold text</Text>, then regular again.
</Text>

3. Flexbox Layout

React Native has exactly one layout system: Flexbox. There's no CSS Grid, no floats, no positioning scheme beyond Flexbox and absolute positioning — and every View is a flex container by default, with flexDirection: 'column' as the default (the opposite of the web's default row):

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

function StatsRow() {
  return (
    <View style={styles.row}>
      <View style={styles.stat}>
        <Text style={styles.statValue}>128</Text>
        <Text style={styles.statLabel}>Followers</Text>
      </View>
      <View style={styles.stat}>
        <Text style={styles.statValue}>42</Text>
        <Text style={styles.statLabel}>Following</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingVertical: 16,
  },
  stat: { alignItems: 'center' },
  statValue: { fontSize: 20, fontWeight: '700' },
  statLabel: { fontSize: 12, color: '#666' },
});

flex: 1 is the property you'll reach for constantly — it tells a component to grow and fill available space along the main axis, which is how most full-screen layouts anchor their root View:

const styles = StyleSheet.create({
  screen: {
    flex: 1,               // fill the entire screen
    backgroundColor: '#fff',
  },
  content: {
    flex: 1,                // fill remaining space below a header, above a footer
    padding: 16,
  },
});

4. StyleSheet.create

There's no CSS file, no class names, no cascade or specificity rules. Styles are plain JavaScript objects, using camelCase property names close to (but not identical to) their CSS equivalents:

// Works, but recreates the object on every render
<View style={{ padding: 16, backgroundColor: '#fff' }} />

// Preferred -- defined once, referenced by identity on every render
const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#fff' },
});
<View style={styles.card} />

// Arrays merge multiple style objects -- later entries win on conflicts
<View style={[styles.card, isActive && styles.cardActive]} />

StyleSheet.create isn't just organizational convenience — it lets React Native validate style objects once and reference them by a stable ID, rather than creating a brand-new object on every single render the way an inline style={'{{...}}'} does. The array syntax ([styles.a, condition && styles.b]) is the idiomatic way to conditionally apply styles, since there's no class-name-toggling mechanism to reach for.

5. Handling Touch

Pressable is how anything responds to a tap — there's no onClick in React Native, and nothing is clickable by default the way a web <button> or even a styled <div> can be:

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

function ActionButton({ label, onPress }: { label: string; onPress: () => void }) {
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [styles.button, pressed && styles.buttonPressed]}
    >
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#7c5cff',
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 8,
  },
  buttonPressed: { opacity: 0.7 },
  label: { color: '#fff', fontWeight: '600', textAlign: 'center' },
});

Passing a function to style (rather than a plain object) is a Pressable-specific pattern — it receives the current interaction state ({'{'} pressed {'}'}) and lets you compute styles from it directly, which is how the "dim slightly while held down" feedback above works with no manual state management.

6. Hands-on Exercise

7. Knowledge Check

Four quick questions. Expand each to check your answer.