Project design
- React Native course
- Advanced
- Lesson 79/83
- 6 min
Design the skeleton of the advanced final mini app.
Project: Field Report
In this project you will build a Field Report app. We will go step by step over five lessons; each lesson adds a piece on top of the previous solution. The result: login with auth, task loading with an API, native features with camera and location, offline work with a cache.
The first lesson sets up the skeleton: an App component, a tasks state and a title text. Then we add an auth context. We load tasks from an API. We wire camera and location native features. Finally we integrate all parts with an offline cache. This final brings your advanced React Native knowledge together.
A five lesson roadmap
Our roadmap has five lessons. First lesson: skeleton — App, tasks state, title. Second lesson: auth context and API fetch. Third lesson: camera and location native hooks. Fourth lesson: offline cache with AsyncStorage. Fifth lesson: integration — wiring all layers.
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>Field Report</Text>.
Starter code
import React, { useState } from 'react';
import { Text, View } from 'react-native';
// Add the App component and tasks state hereSample solution
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [tasks, setTasks] = useState([]);
return (
<View>
<Text>Field Report</Text>
</View>
);
}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() { /* ... */ }- An image
- The tasks state Correct answer
- An animation
- A game score
Explanation: The tasks state 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 |