App design

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.

Exercise 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.

Show example 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;

Test yourself

What does the app show?
- Only the clock
- The city's temperature and condition
- Only the calendar
- Only the battery level
Show answer

The city's temperature and condition — temperature and condition are the main info.

Import StyleSheet

import { View, Text, ____ } from 'react-native';

Show answer

import { View, Text, StyleSheet } from 'react-native';

Match the skeleton parts

View

Container shell
Text

Heading element
StyleSheet

Style object
App

Root component

Next lesson: Data model

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies