Core Components

Every React Native screen is built from a small set of core components, imported from the react-native package. Unlike HTML, there's no <div>, <p>, or <span> — React Native has its own vocabulary of building blocks, each mapping to a real native UI element on Android and iOS. This lesson covers the ones you'll use in nearly every screen you build.

View: The Basic Building Block

View is React Native's most fundamental component — the direct equivalent of an HTML <div>. It's a plain rectangular container used purely for layout and grouping; on its own, a View has no visual appearance beyond whatever styling you give it. 

<View style={{ padding: 16, backgroundColor: '#f2f2f2' }}>
  // other components go here
</View>

You'll nest Views inside each other constantly to build up layouts — the Flexbox lesson later in this track covers arranging them in depth.

Text: The Only Way To Display Text

Text is the only React Native component that can display text. This is a rule worth flagging clearly because it trips up nearly every beginner coming from web development: in HTML, text can sit directly inside a <div>; in React Native, raw text must always be wrapped in a <Text> component. 

// wrong — React Native throws an error: text nodes must be rendered within a <Text> component
<View>
  Hello!
</View>

// correct
<View>
  <Text>Hello!</Text>
</View>
Common beginner error: If you ever see an error mentioning text nodes or "Text strings must be rendered within a <Text> component," the fix is almost always to wrap a stray string in <Text>.

Image: Displaying Images

Image displays pictures from a local asset or a remote URL, using a source prop. 

// remote image
<Image source={{ uri: 'https://example.com/avatar.png' }} style={{ width: 80, height: 80 }} />

// local asset
<Image source={require('./assets/logo.png')} />

This is just the basics — sizing strategies, local vs. remote assets, and caching get their own full lesson at Images & Assets.

ScrollView: Making Content Scrollable

By default, content that overflows the screen is simply clipped. ScrollView wraps content so the user can scroll to see all of it. 

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

<ScrollView>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  // ...many more items
</ScrollView>
ScrollView vs. FlatList: ScrollView renders everything inside it immediately, all at once — fine for a short, fixed amount of content. For long or dynamically changing lists (hundreds of items, data from an API), FlatList renders only what's currently visible on screen for much better performance — covered in full at Lists: FlatList & SectionList.

Tappable Components: TouchableOpacity and Pressable

Neither View nor Text is inherently tappable — to respond to a tap, you wrap content in one of two common "touchable" components.

ComponentBehavior
TouchableOpacitySimpler API — dims (reduces opacity of) its content while pressed, giving basic visual feedback.
PressableNewer, more flexible API — gives fine-grained control over different press states (pressed, hovered, focused) via a function passed to style. Generally the more future-proof choice for new code.
 
// TouchableOpacity — simple tap handling
<TouchableOpacity onPress={() => alert('Tapped!')}>
  <Text>Tap me</Text>
</TouchableOpacity>

// Pressable — style can react to the current press state
<Pressable
  onPress={() => alert('Tapped!')}
  style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
>
  <Text>Tap me</Text>
</Pressable>

The full depth of gestures — long presses, swipes, and more — is covered at Touches & Gestures.

SafeAreaView: Avoiding Notches and Status Bars

Modern phones have notches, camera cutouts, and rounded corners that can overlap your content. SafeAreaView automatically adds padding so your UI stays clear of those areas, on both Android and iOS. 

import { SafeAreaView, Text } from 'react-native';

<SafeAreaView style={{ flex: 1 }}>
  <Text>This never sits under a notch or status bar</Text>
</SafeAreaView>

Worked Example: A Simple Welcome Screen

Putting several of these components together into one small, realistic screen: 

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

export default function WelcomeScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView contentContainerStyle={{ padding: 24, alignItems: 'center' }}>
        <Image
          source={{ uri: 'https://example.com/logo.png' }}
          style={{ width: 100, height: 100 }}
        />
        <View style={{ marginTop: 16 }}>
          <Text>Welcome to your first React Native screen!</Text>
        </View>
        <TouchableOpacity
          style={{ marginTop: 20, padding: 12, backgroundColor: '#2196f3', borderRadius: 8 }}
          onPress={() => alert('Get started!')}
        >
          <Text style={{ color: '#fff' }}>Get Started</Text>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
}

Notice the pattern: SafeAreaView wraps everything for notch safety, ScrollView allows the content to scroll if it grows, an Image and a Text display content, and a TouchableOpacity makes a button tappable — the same handful of core components combining to build a real screen.

Next up: These components currently rely on inline style objects. The next lesson covers React Native's proper approach to styling — head to Styling with StyleSheet.