Poor performance for the `Select` component

[aimensasi]

Describe the bug Poor performance for the Select component. When clicking on the select component, there is a very noticeable delay. The issue occurs again when selecting an item from the action sheet displayed. Note that, The issue appears on Android devices more clearly than on IOS.

Sample Code

<Select
    selectedValue={values.size}
    minWidth="200"
    accessibilityLabel="Choose Company Size"
    placeholder="Choose Company Size"
    mt={1}
    onValueChange={(itemValue) => setFieldValue("size", itemValue)}
  >
    <Select.Item label="1 to 9 employees" value="1 to 9 employees" />
    <Select.Item label="10 - 49 employees" value="10 - 49 employees" />
    <Select.Item label="50 - 249 employees" value="50 - 249 employees" />
    <Select.Item label="250 or more employees" value="250 or more employees" />
  </Select>

Screenshots https://user-images.githubusercontent.com/13252355/136733406-c38e3c58-3e5c-48c2-9544-ec0663295006.mov

Platform

• NativeBase version: 3.20
• Device: Samsung A12
• OS: Android 11
• React Native version 0.65.1
• Expo SDK version 42.0.1
• node 14.15.4
• yarn: 1.22.15

Additional information

The issue seems to get worst when using Formik or react-form-hook, but it is still there even without using them. The number of items in the list is not the cause of the issue, as I have tried from 2 to 14 items and the issue is still there.

[3210jr]

+1

Additional Information

Performance also does not increase when memoized (wrapped in a React.memo).

[Mani1124]

Same here

[bencreynolds]

Same issue here, but only when rendering dozens of items. Rendering like 5 items (using map) does not cause an issue.

[md-rehman]

We have done some enhancements to fix Select's performance. Do let us know if you're still facing issues.

[ksi9302]

Hi, I'm using NativeBase 3.3.4 I'm still facing big performance issue with select component. When I select the item on the action sheet, it seems like it waits till all the triggered actions are complete and the relevant components are ready to be rendered. In other words, it feels asynchronous.

[Viraj-10]

Hi @ksi9302, Can you share small code and environment details.

[ksi9302]

Hi @ksi9302, Can you share small code and environment details.

Hi Viraj, Thanks for your attention. I've been trying to reproduce this with another example project because my original code is too complex, but didn't really have any luck yet. I'll post it here once I figure it out.

[Viraj-10]

Hi @ksi9302, Any Updates?

[danielantelo]

hey @Viraj-10 i am having similar issues, adding a native-base select to a form connected to state makes the whole form behave slow, and in Safari (mobile and desktop) it causes inputs in the form to lose focus as you type and makes the page jump to the bottom (very odd indeed). Simply removing the Select makes everything work great.

To reproduce:

• clone this repo and switch to branch bug-issue to reproduce.
• yarn install and then yarn web
• open http://localhost:19006/#/Form in Safari
• try to fill in the form inputs and see that they lose focus and the page jumps around
• remove the select from screens/Form/index.tsx
• try the form again and see the form inputs all behave perfectly

[KogaiIrina]

Hello there! I face the same issue in the native-base: 3.4.0 iPhone 7, IOS 15.7 The selector works veeeery slowly (I would say it doesn't work at all), I have only 195 Select.Items When I want to open the Selector, I need to wait for 20-30 seconds, then I can see a Select.Item. And when I am trying to scroll it is impossible.

[sanketsahu]

@KogayIrina Have you tried running on a newer device? Do you see the same issue?

Can you share the code in an expo snack?

[khubilla]

Having the same issue with IOS. No problem in Android Is there a solution for this?

[KogaiIrina]

@khubilla I use RNPickerSelect from "react-native-picker-select" instead of NativeBase

[KogaiIrina]

@sanketsahu I was trying to run my app on different devices and saw this issue on all of them.

I can't share my code, but if you try to use the Select component with 180+ items, you may see the problem.

[vilenleung]

import { Select, useDisclose } from 'native-base'

const phoneAreaInstance = useDisclose()
const areaCodeStore = [
 { "name": "Afghanistan", "uniqueCode": "93_AF" },
 ....
]
const areaCodeList = useMemo(() => {
    return areaCodeStore.filter(item => phoneAreaInstance.isOpen || item.uniqueCode == areaCode)
}, [phoneAreaInstance, areaCode])


<Select
   onValueChange={(text) => {
        setTimeout(() => phoneAreaInstance.onClose())
   }}
   onOpen={() => phoneAreaInstance.onOpen()}
   onClose={() => setTimeout(() => phoneAreaInstance.onClose())}
>
   {
     areaCodeList.map(item => (
        <Select.Item key={item.uniqueCode} label='' value={item.uniqueCode}/>
      ))
   }
</Select>

[Abhishekkumar4444]

i have facing the same issue <Select minWidth="200" // size={'lg'} height={12} size="md" mt={1} // borderRadius={5} borderWidth={1} accessibilityLabel="Business-Type" placeholder="Business Type*" onValueChange={handleChange('businessType')} selectedValue={values.businessType} focusOutlineColor={colors.colorV100} _focus={{ backgroundColor: 'none', borderColor: 'none' }} _selectedItem={{ bg: 'danger.700', endIcon: <CheckIcon size="5" />, }} > <Select.Item label="Individual" value="Individual" /> <Select.Item label="Proprietor" value="Proprietor" /> <Select.Item label="Partnership" value="Partnership" /> <Select.Item label="Private Limited" value="Private Limited" /> <Select.Item label="LLP" value="LLP" /> <Select.Item label="Others" value="Others" /> </Select>

on ios its lag is next lavel

[codewithmecoder]

import {CheckIcon, Select} from 'native-base';
import React, {useState} from 'react';
import {MySelectProps} from '.';

export const MySelect = ({select, selectItem}: MySelectProps) => {
  const [service, setService] = useState('');
  return (
    <Select
      selectedValue={service}
      minWidth="200"
      accessibilityLabel="Choose Service"
      placeholder="Choose Service"
      _selectedItem={{
        bg: 'teal.600',
        endIcon: <CheckIcon size="5" />,
      }}
      mt={1}
      onValueChange={itemValue => setService(itemValue)}
      {...select}
    >
      {[1, 3, 5, 6].map((i: number) => {
        return (
          <Select.Item
            label={i.toString()}
            value={i.toString()}
            key={i}
            {...selectItem}
          />
        );
      })}
    </Select>
  );
};

The error is

TypeError: Cannot read property 'getItem' of undefined

This error is located at: in FlatList in Unknown in FlatListComponent in RCTView (created by View) .....

NodeJS Version 18.12.1 React Native Version 0.70.6 Native Base Version 3.4.23 React Version 18.2.0 OS Window Emulator Android API 28

Can any one help here?

[dieguezz]

Happens to me as well, nothing special, just happening on IOS when i have like 100 items. Android and web work well