Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
daniel-heg opened this issue Nov 5, 2024 · 5 comments
Labels
bug Something isn't working no-issue-activity

Comments

@daniel-heg
Copy link

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?

ScreenRecording_11-05-2024.13-22-04_1.MP4

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 daniel-heg added the bug Something isn't working label Nov 5, 2024
@daniel-heg
Copy link
Author

daniel-heg commented Nov 10, 2024

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
Copy link
Author

daniel-heg commented Nov 10, 2024

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

only this way web seems to be broken

Copy link

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

@daniel-heg
Copy link
Author

problem is still valid

Copy link

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working no-issue-activity
Projects
None yet
Development

No branches or pull requests

1 participant