Project design
- React Native course
- Beginner
- Lesson 112/116
- 6 min
Design the skeleton of the beginner final mini app.
Project: Shopping List
In this project we will build a Shopping List app that summarizes the beginner level. We will progress step by step over five lessons: first create the skeleton, then add TextInput, manage state with useState, set up navigation and finally combine everything with a details screen.
Each lesson provides a starting code that includes the previous lesson's solution. You only add the new piece. When the project is done you will have a working mini app: you can add items, navigate to a details screen and go back.
The skeleton
The first step of the project is to create the app skeleton. You define an App component, put a <View> inside and show a <Text> as the title. You define styles with StyleSheet.create.
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Shopping List</Text>
</View>
);
}This skeleton is the base on which you will add new pieces in the following lessons. With flex: 1 the View covers the whole screen; with padding: 16 you leave space at the edges.
Practice Your turn: app skeleton
Import View, Text and StyleSheet from react-native. Inside the App component show a <View style={styles.container}> containing <Text>Shopping List</Text>. Give the container style flex: 1 and padding: 16 with StyleSheet.create.
Starter code
// import View, Text and StyleSheet
export default function App() {
return null;
}Sample solution
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Shopping List</Text>
</View>
);
}
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 tools will be used in this project?
- View, Text, TextInput, useState and navigation Correct answer
- Only View and Text
- Only CSS styles
- Only the Alert component
Explanation: The project combines all beginner fundamentals.
2 Fill in the blank: import StyleSheet
import { View, Text, ____ } from 'react-native';import { View, Text, StyleSheet } from 'react-native';Explanation: You define styles with StyleSheet.
3 Match: component and role
| Term | Meaning |
|---|---|
View |
container |
Text |
text |
StyleSheet |
style |