Project design
- React Native course
- Intermediate
- Lesson 112/116
- 6 min
Design the skeleton of the intermediate final mini app.
Project: Tasks app
In this project you will build a Tasks app. We will go step by step over five lessons; each lesson adds a piece on top of the previous solution. The result: state sharing with Context, reusable logic with hooks, data loading with an API and a multi screen structure with navigation.
The first lesson sets up the skeleton: an App component, a tasks state and a title text. Then we will open this state to all components with Context. We will load tasks from an API. We will add two screens with tab navigation. Finally we will integrate all parts with a loading state. This is a final that brings your intermediate React Native knowledge together.
A five lesson roadmap
Our roadmap has five lessons. First lesson: skeleton — App, tasks state, title. Second lesson: Context — TasksContext and the useTasks hook. Third lesson: API — fetch with useEffect. Fourth lesson: navigation — two screens with Tab.Navigator. Fifth lesson: integration — loading state.
Each lesson ends with a code step. The next lesson's starting code contains the previous lesson's solution. This way every step you take is permanent; it is not erased. This cumulative structure shows how a real project grows. In the last lesson all parts come together and a complete app emerges.
Practice Set up the App skeleton
Write an App component. Hold a tasks state with useState([]). The component returns <Text>Tasks</Text>.
Starter code
// Import useState
function App() {
// Initialize tasks state (empty array)
return <Text>Tasks</Text>;
}Sample solution
import { useState } from "react";
import { Text } from "react-native";
function App() {
const [tasks, setTasks] = useState([]);
return <Text>Tasks</Text>;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is at the heart of this project?
function App() { /* ... */ }- A game
- An image
- An animation
- The tasks context Correct answer
Explanation: The tasks context is the heart of the project.
2 useState call
const [tasks, setTasks] = ____([]);const [tasks, setTasks] = useState([]);Explanation: useState initializes the tasks state.
3 Match each piece to its role
| Term | Meaning |
|---|---|
tasks |
Tasks array |
setTasks |
State updater |
App |
Root component |
Text |
Shows title |