What are the core components in React Native?

Question

Accepted Answer

React Native provides a set of **core components** — like **View**, **Text**, **Image**, **ScrollView**, **TextInput** — that map to native UI elements. They're the fundamental building blocks of React Native UIs, used instead of web HTML elements. ## Core components (vs web HTML) ```text React Native uses its OWN components (mapping to native views), NOT HTML: VIEW → a container (like a

) — the basic layout building block TEXT → display text (ALL text must be inside a , unlike web) IMAGE → display images (local or remote) TEXTINPUT → text input field (like an ) SCROLLVIEW → a scrollable container FLATLIST → an efficient scrollable LIST (for long lists — renders lazily) TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas) BUTTON → a basic button ``` ## Example ```jsx import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native'; function Profile() { return ( {/* container (like a div) */} Ann {/* text MUST be in */} {}}> Submit ); } ``` ## Key differences from web ```text ✓ Use not

, not

/; ALL text must be in ✓ No CSS classes/files — STYLING via a style prop (JS objects, StyleSheet) — see styling ✓ Touchables/Pressable for interactions (not onClick on divs) ✓ FlatList for long lists (efficient) — not mapping over everything ``` ## Why it matters Understanding the core components is fundamental to React Native development because **they're the building blocks of every React Native UI** — you compose them to build interfaces, so it's must-know foundational knowledge. React Native provides its **own components** that map to native views (rather than web HTML elements), and understanding the essential ones — **View** (the container, like a div), **Text** (for all text, with the important rule that all text must be inside a Text component, unlike web), **Image**, **TextInput**, **ScrollView**, **FlatList** (for efficient long lists), and touchables/**Pressable** (for handling taps) — is necessary to build any React Native UI. Understanding the **key differences from web** is particularly important for web/React developers transitioning to React Native: using View instead of div and Text instead of p/span (with the all-text-in-Text rule), styling via the style prop rather than CSS classes/files, using touchables/Pressable for interactions rather than onClick, and using **FlatList for long lists** (which renders efficiently/lazily) rather than mapping over everything — these differences are common stumbling blocks that understanding the core components clarifies. The components compose (like React) to build UIs, with View as the fundamental container. Since the core components are the building blocks of every React Native UI (you use them constantly to construct interfaces) and understanding them and how they differ from web HTML is fundamental for building React Native apps (especially for web developers), understanding the core components is essential, foundational React Native knowledge — the basic vocabulary of React Native UI, necessary for building any interface and for adapting web React knowledge to the native component model, a core competency for React Native development.