App design
- React Native course
- Beginner
- Lesson 83/116
- 6 min
Design the structure of the weather app.
The weather app
In this project you will build a small weather app. The app shows the temperature and condition of a city; the user can pick a city and pull to refresh.
We will go step by step: first set up the skeleton, then define the data model, then display the temperature, add a city picker, and finally combine every part. Each lesson builds on the solution of the previous one.
This project brings together what you learned in the ScrollView, Image, state and events groups. Let us start.
Split into components
Splitting the app into small pieces makes development easier. For now, a single App component is enough; you can split it later.
The skeleton has a <View> container and a <Text> heading inside. We use StyleSheet.create to keep the container centered and flexible. In later lessons we fill this skeleton.
The goal for now: a skeleton with no compile errors and a heading on the screen. Later steps add state, display and interaction.
Practice App skeleton
Write an App component. Inside it have a <View style={'{styles.container}'}> with a <Text>Weather</Text> child. Define a container style with StyleSheet.create: flex: 1, justifyContent: 'center', alignItems: 'center'. Export the App function.
Starter code
import { View, Text, StyleSheet } from 'react-native';
// write the app skeleton hereSample solution
function App() {
return (
<View style={styles.container}>
<Text>Weather</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
});
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does the app show?
- Only the clock
- The city's temperature and condition Correct answer
- Only the calendar
- Only the battery level
Explanation: temperature and condition are the main info.
2 Import StyleSheet
import { View, Text, ____ } from 'react-native';import { View, Text, StyleSheet } from 'react-native';Explanation: we define styles with StyleSheet.create.
3 Match the skeleton parts
| Term | Meaning |
|---|---|
View |
Container shell |
Text |
Heading element |
StyleSheet |
Style object |
App |
Root component |