how to control the flickering scroll

[vksgautam1986]

https://github.com/hoaphantn7604/react-native-element-dropdown/assets/133006606/90372216-0737-4266-8f7d-a3b32f7b5a6c

i was using older react native dropdown which was not having this issue. if we select anything it shows a scroll which looks like a flicker. it should be there by default instead going to selected value after the opening and showing the scroll

[denka9999]

I have the same issue, did you find any way to solve this problem¿?

[denka9999]

Try to set autoScroll property to false

[UmidbekU]

@vksgautam1986 @denka9999 Instead of just making autoScroll={false}. Make autoScroll={false} and use flatListProps for more control. You'll need to configure a few additional parameters, as demonstrated in the example below:

1. initialScrollIndex: activeIndex >= 0 ? activeIndex : 0
2. getItemLayout:

   getItemLayout: (_, index) => ({
   length: TOTAL_HEIGHT,
   offset: TOTAL_HEIGHT * index,
   index
   })

In my case, TOTAL_HEIGHT is the sum of the renderItem height and the height of the ItemSeparatorComponent. With these settings, the correct element will always open smoothly, without any glitches or unnecessary animations.

Here’s an example:

const activeIndex = useMemo(
  () => findIndex(data, item => item.value === field.value) || 0,
  [data],
);

<Dropdown
    autoScroll={false}
    flatListProps={{
       ItemSeparatorComponent: () => <View style={{ height: 1, width: '100%', backgroundColor: 'grey' }} />,
       initialScrollIndex: activeIndex >= 0 ? activeIndex : 0,
       getItemLayout: (_, index) => ({
           length: 45,
           offset: 45 * index,
           index,
       })
    }} />