App design
- React Native course
- Beginner
- Lesson 48/116
- 6 min
Design the structure of the to-do app.
App design
In this project you will build a real to-do app. The app grows cumulatively over five lessons: first the skeleton, then adding tasks, the task list, completing tasks, and finally putting it together. Each lesson's starting code contains the previous lesson's solution.
The first lesson sets up two core pieces: a SafeAreaView container and a title text. The following lessons add new pieces inside this container. First a quick look at state management, then you will write the skeleton.
State management
The app uses two states. task holds the text in the input field; tasks holds all added tasks as an array. Each task is an object: { id, text, done }. id is a unique key, text is the task text, done is the completion state.
To add a new task you write setTasks([...tasks, newTask]); this replaces the old array with a new one. React Native re-renders the component when it sees this change. State updates always use a new array or object; never mutate the existing array directly.
Practice Write the app skeleton
Complete the empty App component. Return a <SafeAreaView style={styles.container}> containing <Text>To-do</Text>. The container style is already defined in StyleSheet.create.
Starter code
import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
export default function App() {
// Add the title and container
return null;
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});Sample solution
import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<Text>To-do</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which state holds the task list?
const [???, setTasks] = React.useState([]);- task
- text
- tasks Correct answer
- items
Explanation: The tasks array holds all tasks; setTasks updates it.
2 Define the tasks state
const [tasks, setTasks] = React.useState(____);const [tasks, setTasks] = React.useState([]);Explanation: It starts as an empty array; it fills as you add tasks.
3 Match each state to its purpose
| Term | Meaning |
|---|---|
task |
Input field text |
tasks |
Task array |
setTasks |
Updates the array |
done |
Completion state |