# Core Components — React Native

Source: https://www.skillbyai.com/en/react-native/f-core

> The building blocks instead of HTML.

## 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.

```tsx
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.

**Quiz:** Which prop handles a tap on a Pressable?

- [ ] href
- [ ] onClick
- [ ] onTap
- [x] onPress

*Answer:* onPress. Mobile components use press events.