City selection
- React Native course
- Beginner
- Lesson 86/116
- 6 min
Add city selection.
City selection approach
For letting the user pick a city, there are a few options: buttons, a list, or a Picker. We will use a Picker in this project; it is like a dropdown and takes little space.
Picker comes from the @react-native-picker/picker package. You import it with import {'{ Picker }'} from '@react-native-picker/picker'. For each city you add a <Picker.Item>.
The selectedValue prop shows which city is selected, and onValueChange fires when the pick changes. We will use setWeather to swap the whole weather object for the new city.
Update weather on city change
The Picker's onValueChange prop receives the newly picked value. We use it to build a new weather object and store it with setWeather.
Example: onValueChange={'{(value) => setWeather(getWeather(value))}'}. Here getWeather is a helper that takes a city name and returns its weather object. This keeps the code clean.
In this lesson we write getWeather as a simple if chain or an object map. Three cities are enough for now: London, Manchester, Liverpool. We hand-set their temp and condition values.
Practice Add the city picker
Add a <Picker> to the App component. Give it selectedValue={'{weather.city}'} and onValueChange props. onValueChange should call setWeather for the new city. Put at least two <Picker.Item> tags inside (London and Manchester). Export the App function.
Starter code
import { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';
function App() {
const [weather, setWeather] = useState({ city: 'London', temp: 14, condition: 'Cloudy' });
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>
{/* add the Picker here */}
</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
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;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Import Picker
import { ____ } from '@react-native-picker/picker';import { Picker } from '@react-native-picker/picker';Explanation: Picker comes from the @react-native-picker/picker package.
2 Match the city-picker parts
| Term | Meaning |
|---|---|
Picker |
Dropdown component |
selectedValue |
Holds the selected value |
onValueChange |
Fires on change |
Picker.Item |
A single option |
3 What fires on Picker change?
- onPress Correct answer
- onLayout
- onChangeText
- onValueChange
Explanation: onValueChange is the Picker's selection event.