0
221
Vistaswhy 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 Respuestas
Responde la pregunta0
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
Denunciar
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
Denunciar
Responde la pregunta