Course Overview

Grokking React Native teaches you to build mobile applications for iOS and Android from a single JavaScript codebase. You begin with one line of text on a phone screen. By the last chapter, you will have written applications that move between screens, fetch data from a server, use the camera and other device features, respond to gestures, and share state across many screens.

React Native lets you describe a screen with React and then displays it with the operating system's own native views, so the result looks and behaves like any other application on the phone. The next chapter explains how that works, and the rest of the course teaches you to use it.

Who This Course Is For

You should already be comfortable with JavaScript, including functions, objects, arrays, modules, and promises. You do not need to know React, because the course teaches components, props, state, and hooks from the beginning.

The course suits four kinds of reader:

• JavaScript developers who want to start building mobile applications.
• Frontend developers who know React for the web and want to apply that knowledge on phones. The early chapters will move quickly for you, but they point out where React Native differs from the web.
• Mobile developers who know Swift or Kotlin and want to share one codebase across both platforms.
• Full-stack developers who want to connect a mobile application to their APIs, handle authentication, and use native features.

How the Course Works

Each lesson explains one topic through working code, and each chapter builds on the chapters before it. The examples run in a project created with Expo, a framework for React Native that needs very little setup. You create that project in the next chapter, so you can type the examples and watch them run on a phone or an emulator.

Every chapter after this introduction ends with an assessment. Each attempt draws a set of questions from a larger bank, and each answer comes with an explanation, including why each wrong option is wrong.

Course Structure

The course has 21 chapters. They are listed below in order, grouped by what they prepare you to do.

Getting started

• Course Introduction: this overview.
• Introduction to React Native: how React Native turns your code into native views, how it compares with other frameworks, how to create your first application, and what each file in the project does.
• JSX: how to write the syntax that describes a screen, insert JavaScript values into it, nest elements, and use self-closing tags.

The core of React

• Components: what components are, how to import and export them, and how to make them reusable and well organized.
• Props: how to pass data and functions to a component, set default values, and recognize prop drilling.
• Handling Events: how to respond to presses and other user actions.
• Introduction to Hooks: what hooks are, the rules they follow, and the ones you will use most often.
• State: how useState works, how to manage several state variables, how to lift state up, which mistakes to avoid, and how state differs from props.
• Refs: how to keep a value between renders without causing a new render, and how to reach a component directly.

Building real screens

• Handling User Inputs: how to capture text with TextInput, keep it in state, and validate it by hand and with Yup and Formik.
• Styling: inline styles and StyleSheet, Flexbox layout, responsive screens, colors and themes, fonts, images and backgrounds, and styled buttons.
• Navigation: how to move between screens with React Navigation, using stack, tab, and drawer navigators.

Working with data

• Data Fetching: how to load data with useEffect, the Fetch API, and Axios, and how to handle errors, retries, and authenticated requests.
• React Query: how to cache server data with useQuery, change it with useMutation, refetch it through invalidation, and support offline use.
• Managing Lists: how to display data with FlatList and SectionList, and how to add pagination and infinite scrolling.
• Performance Optimization for Large Lists: how to reduce rendering work with memoization and virtualized lists.

Using the device and polishing the interface

• Native Features: native modules, the camera and image picker, location and maps, sensors, Bluetooth and NFC, background tasks, biometric authentication, and file storage.
• Advanced Styling and UI Libraries: styled-components, ready-made component libraries, and dark mode.
• Animations and Gestures: the Animated API, interpolation, swipe, drag, and multi-finger gestures, and how to keep them smooth.

Sharing state across an application

• Context API: how to share global state, combine context with reducers, avoid needless renders, and decide when context is the wrong choice.
• Redux Toolkit: how to set up a store, write slices, fetch data with createAsyncThunk, use middleware, debug, and compare Redux Toolkit with other options.