Core Components

View, Text, Image, Pressable, ScrollView

There is no DOM, so there are no div, span or img elements. View is the basic container (like a div), Text displays strings and all text must be inside a <Text>, Image shows local or remote images (remote images need explicit width and height), Pressable detects presses with states such as pressed, ScrollView scrolls its children, and TextInput accepts typing. Events are different too: you use onPress instead of onClick, and there is no CSS cascade, so styles are passed to each component.

A profile card

Core components composed together.

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

export function Profile({ name, bio, avatarUrl, onFollow }: {
  name: string; bio: string; avatarUrl: string; onFollow: () => void;
}) {
  return (
    <ScrollView contentContainerStyle={{ padding: 16 }}>
      <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
        <Image source={{ uri: avatarUrl }} style={{ width: 64, height: 64, borderRadius: 32 }} />
        <Text style={{ fontSize: 20, fontWeight: "600" }}>{name}</Text>
      </View>
      <Text style={{ marginTop: 12 }}>{bio}</Text>
      <Pressable
        onPress={onFollow}
        accessibilityRole="button"
        style={({ pressed }) => ({ marginTop: 16, padding: 12, opacity: pressed ? 0.6 : 1 })}
      >
        <Text>Follow</Text>
      </Pressable>
    </ScrollView>
  );
}

Raw strings must be in Text

Putting a bare string directly inside a View causes an error. Wrap every piece of visible text in a Text component.

Same Lego bricks, different studs

Core components are a small set of bricks. You build the same shapes as on the web, but the bricks snap into native platform parts instead of HTML.

Quick check: Which prop handles a tap on a Pressable?

• href
• onClick
• onTap
• onPress