React Native Tutorials

React Native from the ground up — core components, flexbox, navigation, native APIs, native modules and shipping to the App Store, every example lifted from a real pizza-ordering app running on iOS and Android.

• React Native – Building and Releasing to the App Stores
  The last mile, and the part web developers underestimate. `expo prebuild` and what it generates, EAS Build for machines you do not own, bundle identifiers, versioning and build numbers, environment configuration without leaking secrets, over-the-air updates and what they can and cannot change, and what App Store and Play Store review will ask you for.
• React Native – Internals: Hermes, JSI and the New Architecture
  How the thing actually works. JavaScript runs in Hermes; your components are not drawn by a web view but turned into real native views. The old asynchronous bridge, why it was the bottleneck, and what JSI, Fabric and TurboModules replaced it with. What the New Architecture changes in practice, why Hermes matters for startup time, and how to reason about the two threads when something feels slow.
• React Native – Testing
  What to test and with what. `jest-expo` and React Native Testing Library, mocking the native modules that do not exist in Node, querying by accessibility label so the tests check what a screen reader would find, and the trap in the current version — `render` and `fireEvent` are async now, and forgetting an `await` produces an error that describes the opposite problem. Then where end-to-end testing takes over.
• React Native – Error Boundaries and Failure States
  A crash on a phone is a blank screen the user cannot refresh away. Error boundaries and what they deliberately do NOT catch — event handlers, timeouts, async functions, which is most of the code that fails. Turning an API error into something a customer can read, distinguishing a failure from a cancellation, and the LogBox and red screen you only see in development.
• React Native – Performance
  Why a React Native app drops frames and what to do about it. There are two threads and most of your code is on one of them. `memo` and `useCallback` as a pair — one is useless without the other — `FlatList` over `ScrollView`, animations on the native driver, and the honest advice: measure before you optimise, because the usual suspects are usually innocent.
• React Native – Accessibility
  On the web a `<button>` announces itself. A `View` announces nothing, so every role, state and label is something you declare. `accessibilityRole`, `accessibilityState` and `accessibilityLabel`, grouping with `accessible` — and the trap inside it, which hides children from the accessibility tree and can make a button unreachable. Plus `hitSlop`, and why a spinner needs a label.
• React Native – Taking Payments with Stripe
  A worked native-module example that happens to involve money. Stripe's PaymentSheet rather than a card form of your own — the card never touches your code, which is what keeps you out of PCI scope. The two-step flow and why the order must exist before the sheet opens, treating a dismissed sheet as cancelled rather than failed, and the rule that outranks all of it: the device is never the authority on whether a payment succeeded.
• React Native – Native Modules and Config Plugins
  The moment you need something JavaScript cannot do. Why Expo Go cannot load a native module and a development build can, what `expo prebuild` generates, config plugins that edit the native projects for you, and the architectural move that keeps a native-only dependency from infecting the whole app — one folder, one interface, and a platform-split file the bundler resolves.
• React Native – Platform APIs and Device Differences
  Where "write once" stops. `Platform.OS` and `Platform.select`, `.ios.tsx`/`.android.tsx` files that the bundler picks for you, `Alert` instead of `window.confirm`, `Dimensions` versus `useWindowDimensions` — and `AppState`, the one with no web equivalent at all: the OS can suspend or kill your process without warning, and unsaved work goes with it.
• React Native – Storing Data on the Device
  There is no `localStorage`, and that turns out to be an improvement. `AsyncStorage` for what is inconvenient to lose, `expo-secure-store` — the iOS Keychain and Android EncryptedSharedPreferences — for anything an attacker could use. Both are asynchronous, which is why an app that reads a token on launch needs an `initialising` state and a splash screen that waits for it.
• React Native – Talking to an API
  `fetch` works, and then reality arrives. `localhost` means three different things to a simulator, an emulator and a real phone — so the API host has to be resolved, not hard-coded. A request needs a timeout, because a weak signal does not fail fast. `AbortController` and cleanup, one error type instead of scattered `catch` blocks, and the loading/empty/error triple every screen owes its user.
• React Native – State: Context, Reducers and Custom Hooks
  Same React you already know, with one extra constraint: a phone can be killed at any moment. `useReducer` for rules that depend on previous state, Context for what the whole tree needs, custom hooks for what one screen owns, and the ordering problem nobody warns you about — when one provider reads another, the nesting order becomes load-bearing.
• React Native – Structuring a Real App
  The folder layout that survives a second developer. Feature-first rather than type-first, why route files should name a screen and never implement one, path aliases so nothing imports `../../../`, a single shared type contract with the backend, and the rule that keeps it honest: anything two features need moves down, never sideways.
• React Native – Deep Linking and the URL as State
  A phone app has URLs too. Registering a scheme, what a universal link needs beyond that, and the habit worth keeping from the web: putting screen state in route params so a link opens the app already filtered. Also the trap — a deep link can point at a screen a newer build removed, which is why `+not-found` matters more here than on the web.
• React Native – Navigation
  Navigation is not a router over URLs — it is a stack of native screens. Expo Router makes the folder structure the navigation graph: `(tabs)` groups without adding a URL segment, `[orderId]` declares a dynamic route, `+not-found` catches the rest. Stacks versus tabs, passing and reading params, `push` versus `replace`, and why route files should be one line long.
• React Native – Animations and the Native Driver
  The `Animated` API, and the one flag that matters: `useNativeDriver`. With it the animation runs on the UI thread and stays smooth while JavaScript is busy; without it every frame crosses the bridge. Which properties can be driven natively and which cannot, `interpolate`, starting an animation in an effect rather than in render, and where Reanimated takes over.
• React Native – Modals, Sheets and Overlays
  React Native's `Modal` is a real native window, which is why there is no `createPortal` in a React Native codebase — the z-index wars simply do not happen. Building a bottom sheet, the three things a web modal library gave you for free and you now wire by hand (Android's back button, tap-the-backdrop, the keyboard), and toasts that need no portal at all.
• React Native – TextInput and Forms
  `TextInput` is where a mobile app is won or lost. `keyboardType` and `textContentType` change the keyboard itself and unlock password autofill; `autoCapitalize="none"` on an email field is the single most common React Native bug. Controlled inputs, validation without a form library, per-field errors, and submitting from the keyboard when there is no Enter key.
• React Native – Lists with FlatList
  `ScrollView` renders every child immediately and holds them all in memory. `FlatList` virtualises — and on a phone that is the difference between a list that opens and one that hangs. `keyExtractor`, `renderItem`, header and empty components, multi-column grids, pull-to-refresh in two props, and why `numColumns` needs a `key` to change.
• React Native – Safe Areas, Notches and the Keyboard
  The screen is not a rectangle you own. A notch, a camera cut-out, the home indicator and rounded corners all eat into it, and the amounts differ per device and orientation — so they cannot be constants. `useSafeAreaInsets`, where the navigation header already handles it for you, and `KeyboardAvoidingView`, which needs different behaviour on each platform to work at all.
• React Native – Flexbox and Layout
  Flexbox is the whole layout system — there is no grid and no float. The three defaults that differ from the web and bite constantly: `flexDirection` is `column`, `alignItems` is `stretch`, and `flex: 1` means something subtly different. Plus `gap`, wrapping rows of chips, and why `numberOfLines` is the only `text-overflow` you get.
• React Native – Styling and a Design System
  Styles are JavaScript objects, not CSS. No cascade, no `var()`, no `:hover` — so a design system stops being a nicety and becomes the only way to stay consistent. `StyleSheet.create`, style arrays and how they merge, `Pressable`'s function-style prop for pressed states, and the platform split that makes shadows work on both iOS and Android instead of only one.
• React Native – Core Components
  There is no DOM. `View` instead of `div`, `Text` instead of `span` — and unlike the web, text cannot live outside a `Text`. `Pressable` and why it replaced the four Touchable components, `Image`, `ScrollView`, and the rule that catches every web developer: nothing inherits, so every piece of text names its own size and colour.
• React Native – Set Up a Project with Expo
  One command scaffolds the project. What `create-expo-app` generates and what each file is for, why `app.config.ts` beats a static `app.json` the moment you need an environment variable, path aliases that Metro reads straight from `tsconfig.json`, and the difference that trips everyone up — Expo Go versus a development build, and why anything with a native module needs the latter.
• React Native – Introduction
  Start here. What React Native actually is — real native views driven by JavaScript, not a web view — how it differs from React on the web and from Flutter, when a team picks it and when it should not, Expo versus bare React Native, the exact versions this track is written against, the pizza-ordering app every example comes from, and the full lesson index in reading order.