MA3: Native or cross-platform: Swift, Kotlin, Flutter and React Native

Lesson 3 of 5 · reading 15–25 minutes; practice and project time is on the module page

Cross-platform with React Native and Flutter

🎯You'll be able to

Explain how React Native and Flutter build apps for both platforms from one codebase, and how they differ.

🏠The everyday picture

A translator who works into two languages can write one speech and deliver it in both. Most of it translates cleanly; a few jokes need rewriting for each audience.

📘What it really is

React Native uses JavaScript or TypeScript and React. It draws the platforms' own native views, and talks to native code through a fast interface (the New Architecture). Its JavaScript runs on Hermes, an engine built for phones.
Flutter uses Dart. It draws every pixel itself with its own engine, so apps look the same on both platforms unless you choose platform styles.
One codebase, two apps: most screens and logic are shared; some platform-specific code is still needed.
Fast iteration: both reload changes in seconds while you develop.
Native access: both reach native features through plugins or modules, and can include your own native code.

📝A worked example

Input: compare the three ways of showing KhetNote's list.

Steps:

React Native: FlatList of VisitRow components; native views underneath.
Flutter: ListView.builder of VisitRow widgets; drawn by Flutter's engine.
Native: LazyColumn on Android and List on iOS, written twice.

Expected output: a table of the three, with the language, how it draws, and how much code is shared.

🌍Where it's used

Start-ups that need both platforms with one small team.
Large apps that use React Native or Flutter for some screens inside a native app.
Internal company apps where speed of building matters most.

📝Case scenario

A food delivery start-up had four web developers who knew React. Choosing React Native let them ship both apps in three months. They wrote one small native module, for a payment SDK, with help from a contractor.

🖱️Try it

Open KhetNote's package.json and list the packages that are about the phone (storage, network status) rather than the screens. Success: you can say which ones contain native code.

⚠️Common mistakes

"Write once, run anywhere" with no testing. Sign: Android-only bugs. Fix: test both platforms.
Assuming Flutter and React Native look the same. Sign: surprise at platform styles. Fix: know how each draws.
Avoiding native code at all costs. Sign: a missing feature. Fix: write or use a small native module.

🛠️For your project

KhetNote uses React Native with Expo; its storage and network status packages include native code, replaced by test versions in tests/setup.js.

✅Quick check

How does Flutter draw its screens, compared with React Native?

Show the answer

Flutter draws every pixel with its own engine; React Native draws the platforms' own native views.

Which language does Flutter use?

Show the answer

Dart.