Core Components: View, Text, Image, ScrollView

On the web, you can throw a string into a div, set a font on body, and drop in an <img> without thinking about its size. Try the same in React Native and you’ll get a red error screen, text in the wrong font, or an image that never appears. Four components carry most screens, and each has one rule that catches web developers.

View: a box, nothing more

View is the building block for layout: a rectangle that can have a background, a border, padding and children. It maps to a native container view. It has no text node, so it cannot hold strings:

// Throws: Text strings must be rendered within a <Text> component.
<View>Ridge Loop</View>

// Works
<View>
  <Text>Ridge Loop</Text>
</View>

Think of View as the div you use for layout, minus everything a div does with text. It’s also the thing you style most: cards, rows, dividers, badges and spacers are all Views with a background, a border radius or some padding. Views are cheap, but not free; each one becomes a real native view, so a list row with twelve nested wrappers costs more than one with four. Flatten when a wrapper adds nothing.

Text: the only place for strings

Every visible string goes inside <Text>. Nested <Text> elements become one paragraph, and that’s also the only place style inheritance exists: a child Text inherits font, color and size from a parent Text.

<Text style={{ fontSize: 16, color: '#333' }}>
  Ridge Loop is <Text style={{ fontWeight: '700' }}>8.4 km</Text> with 420 m of climbing.
</Text>

A View never passes text styles down. If you want a consistent font across the app, make a component (an AppText that sets your defaults) rather than hunting for a global stylesheet that doesn’t exist.

Text also scales with the user’s accessibility settings. Someone who has set a larger font size in iOS or Android settings gets bigger text in your app automatically, which is good, and which means a fixed-height box around text will eventually clip it. Leave room to grow; prefer padding over fixed heights for anything that contains words.

Two props you’ll use constantly: numberOfLines={2} truncates with an ellipsis (perfect for list cards), and selectable lets users copy the text.

Image: tell it how big

For images that ship with the app, require() resolves the file at build time, so React Native knows the image’s dimensions:

<Image source={require('../../assets/images/trail-placeholder.png')} />

For images from the network, React Native can’t know the size until the download finishes, so you must give one. Without it the image renders at 0 by 0, silently.

<Image
  source={{ uri: hike.photoUrl }}
  style={{ width: '100%', height: 220, borderRadius: 12 }}
  resizeMode="cover"
  accessibilityLabel={`Photo from ${hike.name}`}
/>

resizeMode works like CSS object-fit: cover fills and crops, contain fits inside. For production apps, many teams use expo-image instead: it has the same basic shape, adds disk caching and placeholders, and uses contentFit in place of resizeMode.

ScrollView: content that may not fit

Native views don’t scroll on overflow. Scrolling is its own component, ScrollView, and it has two quirks.

First, it needs a bounded height: it scrolls within whatever space its parent gives it, so the parent chain needs flex: 1 (you’ll see why in the flexbox lesson). Second, padding and alignment for the scrolled content go in contentContainerStyle, not style. style sizes the scrolling window; contentContainerStyle styles the content that slides inside it.

Here is Trailhead’s detail screen, with sample data for now:

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

const hike = {
  name: 'Ridge Loop',
  photoUrl: 'https://images.example.com/ridge-loop.jpg',
  distanceKm: 8.4,
  elevationM: 420,
  notes: 'Steep first kilometre, then a long ridge with views of the lake. Bring water: the spring at the saddle was dry.',
  photoCount: 0,
};

export default function HikeScreen() {
  return (
    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
      <Image
        source={{ uri: hike.photoUrl }}
        style={{ width: '100%', height: 220, borderRadius: 12 }}
        accessibilityLabel={`Photo from ${hike.name}`}
      />
      <Text style={{ fontSize: 28, fontWeight: '700' }}>{hike.name}</Text>
      <View style={{ flexDirection: 'row', gap: 16 }}>
        <Text>{hike.distanceKm} km</Text>
        <Text>{hike.elevationM} m up</Text>
      </View>
      {hike.photoCount > 0 && <Text>{hike.photoCount} photos</Text>}
      <Text style={{ fontSize: 16, lineHeight: 24 }}>{hike.notes}</Text>
    </ScrollView>
  );
}

Look at what isn’t there: no div, no class names, no stylesheet import, and no stray strings. Numbers like hike.distanceKm are inside Text, so they render fine.

The rest of the core set

You’ll meet the others as Trailhead needs them: Pressable and TextInput in the next lesson, FlatList and SectionList for lists, ActivityIndicator for loading, Switch for toggles, Modal for overlays, and KeyboardAvoidingView for forms. Each maps to a native component, so they look and behave like the platform by default.

Next you’ll make Trailhead interactive: buttons that respond to touch and inputs that handle typing.