2. Core components

A handful of core components cover most layouts: `View` (a container), `Text` (all text must live inside a `Text`), `Image`, `ScrollView`, and `Pressable` for touch handling.

Unlike the web, plain strings cannot be rendered directly inside a `View` — they must be wrapped in `Text`, and only `Text` can contain other `Text`.

import { View, Text, Image, Pressable } from "react-native";

function Card({ uri, label, onPress }: { uri: string; label: string; onPress: () => void }) {
  return (
    <Pressable onPress={onPress}>
      <View>
        <Image source={{ uri }} style={{ width: 48, height: 48 }} />
        <Text>{label}</Text>
      </View>
    </Pressable>
  );
}

`ScrollView` renders all children up front, which is fine for short lists but not for long feeds of transactions — for those you want `FlatList`.

Read in another language

How to study this topic

Scoring

Check your understanding

Badges