React Native is a framework that lets you build real, native apps for iOS and Android using JavaScript – one codebase, two platforms. In this tutorial we'll build a small but complete product catalog app together, step by step: a product list, a detail page, a search feature, and favorites. By the end, you won't just know HOW to use React Native, but WHY each building block works the way it does.

Who is this tutorial for?

Anyone who has never worked with React Native before – whether you already know how to program or you're a complete beginner. Wherever it helps, we compare React Native concepts directly to familiar HTML/CSS building blocks, so anyone who has built a webpage before has an instant mental shortcut.

What React Native does differently from a website

A regular website runs in a browser and is assembled from HTML, CSS and JavaScript. A React Native app, on the other hand, runs directly on the phone – no browser in between – and is assembled from real native building blocks of the respective operating system. You still write JavaScript (or rather a mix of JavaScript and an HTML-like syntax called JSX), but React Native translates that into real iOS and Android components behind the scenes.

Why React Native (and not, say, Swift or Kotlin directly)?

• One codebase, two platforms: you write the code once and it runs (with small adjustments) on both iOS and Android.
• JavaScript instead of Swift/Kotlin: if you already have some web experience, getting started is significantly easier than learning a whole new language per platform.
• Large community: there's already a ready-made solution for almost every problem, available as an installable package (a "library").
• Built by Meta (Facebook, Instagram) and used in real, large-scale apps – not a niche experiment.

Expo vs. "bare React Native"

There are two ways to start a React Native project: Expo (a toolset that automatically handles many native configuration steps) or "bare React Native" (full control, but you need to set up more yourself, including Xcode/Android Studio from day one). This tutorial uses Expo – by far the easiest way to get started, and entirely sufficient for our sample project. You can always switch to bare React Native later if you need a very specific native feature Expo doesn't cover.

What you'll additionally need from chapter 8 onward

Starting in chapter 8, our app loads real product data from a server API – we use Magento's REST API for this, since this tutorial grew out of a Magento shop's environment. That means: you'll need either access to your own Magento 2 shop (e.g. a local Docker install) OR you use a free, public test API without any login as a substitute – starting in chapter 8, we'll show both variants side by side, with identical surrounding code. Without either of those, only the part of the tutorial up through chapter 7 will work.