Help with scrollToIndex

[Zer0-213]

Hi all

I'm trying to implement a bookmark feature, that will scroll to a certain index when opening the list.

I am faced with 2 issues and would like some help.

One is the best way of doing scrollTo. Should I use the ref function or the prop. With the ref function, I had to do the below to make it work but I'm not sure if there is a better way.

  useEffect(() => {
    if (!verseNumber) return;

    let index = 0;
    const interval = setInterval(() => {
      if (listRef.current && index < Number(verseNumber) - 1) {
        listRef.current.scrollToIndex({
          index: index,
          animated: true,
        });
        index++;
      } else {
        clearInterval(interval);
      }
    }, 50);
  }, []);

The second and main issue is that the scrolling to the bookmarked verse is inconsistent.
Somethimes it will land quite a few indexes away from the target.

I was told to use the overrideItemLayout but I'm not sure how to use it. The issue is the height is dyamic. Below is the component and styling

 <View style={styles.container}>
      <View
        style={{
          height: "100%",
          width: "100%",
        }}
      >
        <FlashList
          scrollEventThrottle={16}
          renderItem={QuranList}
          estimatedItemSize={surahVerses?.length}
          data={surahVerses}
          extraData={quranSetting}
          ref={listRef}
        />
      </View>
    </View>

  const QuranList = ({ item }) => {
    const { verse, verse_translation, verse_number } = item;
    const { value } = quranSetting;
    return (
      <LongPressGestureHandler
        minDurationMs={500}
        onHandlerStateChange={async (event) => {
          try {
            if (event.nativeEvent.state === State.ACTIVE) {
              await addBookmark(
                dbConn,
                Number(surahNumber),
                Number(verse_number),
              );
              showToast("Done", "Verse bookmarked", "success");
            }
          } catch (e) {
            console.log(e);
            showToast("Failed to bookmark", e, "error");
          }
        }}
      >
        <View style={styles.quranContainer}>
          {(value === 0 || value === 1) && (
            <CustomText textType={TextType.ARABIC}>{verse}</CustomText>
          )}
          {(value === 0 || value === 2) && (
            <CustomText>{verse_translation}</CustomText>
          )}
          <CustomText customStyle={styles.verseNumberText}>
            {verse_number}
          </CustomText>
        </View>
      </LongPressGestureHandler>
    );
  };

    container: {
      width: "100%",
      height: "100%",
      flexDirection: "column",
      justifyContent: "flex-start",
      alignItems: "center",
      backgroundColor: globalStyles.startContainer.backgroundColor,
      paddingTop: headerHeight,
    },
    quranContainer: {
      flexDirection: "column",
      justifyContent: "flex-start",
      width: "100%",
      alignItems: "center",
      borderBottomWidth: 1,
      height: "auto",
      backgroundColor: globalStyles.startContainer.backgroundColor,
      paddingHorizontal: 10,
      paddingTop: 20,
    },