React Native vs the Web
What is different, what is the same, and the mental model shift from HTML to native UI primitives
React Native is React — the same component model, hooks, state management, and JavaScript you already know. What changes is the rendering target. Instead of a browser DOM, React Native renders to native iOS UIKit and Android View components. The result is a genuinely native app — not a web view, not a hybrid wrapper.
What stays the same
- React component model — Function components, useState, useEffect, useContext, custom hooks — identical API to React for the web.
- JavaScript ecosystem — npm packages, TypeScript, async/await, fetch, JSON — all work as expected. Most pure JS/TS libraries work in React Native.
- State management — Zustand, Jotai, React Query, Redux — all work in React Native. The state layer is completely independent of the rendering target.
- The mental model — Think in components, manage data flow, lift state up, compose smaller components into larger ones. Exactly as in React for the web.
What changes — the critical differences
- No HTML elements — No div, span, p, button, input. Instead: View (div), Text (p/span), TextInput (input), TouchableOpacity or Pressable (button), Image (img). Every element is a native primitive.
- No CSS — StyleSheet API instead — Styles are JavaScript objects, not CSS files. Some CSS properties work differently (no shorthand like "padding: 8px 16px"), and many CSS features do not exist. Lesson 4 covers this.
- Flexbox is the only layout system — There is no grid, no float, no inline-block. Everything is Flexbox. The default flex direction is column (not row as in CSS). Once you know this, layout becomes predictable.
- Navigation is explicit — There is no URL bar or back button. Navigation between screens must be programmatically implemented using a navigation library.
- Platform-specific behaviour — iOS and Android have different design languages, gesture systems, and native components. Some things look different by default on each platform — and that is correct.
React Native vs alternatives
- React Native (this course) — True native rendering. Good performance, large ecosystem, shared JS logic with web. Requires understanding of two platform idioms (iOS and Android).
- Flutter — Google's framework using Dart. Renders with its own graphics engine — pixel-perfect on both platforms. Different language, different ecosystem. Excellent performance.
- Capacitor / Ionic — Web app in a native WebView. CSS and HTML work exactly as in a browser. Lower performance ceiling, less native feel. Better if your team is web-only.
- Progressive Web App (PWA) — Not a native app — a web app installed to the home screen. No App Store listing, no push notifications on iOS, limited native API access. Right for some use cases, wrong for others.
Expo is the right starting point for almost everyone
Building React Native without Expo means managing Xcode and Android Studio project files directly. Expo abstracts this entirely and provides a managed build service (EAS) that compiles your app in the cloud. Only eject from the managed workflow when you need a native module that Expo does not provide — which is rare.
Try this
Look at a React component you have built for the web. Mentally replace every HTML element with its React Native equivalent: div → View, p/span → Text, img → Image, button → Pressable, input → TextInput. How much of the logic (state, effects, handlers) can stay exactly as is? Everything that is not HTML or CSS is directly portable.