React Native
Project design
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.
Exercise Set up the App skeleton
Write an App component. Hold a tasks state with useState([]). The component returns <Text>Field Report</Text>.
Show example 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>
);
}
Test yourself
-
What is at the heart of this project?
function App() { /* ... */ }
- An image
- The tasks state
- An animation
- A game score
Show answer
The tasks state — The tasks state is the heart of the project.
-
useState call
const [tasks, setTasks] = ____([]);
Show answer
const [tasks, setTasks] = useState([]);
-
Match each piece to its role
- tasks
- Tasks array
- setTasks
- State updater
- App
- Root component
- Text
- Shows title
Next lesson: Auth and API
