The index will jump to 0 on expo SDK 48 about react-native-swiper-flatlist

[Keylekan]

I had the same issue, I fixed it by setting getItemLayout. By the way the documentation of FlatList explicitely specify that initialScrollIndex requires getItemLayout (https://reactnative.dev/docs/flatlist#initialscrollindex), and the index prop of SwiperFlatList is passed through initialScrollIndex prop of FlatList.

Here is my piece of code (note that I use a useEffect to keep index when orientation changes) :

const ref = useRef<SwiperFlatList>(null);
const { width } = useWindowDimensions();

useEffect(() => ref.current?.scrollToIndex({ index: ref.current.getCurrentIndex() }), [width]);

return (
    <SwiperFlatList
        ref={ref}
        index={initialIndex}
        getItemLayout={(__data, ItemIndex: number) => ({
            length: width,
            offset: width * ItemIndex,
            index: ItemIndex,
        })}
        data={data}
        renderItem={({ item }) => (
            // ...
        )}
        keyExtractor={(item): string => item}
        useReactNativeGestureHandler
        windowSize={5}
        keyboardShouldPersistTaps="handled"
    />
);

[felixliu226]

It should be fixed in 3.2.0, could you test it? @felixliu226 @Keylekan

Thanks! just tried with 3.2.2 and it works.

[felixliu226]

I had the same issue, I fixed it by setting getItemLayout. By the way the documentation of FlatList explicitely specify that initialScrollIndex requires getItemLayout (https://reactnative.dev/docs/flatlist#initialscrollindex), and the index prop of SwiperFlatList is passed through initialScrollIndex prop of FlatList.

Here is my piece of code (note that I use a useEffect to keep index when orientation changes) :

const ref = useRef<SwiperFlatList>(null);
const { width } = useWindowDimensions();

useEffect(() => ref.current?.scrollToIndex({ index: ref.current.getCurrentIndex() }), [width]);

return (
    <SwiperFlatList
        ref={ref}
        index={initialIndex}
        getItemLayout={(__data, ItemIndex: number) => ({
            length: width,
            offset: width * ItemIndex,
            index: ItemIndex,
        })}
        data={data}
        renderItem={({ item }) => (
            // ...
        )}
        keyExtractor={(item): string => item}
        useReactNativeGestureHandler
        windowSize={5}
        keyboardShouldPersistTaps="handled"
    />
);

Thanks, it works!

[gusgard]

It should be fixed in 3.2.0, could you test it? @felixliu226 @Keylekan