Chapter 01 — What is React Native?
Chapter 01 — What is React Native?
Hey everyone! Welcome to Namaste React Native!
You already write React for the web. Now imagine writing that same React — components, props, hooks, state — but instead of a website, you get a real iOS and Android app that you can install from the App Store. That's React Native. Let's understand what it really is before we write a line of code.
What we will cover:
- What React Native actually is (and isn't)
- How it's different from a website in a box (WebView)
- "Learn once, write anywhere"
- How JavaScript talks to native: the Bridge (old) & JSI (new)
- React Native vs Flutter vs fully native
- What runs where: the three threads
- Why your React knowledge transfers directly
- Interview Questions
1. What React Native Actually Is
React Native lets you build mobile apps using JavaScript and React. But here's the key part that surprises people:
┌─────────────────────────────────────────────────────────────┐ │ React Native renders REAL native UI components. │ ├─────────────────────────────────────────────────────────────┤ │ │ │ When you writein React Native... │ │ │ │ on Android → it becomes a real android.view.View │ │ on iOS → it becomes a real UIView │ │ │ │ Your buttons, text, and lists are ACTUAL native widgets — │ │ the same ones a Swift or Kotlin developer would use. │ │ │ └─────────────────────────────────────────────────────────────┘
So the user is NOT looking at a website. They're looking at genuine native buttons, native scrolling, native text — all controlled by your JavaScript.
2. It's NOT a Website in a Box (WebView)
A common confusion: "Isn't this just a website wrapped in an app?" No! That's a different thing called a hybrid app (like Cordova/Ionic), and it feels slower and less native.
┌─────────────────────────────────────────────────────────────┐ │ HYBRID APP (Cordova) vs REACT NATIVE │ ├─────────────────────────────────────────────────────────────┤ │ │ │ │ Renders a WEBSITE inside │ Renders REAL native views │ │ a WebView (browser box) │ (UIView / android.View) │ │ │ │ │ HTML/CSS → looks web-ish │ Native widgets → looks & │ │ feels laggy │ feels like a real app │ │ │ │ └─────────────────────────────────────────────────────────────┘
3. "Learn Once, Write Anywhere"
React Native's real promise is not "write once, run everywhere" (that's often a myth). It's "learn once, write anywhere":
✔ ONE codebase in JavaScript/React ✔ Runs on BOTH iOS and Android ✔ ~90% of your code is shared ✔ The ~10% that differs is platform-specific tweaks ✔ You use the SAME skills (React) for both platforms
Companies love this: instead of hiring separate iOS (Swift) and Android (Kotlin) teams, one React team ships to both. Apps like Instagram, Discord, Shopify, and Coinbase use React Native.
4. How JavaScript Talks to Native
Your app has two worlds: the JavaScript world (your React code) and the Native world (the actual iOS/Android UI). They need to communicate. Historically this happened over "the Bridge."
┌─────────────────────────────────────────────────────────────┐ │ THE OLD BRIDGE (React Native's classic model) │ ├─────────────────────────────────────────────────────────────┤ │ │ │ JavaScript ◄────── Bridge ──────► Native (iOS/Android) │ │ (your React) messages as (real UI views) │ │ JSON, async │ │ │ │ "Create a button here" → serialize to JSON → native │ │ │ │ Problem: everything is converted to JSON and sent │ │ asynchronously. For heavy work (animations, big lists) │ │ this could get slow / janky. │ │ │ └─────────────────────────────────────────────────────────────┘
The New Architecture replaces this with JSI (JavaScript Interface) — which lets JavaScript call native functions directly, without the JSON serialization step. We cover this fully in Deep Dive 01, but the one-line takeaway:
OLD: JS → JSON → Bridge (async) → Native (slower) NEW: JS → JSI → Native directly (sync, via C++) (much faster)
5. React Native vs Flutter vs Fully Native
| React Native | Flutter | Fully Native | |
|---|---|---|---|
| Language | JavaScript / React | Dart | Swift (iOS) + Kotlin (Android) |
| UI | Real native components | Its own rendering engine | Native (of course) |
| Code sharing | ~90% both platforms | ~90% both platforms | 0% — two codebases |
| Best when | You know React / web team | Pixel-perfect custom UI | Max performance / platform features |
If your team knows React (like you do!), React Native is the natural, fastest path to a mobile app.
6. What Runs Where: The Three Threads
Understanding this explains a LOT of performance behavior later. React Native runs on three main threads:
┌─────────────────────────────────────────────────────────────┐ │ THE 3 THREADS OF REACT NATIVE │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 1. JS THREAD │ │ Runs your React code, business logic, API calls. │ │ If you block this → the app feels frozen. │ │ │ │ 2. SHADOW THREAD │ │ Calculates layout using the Yoga engine (Flexbox). │ │ Figures out WHERE each view goes. │ │ │ │ 3. NATIVE / UI THREAD (main thread) │ │ Actually draws the views on screen & handles gestures. │ │ Must stay at 60fps for smooth scrolling. │ │ │ └─────────────────────────────────────────────────────────────┘
The golden rule: keep heavy work OFF the JS thread and OFF the UI thread, or the app gets janky. We'll return to this in the performance chapter and Deep Dive 02.
7. Why Your React Knowledge Transfers Directly
SAME in React and React Native: ──────────────────────────────── ✔ Components (functional) ✔ Props & state ✔ ALL hooks (useState, useEffect, useContext, useMemo...) ✔ JSX syntax ✔ Component composition & the "Lego block" mindset ✔ Context API, Redux, Zustand ✔ The whole npm ecosystem DIFFERENT (what this series teaches): ───────────────────────────────────── ✗→, ); ); } } Almost identical! Just different building blocks.→
, →
✗ CSS files → StyleSheet objects ✗ onClick → onPress ✗ Browser routing → React Navigation ✗ New APIs: camera, storage, notifications React web component: React Native component: ───────────────────── ────────────────────── function Hello() { function Hello() { return ( return (Hi!
Hi!
Interview Questions — Quick Fire!
Q: What is React Native?
"React Native is a framework for building native mobile apps for iOS and Android using JavaScript and React. Unlike hybrid frameworks, it renders real native UI components — a View becomes a UIView on iOS and an android.View on Android — so the app looks and feels genuinely native while sharing most of the code across platforms."
Q: How is React Native different from a hybrid (WebView) app?
"A hybrid app like Cordova renders a website inside a WebView, so it's really HTML/CSS in a browser box and tends to feel less native. React Native renders actual native views controlled by JavaScript, giving native look, feel, and performance without a WebView."
Q: What does 'learn once, write anywhere' mean?
"It means the skills and code transfer across platforms — you use React to target both iOS and Android with one shared codebase, rather than writing separate Swift and Kotlin apps. It's not a guarantee that 100% of the code is identical; a small platform-specific portion remains, but the vast majority is shared."
Q: How does JavaScript communicate with native code in React Native?
"Traditionally through the Bridge, which passed serialized JSON messages asynchronously between the JS thread and the native side. The New Architecture replaces this with JSI, the JavaScript Interface, which lets JavaScript call native C++ functions directly and synchronously, removing the serialization bottleneck."
Q: What are the three threads in React Native?
"The JS thread runs your React code and logic; the Shadow thread computes layout using the Yoga engine; and the native or UI thread draws the views and handles gestures. Keeping heavy work off the JS and UI threads is key to a smooth 60fps app."
Quick Recap
Concept Key Takeaway React Native Build native iOS/Android apps with React & JS. Real native UI <View> → UIView / android.View, not a WebView. Learn once One React skillset, both platforms, ~90% shared code. Bridge → JSI Old: async JSON. New: direct native calls. 3 threads JS, Shadow (Yoga layout), Native/UI. Transfers Components, hooks, props, state — all the same. What's Next?
In Chapter 02 we get hands-on: install React Native, create your first app with the CLI, and run it on an Android emulator and iOS simulator. Time to see it live!
Keep coding, keep shipping! See you in the next one!
Post a Comment