React Native
City selection
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.
Exercise 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.
Show example 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;
Test yourself
-
Import Picker
import { ____ } from '@react-native-picker/picker';
Show answer
import { Picker } from '@react-native-picker/picker';
-
Match the city-picker parts
- Picker
- Dropdown component
- selectedValue
- Holds the selected value
- onValueChange
- Fires on change
- Picker.Item
- A single option
-
What fires on Picker change?
- onPress
- onLayout
- onChangeText
- onValueChange
Show answer
onPress — onValueChange is the Picker's selection event.
Next lesson: Putting it together
