for some reason the snapToInterval isn't snapping properly

code:

const ITEM_HEIGHT=60
   <FlatList
    data={Array(150)
      .fill('')
      .map((_, index) => ({ key: index, title: index.toString() }))}
    renderItem={({ item }) => (
      <View style={{ height: ITEM_HEIGHT, alignItems: 'center', justifyContent: 'center' }}>
        <Text >{item.title}</Text>
      </View>
    )}
    getItemLayout={(data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index })}
    initialScrollIndex={21}
    initialNumToRender={10}
  />

and here's how it looks like:

how do I fix this?

CodePudding user response：

you have to set

snapToInterval

prop to the height of your item "60". you don't need getItemLayout if you don't want to use flatlist's snaptoindex or scrollToItem methods. also, I think you forgot to set the value for ITEM_HEIGHT in your getItemLayout prop.

CodePudding user response：

I solved the problem from here

just add snapToOffsets like this:

const ITEM_HEIGHT=60

<FlatList
    data={Data}
    renderItem={({ item }) => (
        <View
            style={{
                height: ITEM_HEIGHT,
                alignItems: 'center',
                justifyContent: 'center',
            }}>
            <Text style={{ fontWeight: 'bold',color:'white' }}>{item.title}</Text>
        </View>
    )}
    keyExtractor={(_, index) => index.toString()}

    getItemLayout={(_, index) => {
        return { length: ITEM_HEIGHT, offset: ITEM_HEIGHT* index, index };
    }}
    initialScrollIndex={21}
    showsVerticalScrollIndicator={false}
    initialNumToRender={3}
    windowSize={9}
    snapToOffsets={Data.map((x, i) => (i*ITEM_HEIGHT))}
/>