[Bug]: `initialScrollIndex` on BottomSheetFlatList or BottomSheetFlashList does not work correctly

[daniel-heg]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

When adding the initialScrollIndex prop to the BottomSheetFlatList with a value that is outside of the render distance (50 in the video), the flatlist is not rendered correctly.

If one starts to scroll, the flatlist will be rendered, but starts at the top of the list and not at the desired index.

If the initialScrollIndex is in the initial render distance (e.g. "2" in the snack), then the list will be rendered correctly, but the list also won't start from the given index. So the error possibly might be in the scroll position at render time?

https://github.com/user-attachments/assets/3bd50130-97dc-42f2-a80a-8750fb77bb6a

Reproduction steps

add initialScrollIndex to the BottomSheetFlatList or BottomSheetFlashList with a value that is outside of the initial render distance

Reproduction sample

https://snack.expo.dev/@daniel.h/flatlist-bug-snack

Relevant log output

No response

[daniel-heg]

Workaround for Flashlist that works on both Android and iOS (however, I do not know what other possible side-effects occur, when not using the internal scrollComponent via BottomSheetFlashList):

import { ScrollView as RNGHScrollView } from 'react-native-gesture-handler';
import { ScrollViewProps } from 'react-native';

const HEIGHT = 300
const DATA = [...]

and then:

<BottomSheetModal enableDynamicSizing={false} snapPoints={[HEIGHT * 1.75]}>
    <FlashList
      data={DATA}        
      estimatedItemSize={HEIGHT}
      initialScrollIndex={50}
      renderItem={renderItem}
      renderScrollComponent={RNGHScrollView as ComponentType<ScrollViewProps>}
    />
</BottomSheetModal>

[daniel-heg]

Workaround also works for FlatList: https://snack.expo.dev/@daniel.h/a05760

only this way web seems to be broken