CodeBlanks Logo Icon CodeBlanks
Login Register

Putting it together

Combine all parts into a working weather app.

Putting it all together

In the final step we combine every part: the app skeleton, the weather state, the temperature and condition display, and the city picker. We will also add a pull-to-refresh feature.

From the ScrollView and RefreshControl groups you remember: <RefreshControl refreshing={'{refreshing}'} onRefresh={'{handleRefresh}'} /> does pull-to-refresh. The refreshing state drives the spinner; handleRefresh re-fetches the data.

In this project we do not fetch from a network; we use setTimeout to flip setRefreshing(false) after two seconds and give the refresh feel. In a real app this is where a network request would happen.

Final touches

Now there are two tasks. First combine the Picker and the weather card on the same screen; then wrap the whole View in a ScrollView and add a refreshControl.

In the first task put the Picker below the card. selectedValue and onValueChange are already defined; just fix the position.

In the second task replace the outer shell with a <ScrollView>. Give its refreshControl prop a <RefreshControl refreshing={'{refreshing}'} onRefresh={'{handleRefresh}'} />. Define refreshing with useState(false) and a handleRefresh that flips it back to false after two seconds via setTimeout.

Practice Combine the card and city picker

In the App component, show the weather card and Picker together. Card on top, Picker below. Use a getWeather function and a WEATHER_BY_CITY object. Add at least two <Picker.Item> tags. Export the App function.

Starter code

App.js
import { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';

// write WEATHER_BY_CITY, getWeather and App here

Sample solution

App.js
import { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';

const WEATHER_BY_CITY = {
  'London': { city: 'London', temp: 14, condition: 'Cloudy' },
  'Manchester': { city: 'Manchester', temp: 12, condition: 'Rainy' }
};
const getWeather = (city) => WEATHER_BY_CITY[city] || WEATHER_BY_CITY['London'];

function App() {
  const [weather, setWeather] = useState(getWeather('London'));
  return (
    <View style={styles.container}>
      <Text style={styles.city}>{weather.city}</Text>
      <Text style={styles.temp}>{weather.temp}°C</Text>
      <Text style={styles.condition}>{weather.condition}</Text>
      <Picker
        selectedValue={weather.city}
        onValueChange={(value) => setWeather(getWeather(value))}>
        <Picker.Item label='London' value='London' />
        <Picker.Item label='Manchester' value='Manchester' />
      </Picker>
    </View>
  );
}
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  city: { fontSize: 24, marginBottom: 8 },
  temp: { fontSize: 64, fontWeight: 'bold' },
  condition: { fontSize: 18, color: '#555' }
});
export default App;

Practice Write the full app

Replace the outer View shell with a <ScrollView>. Give its refreshControl prop a <RefreshControl refreshing={'{refreshing}'} onRefresh={'{handleRefresh}'} />. Define refreshing with useState(false) and a handleRefresh that calls setRefreshing(false) after two seconds. Keep the card and Picker inside. Export the App function.

Starter code

App.js
import { useState } from 'react';
import { View, Text, StyleSheet, ScrollView, RefreshControl } from 'react-native';
import { Picker } from '@react-native-picker/picker';

const WEATHER_BY_CITY = {
  'London': { city: 'London', temp: 14, condition: 'Cloudy' },
  'Manchester': { city: 'Manchester', temp: 12, condition: 'Rainy' }
};
const getWeather = (city) => WEATHER_BY_CITY[city] || WEATHER_BY_CITY['London'];

function App() {
  const [weather, setWeather] = useState(getWeather('London'));
  // write refreshing state and handleRefresh here
  return (
    <View style={styles.container}>
      <Text style={styles.city}>{weather.city}</Text>
      <Text style={styles.temp}>{weather.temp}°C</Text>
      <Text style={styles.condition}>{weather.condition}</Text>
      <Picker selectedValue={weather.city} onValueChange={(value) => setWeather(getWeather(value))}>
        <Picker.Item label='London' value='London' />
        <Picker.Item label='Manchester' value='Manchester' />
      </Picker>
    </View>
  );
}
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  city: { fontSize: 24, marginBottom: 8 },
  temp: { fontSize: 64, fontWeight: 'bold' },
  condition: { fontSize: 18, color: '#555' }
});
export default App;

Sample solution

App.js
import { useState } from 'react';
import { View, Text, StyleSheet, ScrollView, RefreshControl } from 'react-native';
import { Picker } from '@react-native-picker/picker';

const WEATHER_BY_CITY = {
  'London': { city: 'London', temp: 14, condition: 'Cloudy' },
  'Manchester': { city: 'Manchester', temp: 12, condition: 'Rainy' }
};
const getWeather = (city) => WEATHER_BY_CITY[city] || WEATHER_BY_CITY['London'];

function App() {
  const [weather, setWeather] = useState(getWeather('London'));
  const [refreshing, setRefreshing] = useState(false);
  const handleRefresh = () => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  };
  return (
    <ScrollView style={styles.container} contentContainerStyle={{ alignItems: 'center', justifyContent: 'center', flex: 1 }} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}>
      <Text style={styles.city}>{weather.city}</Text>
      <Text style={styles.temp}>{weather.temp}°C</Text>
      <Text style={styles.condition}>{weather.condition}</Text>
      <Picker selectedValue={weather.city} onValueChange={(value) => setWeather(getWeather(value))}>
        <Picker.Item label='London' value='London' />
        <Picker.Item label='Manchester' value='Manchester' />
      </Picker>
    </ScrollView>
  );
}
const styles = StyleSheet.create({
  container: { flex: 1 },
  city: { fontSize: 24, marginBottom: 8 },
  temp: { fontSize: 64, fontWeight: 'bold' },
  condition: { fontSize: 18, color: '#555' }
});
export default App;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 How do you do pull-to-refresh?

  • Only with Pressable
  • With RefreshControl Correct answer
  • Only with StyleSheet
  • Only with Picker

Explanation: RefreshControl works with refreshing and onRefresh.

2 Match the integration parts

Term Meaning
ScrollView Outer shell
RefreshControl Pull-to-refresh
Picker City selection
weather state Temperature and condition data

All lessons in Beginner

1 React Native basics

  1. What is React Native?
  2. Expo setup
  3. Your first component
  4. App.js
  5. Running
  6. Summary - React Native basics

2 JSX

  1. What is JSX?
  2. Expressions
  3. Component tree
  4. Self-closing
  5. Conditional rendering
  6. Summary - JSX

3 Components

  1. Functional components
  2. Props
  3. Children
  4. Multiple props
  5. Component reuse
  6. Summary - Components

4 Project: Counter app

  1. Project design
  2. useState
  3. Increment and decrement
  4. TouchableOpacity
  5. Putting it together

5 TextInput

  1. TextInput
  2. onChangeText
  3. Controlled input
  4. placeholder
  5. Secure text
  6. Summary - TextInput

6 Style

  1. style prop
  2. StyleSheet.create
  3. Color and font
  4. Margin and padding
  5. border
  6. Summary - Style

7 Flexbox

  1. flexDirection
  2. justifyContent
  3. alignItems
  4. flex
  5. flexWrap
  6. Summary - Flexbox

8 Buttons

  1. Button
  2. TouchableOpacity
  3. Pressable
  4. onPress and onPressIn
  5. disabled
  6. Summary - Buttons

9 Project: To-do app

  1. App design
  2. Adding tasks
  3. Task list
  4. Completing tasks
  5. Putting it together

10 Lists

  1. FlatList
  2. renderItem
  3. keyExtractor
  4. SectionList
  5. List header and footer
  6. Summary - Lists

11 ScrollView

  1. ScrollView
  2. horizontal
  3. contentContainerStyle
  4. onScroll
  5. RefreshControl
  6. Summary - ScrollView

12 Images

  1. Image
  2. source
  3. resizeMode
  4. ImageBackground
  5. Image size
  6. Summary - Images

13 State

  1. useState
  2. State update
  3. Previous state
  4. Multiple state
  5. Object state
  6. Summary - State

14 Events

  1. onPress
  2. onLongPress
  3. Event parameters
  4. onLayout
  5. Form events
  6. Summary - Events

15 Project: Weather app

  1. App design
  2. Data model
  3. Display
  4. City selection
  5. Putting it together

16 Navigation

  1. React Navigation
  2. Stack navigator
  3. navigate
  4. params
  5. Back button
  6. Summary - Navigation

17 Alerts

  1. Alert
  2. Alert buttons
  3. Toast
  4. Modal
  5. Modal animation
  6. Summary - Alerts

18 Platform

  1. Platform.OS
  2. Platform.select
  3. Platform.Version
  4. File extension
  5. Platform-specific components
  6. Summary - Platform

19 Async Storage

  1. AsyncStorage
  2. setItem
  3. getItem
  4. removeItem
  5. JSON serialize
  6. Summary - Async Storage

20 Beginner final

  1. Project design
  2. Components
  3. State and events
  4. Navigation
  5. Putting it together