Android tapping Z brings me to F section of the list

[Rodbourne]

I have these props on the ,: contentInsetAdjustmentBehavior="automatic" initialNumToRender={100} maxToRenderPerBatch={500} updateCellsBatchingPeriod={10} windowSize={400} removeClippedSubviews without these props, as referenced in another issue, the list jerks around a lot and breaks. when I tap Z on the index, it'll bring me to the F section of the list. The other letters also only bring me to a section of the list from A->F instead of A->Z. I have ~8000 items in the list. works fine on iOS.

[simonho1025]

I have same issue both on iOS and Android. When I tap any letter on the index, it always jumps to incorrect position.

<AlphabetList
    data={nameData}
    indexContainerStyle={styles.indexContainer}
    indexLetterStyle={styles.indexLetter}
    renderCustomItem={(item) => (
        <ContactListItm contactInfo={item} />
    )}
    renderCustomSectionHeader={(section) => (
        <ContactListHeader title={section.title} />
    )}
/>

[simonho1025]

I have these props on the ,: contentInsetAdjustmentBehavior="automatic" initialNumToRender={100} maxToRenderPerBatch={500} updateCellsBatchingPeriod={10} windowSize={400} removeClippedSubviews without these props, as referenced in another issue, the list jerks around a lot and breaks. when I tap Z on the index, it'll bring me to the F section of the list. The other letters also only bring me to a section of the list from A->F instead of A->Z. I have ~8000 items in the list. works fine on iOS.

try to set listHeaderHeight & getItemHeight, it's worked for me.

[Rodbourne]

I have these props on the ,: contentInsetAdjustmentBehavior="automatic" initialNumToRender={100} maxToRenderPerBatch={500} updateCellsBatchingPeriod={10} windowSize={400} removeClippedSubviews without these props, as referenced in another issue, the list jerks around a lot and breaks. when I tap Z on the index, it'll bring me to the F section of the list. The other letters also only bring me to a section of the list from A->F instead of A->Z. I have ~8000 items in the list. works fine on iOS.

try to set listHeaderHeight & getItemHeight, it's worked for me.

what value do I set it to?

[simonho1025]

I have these props on the ,: contentInsetAdjustmentBehavior="automatic" initialNumToRender={100} maxToRenderPerBatch={500} updateCellsBatchingPeriod={10} windowSize={400} removeClippedSubviews without these props, as referenced in another issue, the list jerks around a lot and breaks. when I tap Z on the index, it'll bring me to the F section of the list. The other letters also only bring me to a section of the list from A->F instead of A->Z. I have ~8000 items in the list. works fine on iOS.

try to set listHeaderHeight & getItemHeight, it's worked for me.

what value do I set it to?

listHeaderHeight and getItemHeight are number. Just checked out the document. found the section header(grey area) and item(country name) height.

If you don't know the height, you can use custom render both header and item. The example:

const ALPHABET_SIZE = {
    HEADER_HEIGHT: 34,
    ITEM_HEIGHT: 65
};

<AlphabetList
    data={displayContact}
    indexContainerStyle={styles.indexContainer}
    indexLetterStyle={styles.indexLetter}
    sectionHeaderHeight={ALPHABET_SIZE.HEADER_HEIGHT}
    getItemHeight={() => ALPHABET_SIZE.ITEM_HEIGHT}
    renderCustomSectionHeader={(section) => (
        <ContactListHeader title={section.title} />
    )}
    renderCustomItem={(item) => (
        <ContactListItm
            contactInfo={item}
            onPress={() => onPress(item)}
            selection={selection}
            maxSelect={maxSelect}
            selectedMember={selectedMember}
        />
    )}
/>

HEADER_HEIGHT also set on ContactListHeader wrapper, ITEM_HEIGHT set on ContactListItm wrapper

[Rodbourne]

I have these props on the ,: contentInsetAdjustmentBehavior="automatic" initialNumToRender={100} maxToRenderPerBatch={500} updateCellsBatchingPeriod={10} windowSize={400} removeClippedSubviews without these props, as referenced in another issue, the list jerks around a lot and breaks. when I tap Z on the index, it'll bring me to the F section of the list. The other letters also only bring me to a section of the list from A->F instead of A->Z. I have ~8000 items in the list. works fine on iOS.

try to set listHeaderHeight & getItemHeight, it's worked for me.

what value do I set it to?

listHeaderHeight and getItemHeight are number. Just check out the document. Find out section header(grey area) and item(country name) height.

If you don't know the height, you can use custom render both header and item. The example:

const ALPHABET_SIZE = {
    HEADER_HEIGHT: 34,
    ITEM_HEIGHT: 65
};

<AlphabetList
    data={displayContact}
    indexContainerStyle={styles.indexContainer}
    indexLetterStyle={styles.indexLetter}
    sectionHeaderHeight={ALPHABET_SIZE.HEADER_HEIGHT}
    getItemHeight={() => ALPHABET_SIZE.ITEM_HEIGHT}
    renderCustomSectionHeader={(section) => (
        <ContactListHeader title={section.title} />
    )}
    renderCustomItem={(item) => (
        <ContactListItm
            contactInfo={item}
            onPress={() => onPress(item)}
            selection={selection}
            maxSelect={maxSelect}
            selectedMember={selectedMember}
        />
    )}
/>

HEADER_HEIGHT also set on ContactListHeader wrapper, ITEM_HEIGHT set on ContactListItm wrapper

can you show the ContactListItm wrapper where you set the ITEM_HEIGHT?

[simonho1025]

I have these props on the ,: contentInsetAdjustmentBehavior="automatic" initialNumToRender={100} maxToRenderPerBatch={500} updateCellsBatchingPeriod={10} windowSize={400} removeClippedSubviews without these props, as referenced in another issue, the list jerks around a lot and breaks. when I tap Z on the index, it'll bring me to the F section of the list. The other letters also only bring me to a section of the list from A->F instead of A->Z. I have ~8000 items in the list. works fine on iOS.

try to set listHeaderHeight & getItemHeight, it's worked for me.

what value do I set it to?

listHeaderHeight and getItemHeight are number. Just check out the document. Find out section header(grey area) and item(country name) height. If you don't know the height, you can use custom render both header and item. The example:

const ALPHABET_SIZE = {
    HEADER_HEIGHT: 34,
    ITEM_HEIGHT: 65
};

<AlphabetList
    data={displayContact}
    indexContainerStyle={styles.indexContainer}
    indexLetterStyle={styles.indexLetter}
    sectionHeaderHeight={ALPHABET_SIZE.HEADER_HEIGHT}
    getItemHeight={() => ALPHABET_SIZE.ITEM_HEIGHT}
    renderCustomSectionHeader={(section) => (
        <ContactListHeader title={section.title} />
    )}
    renderCustomItem={(item) => (
        <ContactListItm
            contactInfo={item}
            onPress={() => onPress(item)}
            selection={selection}
            maxSelect={maxSelect}
            selectedMember={selectedMember}
        />
    )}
/>

HEADER_HEIGHT also set on ContactListHeader wrapper, ITEM_HEIGHT set on ContactListItm wrapper

can you show the ContactListItm wrapper where you set the ITEM_HEIGHT?

ContactListItm component codes:

<View style={{height:  ITEM_HEIGHT}}>
 <-- your code -->
</View>

[Umar-Farooq-Shafi]

Same issue

[simonho1025]

Same issue

Pls try to set listHeaderHeight & getItemHeight

[Umar-Farooq-Shafi]

Same issue

Pls try to set listHeaderHeight & getItemHeight

Yes, I did set it, but the pagination is breaking. When I click on an alphabet, it takes me to the wrong section. For example, clicking on 'M' takes me to 'N'

[dokselblackbit]

It works. It helped me resolve this issue. Thank you @simonho1025