Picker - Get selected item's object details which has custom label and value structure

[SupriyaPKalghatgi]

Description

Use Case: 1
I have a huge data set around 9000 entries to be used with Picker, and not in the form of label and value

const data = [
    { myLabel: 'Label 1', myValue: 'Value 1', details: 'A' },
    { myLabel: 'Label 2', myValue: 'Value 2', details: 'B' },
    { myLabel: 'Label 3', myValue: 'Value 3', details: 'C' },
    { myLabel: 'Label 4', myValue: 'Value 4', details: 'D' },
    { myLabel: 'Label 5', myValue: 'Value 5', details: 'E' },
]

Rendering such huge data set with Picker.Item causes heavy performance issue.
How do I use this data set into this way <Picker items={data} />

Use Case: 2
On selecting any of the picker items, I want to get its complete object details
Say if I select Label 2, then onChange I want to receive { myLabel: 'Label 2', myValue: 'Value 2', details: 'B' }

Related to

• Components

Expected behavior

Able to use Picker's items prop with custom label / value structure

Actual behavior

Simulator.Screen.Recording.-.iPhone.15.-.2023-10-09.at.18.16.02.mp4

Environment

• Expo version: ^49.0.7,
• React Native version: 0.72.3
• React Native UI Lib version: ^7.8.0

Affected platforms

• Android
• iOS

[SupriyaPKalghatgi]

@ethanshar Can you help me with this?

[Ethan Sharabi]

First of all, I'm not sure using the Picker component for 9000 items is the right choice, as you mention it can cause a big performance issues. You need something that can handle such a big data with better list optimizations.

In any case, for you question. you will need to organize you data in a way you can

1. pass it as items to Picker
2. Access it easily

First, map your custom data list into an array of items

const pickerItems = data.map(item => ({value: item.myValue, label: item.myLabel}))
<Picker items={pickerItems} />

Second, I'd also create a map based on the items value for a quick access, when user select a value
The simplest way to do it is probably

const itemsDictionary = {};
data.forEach((item) => {
  itemsDictionary[item.myValue] = item
});

You can have a single iteration to create both items list and items dictionary.

Hopes this helps

[SupriyaPKalghatgi]

@ethanshar Thank you, I am building picker at my own in this case