Error: "Invariant Violation: scrollToIndex out of range: requested index 228 is out of 0 to 148"

[jonqwerty]

Hi, I use react-native-element-dropdown. Data for displaying in dropdown counts about 300 items. From time to time I receive error : "Invariant Violation: scrollToIndex out of range: requested index 228 is out of 0 to 148" when I use search.

Here is code `

{renderLabel()} setIsFocus(true)} onBlur={() => setIsFocus(false)} onChange={async item => { setChoosenBranch(item.value); setIsFocus(false); }} renderItem={item => renderItem(item)} search // searchField="value" searchPlaceholder={t('Search...')} inputSearchStyle={styles.inputSearchStyle} maxHeight={350} /> ` "react-native": "0.70.5", "react-native-element-dropdown": "^2.3.0",  Is there any way to fix this?

[HERYORDEJY]

@jonqwerty Have you been able to solve this? Facing same issue

[jonqwerty]

@HERYORDEJY-DEV

I didn't solve this problem, but I avoided it. As I understand it, this error occurs when autoscrolling to the selected item and when the length of the list is more than 50 items (determined experimentally).

How to avoid it: autoScroll={false}. But then autoscroll will not be working :)

[hoaphantn7604]

hi @jonqwerty @HERYORDEJY-DEV , This error happen in version 2.8.1?

[jonqwerty]

@hoaphantn7604 No, this error happen in version 2.3.0 "react-native-element-dropdown": "^2.3.0"

[hoaphantn7604]

@hoaphantn7604 No, this error happen in version 2.3.0 "react-native-element-dropdown": "^2.3.0" Did you try again on version 2.8.1?

[jonqwerty]

@hoaphantn7604

I try version 2.8.1 and receive the same error:

[wilkuintheair]

I have the same issue, on the 2.9.0 version.

The other workaround would be to provide getItemLayout in flatListProps:

flatListProps={{
  getItemLayout: (data, index) => ({
    length: itemHeight,
    offset: itemHeight * index,
    index,
  }),
}}

[vinhvuongthe]

@wilkuintheair can you help me fix this error. i didn't find flatListProps

[gani419]

Same error happening with version@1.8.8 getting this error please help.

[chinmay4github1987]

@HERYORDEJY-DEV

I didn't solve this problem, but I avoided it. As I understand it, this error occurs when autoscrolling to the selected item and when the length of the list is more than 50 items (determined experimentally).

How to avoid it: autoScroll={false}. But then autoscroll will not be working :)

Did you find any other way to fix this code even i am getting the same error

[dogra-deepak-tftus]

I placed the problem code in try catch.it stops the crash ===>

try{ refList?.current?.scrollToIndex({ index: index, animated: false, }); } catch(e){ console.log("error===>",e) }

in scrollIndex function

[rituoctifi]

The solution that worked for me is

add this prop in your dropdown, where itemHeight = 50.

This hack is surely gonna work.

*flatListProps={{ getItemLayout: (data, index) => ({ length: itemHeight / data?.length, offset: itemHeight (index), index, }), }}**

Also apply add height to your dropdown style. I have added style = {{ height: 55 }}

[ThanSau1105]

add autoScroll={false}