0Pricing
React Academy · Lesson

React Native Core Components vs Web DOM

Map View/Text/Image/ScrollView to their DOM counterparts and understand the bridge model.

React Native Core Components vs Web DOM is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why No HTML in React Native?

React Native renders to native iOS and Android UI components, not to a browser DOM. There is no <div>, <p>, or <img> — each platform has its own native primitives.

View — The div Equivalent

View is the most basic layout container in React Native. It maps to UIView on iOS and android.view.View on Android. Think of it as a <div> that cannot hold text directly.

import { View, StyleSheet } from 'react-native';

function Card() {
  return (
    <View style={styles.card}>
      {/* children go here */}
    </View>
  );
}

const styles = StyleSheet.create({ card: { padding: 16, borderRadius: 8 } });

Text — The p/span Equivalent

Text is required for any visible text. Unlike the web, you cannot put a string directly inside a View — it must be wrapped in <Text>.

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

function Greeting() {
  return (
    <View>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Hello!</Text>
      <Text>Welcome to React Native.</Text>
    </View>
  );
}

Image — The img Equivalent

Image renders images. Use the source prop with a require() for local assets or a { uri: '...' } object for network images.

import { Image } from 'react-native';

// Local asset:
<Image source={require('./assets/logo.png')} style={{ width: 100, height: 100 }} />

// Network image (must provide dimensions):
<Image source={{ uri: 'https://example.com/photo.jpg' }} style={{ width: 200, height: 150 }} />

ScrollView — The overflow:scroll Equivalent

ScrollView is a scrollable container. Unlike the web, you must explicitly use it — View does not scroll. For long lists, prefer FlatList.

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

function Article({ paragraphs }) {
  return (
    <ScrollView>
      {paragraphs.map((p, i) => <Text key={i}>{p}</Text>)}
    </ScrollView>
  );
}

FlatList — The Virtualized List

FlatList renders only visible items, recycling off-screen ones — essential for performance with large data sets.

import { FlatList, Text, View } from 'react-native';

function UserList({ users }) {
  return (
    <FlatList
      data={users}
      keyExtractor={u => u.id}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

TouchableOpacity — The button Equivalent

TouchableOpacity (and Pressable in newer RN) adds touch feedback to any view. The onPress prop handles taps.

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

function Button({ onPress, title }) {
  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
}

TextInput — The input Equivalent

TextInput is the controlled input field. It supports value, onChangeText, placeholder, and keyboard types.

import { TextInput, useState } from 'react-native';

function SearchBar() {
  const [query, setQuery] = useState('');
  return (
    <TextInput
      value={query}
      onChangeText={setQuery}
      placeholder="Search..."
      keyboardType="default"
    />
  );
}

ActivityIndicator — The Loading Spinner

ActivityIndicator is the native loading spinner. On iOS it's a circular spinner; on Android a material circular progress indicator.

import { ActivityIndicator, View } from 'react-native';

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <ActivityIndicator size="large" color="#4f46e5" />
</View>

SafeAreaView

SafeAreaView adds padding for device notches, status bars, and home indicators automatically on iOS and Android.

import { SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <MyScreen />
    </SafeAreaView>
  );
}

Modal

Modal renders an overlay on top of the app. The visible prop controls whether it's shown.

import { Modal, View, Text } from 'react-native';

<Modal visible={showModal} animationType="slide" transparent={true}>
  <View style={styles.overlay}>
    <View style={styles.dialog}>
      <Text>Are you sure?</Text>
    </View>
  </View>
</Modal>

Quick Check

Which React Native component must you use to display any text on screen?

Recap

React Native maps web concepts to native components: View (div), Text (p), Image (img), ScrollView, FlatList (virtualized list), TextInput (input), and TouchableOpacity (button). Always use SafeAreaView for the root layout.

Frequently asked questions

Is the “React Native Core Components vs Web DOM” lesson free?

Yes — the full text of “React Native Core Components vs Web DOM” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “React Native Core Components vs Web DOM”?

Map View/Text/Image/ScrollView to their DOM counterparts and understand the bridge model. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “React Native Core Components vs Web DOM” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. React Native Core Components vs Web DOM
  2. Styling with StyleSheet API & Flexbox
  3. Navigation with Expo Router
  4. Accessing Device APIs: Camera, Location & Push Notifications
← Back to React Academy