Computer Science
Grade 10
20 min
3. Introduction to React Native: Building Cross-Platform Mobile Apps
Learn how to use React Native to build cross-platform mobile apps for iOS and Android.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Implement a multi-screen navigation stack using React Navigation.
Fetch data from a remote API using the `fetch` function and display it in the app.
Manage and share application state across multiple components using the React Context API.
Use `useEffect` to handle side effects, such as API calls, when a component mounts.
Persist simple data locally on the device using AsyncStorage.
Explain the concept of asynchronous programming with `async/await` in the context of mobile apps.
Ever wonder how an app like Instagram loads new posts or how a game saves your high score even after you close it? 🤔 Let's unlock those secrets!
In this chapter, we move beyond single-screen apps. You'll learn professional techniques to create complex, multi-screen app...
2
Key Concepts & Vocabulary
TermDefinitionExample
React NavigationA library that allows you to manage the screens of your app and the transitions between them. It provides different types of navigators, like a 'stack' where new screens are pushed on top of old ones.In a settings menu, tapping 'Profile' pushes the Profile screen onto the navigation stack. The back button then 'pops' it off, returning you to the main settings screen.
API (Application Programming Interface)A set of rules and tools for building software applications. In mobile development, we often use Web APIs to request data from a server, usually in a format like JSON.Your weather app uses a weather service's API. It sends a request like `api.weather.com/forecast?city=Toronto` and gets back JSON data: `{"temp&q...
3
Core Syntax & Patterns
The `useEffect` Hook for Data Fetching
useEffect(() => {
// Side effect code runs here
}, [dependencyArray]);
Use this hook to run code after a component renders. For fetching data, use an empty dependency array `[]` to ensure the fetch only happens once when the component first mounts. This prevents infinite loops of re-rendering and re-fetching.
Async/Await Syntax for Promises
async function fetchData() {
const response = await fetch('API_URL');
const data = await response.json();
// use data
}
This is modern syntax for handling asynchronous operations. The `async` keyword declares an asynchronous function. The `await` keyword pauses the function's execution until the `Promise` (e.g., the network request) is resolved, making the code look and beha...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
A screen shows user details based on a `userId` from navigation params. The code is: `useEffect(() => { loadUser(route.params.userId); }, []);`. What bug occurs if the user navigates from one user's profile directly to another's profile (e.g., from user 1's page to user 2's page)?
A.The `useState` initial value should be `null`, not `{}`.
B.The `loadUser` function should not be `async` because it is inside `useEffect`.
C.The `fetch` call will fail because the URL is a string template.
D.The `useEffect` will only run once and will not re-fetch data when `route.params.userId` changes.
Challenging
You need to load user settings when the app starts. The logic should be: try `AsyncStorage` first; if no settings are found, fetch default settings from an API. Which implementation is most robust?
A.Use one `useEffect` to read from `AsyncStorage`, and a separate `useEffect` to fetch from the API.
B.In a single `useEffect` with `[]`, create an `async` function. Inside, `await` `AsyncStorage.getItem`. If the result is null, then `await` a `fetch` call. Finally, update state with the result.
C.Fetch from the API in a `useEffect`. In the `.then()` block of the fetch, check if `AsyncStorage` has data and overwrite it.
D.Don't use `useEffect`. Call the logic directly in the component body.
Challenging
An app has a 'light'/'dark' theme setting that many components need to access. Why is the Context API a more suitable solution for managing the theme than using `AsyncStorage` alone?
A.`AsyncStorage` is asynchronous and would be too slow for style changes.
B.`AsyncStorage` can only store strings, not theme objects.
C.Context API automatically causes consuming components to re-render when its value changes. `AsyncStorage` does not trigger re-renders.
D.Context API is more secure than `AsyncStorage`.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free