React Native
Project design
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.
Exercise 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.
Show example 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 },
});
Test yourself
-
Which tools will be used in this project?
- View, Text, TextInput, useState and navigation
- Only View and Text
- Only CSS styles
- Only the Alert component
Show answer
View, Text, TextInput, useState and navigation — The project combines all beginner fundamentals.
-
Fill in the blank: import StyleSheet
import { View, Text, ____ } from 'react-native';
Show answer
import { View, Text, StyleSheet } from 'react-native';
-
Match: component and role
- View
- container
- Text
- text
- StyleSheet
- style
Next lesson: Components
