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()}
  <Dropdown
    dropdownPosition={'bottom'}
    // flatListProps={}
    selectedTextProps={{
      numberOfLines: 1,
    }}
    style={[styles.dropdown]}
    containerStyle={styles.listOfitems}
    placeholderStyle={styles.placeholderStyle}
    selectedTextStyle={styles.selectedTextStyle}
    // iconStyle={styles.iconStyle}
    data={L}
    autoScroll
    labelField="label"
    valueField="value"
    placeholder={!isFocus ? t('Choose a branch') : '...'}
    value={choosenBranch}
    onFocus={() => 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}
  />
</View>`

"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 [email protected] 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}