0
209
Visualizaçõeswhy is snapToInterval not working for longer arrays in flatlist?
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?
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
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.
·
Juan Pablo Isaza
Relatório
0
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))}
/>
·
Juan Pablo Isaza
Relatório
Responde à pergunta