React Native Picker component — Dynamic options
Lately, I’ve been working a lot of on apps that handle currency. In this case, I had to use the picker component to ask the user’s currency, it is a pretty straightforward problem, the user selects the currency and it displays the selected currency as a title, very simple. In the React Native documentation they explain the basic usage of this component:
<Picker selectedValue={this.state.currency} style={{ height: 50, width: 100 }} onValueChange={(itemValue, itemIndex) => this.setState({currency: itemValue})}>
<Picker.Item label=”Euro” value=”EUR” />
<Picker.Item label=”Pound” value=”GBP” />
<Picker.Item label=”US Dollar” value=”USD” />
</Picker>In this example, we are using three currencies, and the picker shows a label indicating the currency name, not necessarily the currency code standard. Everything is fine with this example, once the user selects a currency, the currency code is going to be stored in the state.value object.
But what if you want to show the label anywhere else? Or what if you want to include other information like the country in your picker so you can use it later on your application?
Creating an array of objects
First of all, I’ll start by creating an array of objects, these objects include all the information I need, like this:
currencies: [
{ “country”: “UK”, “currency”:”GBP”, “currencyLabel”: “Pound” },
{ “country”: “EU”, “currency”:”EUR”, “currencyLabel”: “Euro” },
{ “country”: “USA”, “currency”:”USD”, “currencyLabel”: “USD Dollar” }
]We have to be able to get the current value of this array every time, so we will put it in the state object.
state={ currencies: [{ “country”: “UK”, “currency”:”GBP”, “currencyLabel”: “Pound” },{ “country”: “EU”, “currency”:”EUR”, “currencyLabel”: “Euro” },{ “country”: “USA”, “currency”:”USD”, “currencyLabel”: “USD Dollar” }],
currentLabel: ‘Select your currency’,
currency: ""}
Notice that I also added two other elements in the object, one called “currentLabel” and another called “currency”. I created this just in case we need to add something to the “currencyLabel” property. The “currency” will store the current currency value that the user is going to select, so if the user selects Pound the “currency” value will be “GBP”.
Using the Picker Component
Since our currencies are stored in an array we can loop the array and get all the currencies. I’ll loop this array inside the <Picker> component, and I’ll return a <Picker.Item> for each currency I found in the this.state.currencies object.
<PickerselectedValue={this.state.currency }
onValueChange={(itemValue, itemIndex) => this.pickerChange(itemIndex)}>{ this.state.currencies.map( (v)=>{
return <Picker.Item label={v.currencyLabel} value={v.currency} />
}) }</Picker>
This will create a Picker component with its respective values like this:

In the onValueChange listener, I am calling a function called “pickerChange” with the index of the element selected. This is going to help me to compare it to the array and set the values I need in the state.
pickerChange(index){ this.state.currencies.map( (v,i)=>{ if( index === i ){ this.setState({
currentLabel: this.state.currencies[index].currencyLabel,
currency: this.state.currencies[index].currency }) } })}
What this function does is comparing the selected Picker.item index with the array index order. Once it found a match I can set the values in the state like the label and the currency itself.

