Picker component performance issues on iOS with larger items

[aligfl]

Hi,
I'm seeing some performance issues when using the Picker component with large items on iOS.

react-native, react and native-base version

...
"native-base": "^2.3.1",
"prop-types": "^15.5.10",
"react": "16.0.0-alpha.12",
"react-native": "^0.46.0",
...

Expected behaviour

Picker to quickly close when an item is selected or back button is pressed.

Actual behaviour

There is a 3~4 second lag when either an item is selected or back is pressed on iOS

Steps to reproduce (code snippet or screenshot)

1. Use the following picker, with around 800 items.
2. Open the Picker by clicking on it
3. Press back OR select an item from the list.

    <Picker
      selectedValue={5}
    >
      {
        Array(800).fill().map((e,i)=>i+1).map((i, index) => (
          <Item label={i} value={i} key={i} />
        ))
      }
    </Picker>

Screenshot of emulator/device

Is the bug present in both ios and android or in any one of them?

just iOS.

Any other additional info which would help us debug the issue quicker.

[akhil-ga]

@aligfl 800 items in picker is a very large number. We don't generally use such a large number of items in picker. If there is any valid use case, let us know.

[aligfl]

@akhil-geekyants this is a use case for our app. Where we have a list of items that we need to pick from. Infact ours is around even more. I used 800 just as an example. It would be great if the performance problem can be fixed.

It would be amazing if you guys added a "Search Bar" at the top to search the list of item from the picker.

[SupriyaKalghatgi]

@aligfl We will have React Native's FlatList with NativeBase Picker

[brunolemos]

@aligfl

You should not use .map with big lists, use FlatList instead.
Your 800 items are being regenerated on each rerender.

Also, avoid using index as keys (on this example it might be ok).

This seems to be a normal list performance issue, not necessarily related to Picker.

[SupriyaKalghatgi]

Fixed with 2.3.6

[neekey]

I'm still having this performance issue with version ^2.12.1. In my case, I only have around 150 items.

The main problem I can observe is that the rendering of the items happens even the List is not active, say I have this edit page with this big picker, when I click a link from another page to this edit page, the screen will freeze for several seconds, then the edit page appears.

the list should only be rendered when the picker is active IMO