Core Components

Building blocks of every screen

React Native provides primitive components that map to native widgets. You compose them like HTML divs and spans — but use <View> and <Text>, never raw strings outside <Text>.

Essential components

• View — container for layout (like div). Supports Flexbox, touch handling, accessibility.
• Text — all text must be inside Text; supports nesting and styling.
• Image — local (require) or remote (uri); always set dimensions or flex.
• ScrollView — scrollable container for content that does not fit one screen.
• SafeAreaView — respects notch and home indicator on modern phones.
• StatusBar — control status bar style (light/dark content).

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

export function ProfileScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView contentContainerStyle={{ padding: 16 }}>
        <Image
          source={{ uri: "https://example.com/avatar.jpg" }}
          style={{ width: 80, height: 80, borderRadius: 40 }}
        />
        <Text style={{ fontSize: 24, fontWeight: "bold" }}>Jane Developer</Text>
        <Text style={{ color: "#666" }}>React Native engineer</Text>
      </ScrollView>
    </SafeAreaView>
  );
}