estimatedHeight + initialScrollIndex = Wrong position

[siddharth-kt]

Hi,
I was facing same issue with RecyclerListView also (and issue was also raised for this See : Flipkart/recyclerlistview#241)

Eg,
import React from "react";
import { Text, View } from "react-native";
import { FlashList } from "@shopify/flash-list";

const FlashListTest = () => {
const DATA = [
{ title: "First Item", color: "grey" },
{ title: "Second Item", color: "pink" },
{ title: "First Item", color: "antiquewhite" },
{ title: "Second Item", color: "aqua" },
{ title: "First Item", color: "bisque" },
{ title: "Second Item", color: "blueviolet" },
{
title: First Item,
color: "brown",
},
{ title: "Second Item", color: "burlywood" },
];
return (
<FlashList
data={DATA}
initialScrollIndex={6}
renderItem={({ item }) => {
return (
<View
style={{
minHeight: 400,
width: "360%",
backgroundColor: item.color,
}}
>
<Text numberOfLines={3} style={{ width: 360 }}>
{item.title});
}}
estimatedItemSize={300}
// horizontal
/>
);
};

export default FlashListTest;

In above example estimatedHeight (i.e 300) is different from actual Item height(i.e 400) so initialScrollIndex takes to wrong position.
@naqvitalha What can be solution to this issue ?

Thanks 🙂

[siddharth-kt]

@naqvitalha ?

[fortmarek]

You can use getItemLayout to provide better estimates. Unfortunately, we currently don't have the ability to scroll to a given index if the estimated size or the one provided by getItemLayout are not correct

[siddharth-kt]

@fortmarek thanks for responding.
I was really waiting for this feature (earlier in RecyclerListView and now in flash-List), kindly take this into consideration since it badly affects the UX. And estimatedHeight will mess-up with initialScrollIndex.

Thanks 🙂