I have a horizontal FlatList, where each time it reaches the end, it automatically adds new elements to the list, so it kind of is an infinite list. I want the app to scroll through the list by itself automatically, but during my testing, when I use timer to call FlatList's scrollToOffset() and make the FlatList auto scrolling, I can not click the item, I guess it has something to do with the time set for setInterval(func, time) because when I increase it to a high value it works (but of course the scrolling is not nice).
May I ask whats the correct way to implement such function?
Any help would be much appreciated!
Timer function:
this.timer = setInterval(() => {
console.log('I do not leak!');
this.flatListRef.scrollToOffset({ offset: this.scrollX+5});
}, 500);
FlatList and its Items:
<FlatList
ref={(ref) => { this.flatListRef = ref; }}
horizontal = {true}
data={this.state.dataForCarousel}
renderItem={this._renderItem}
onScroll={this.handleScroll}
>
</FlatList>
_renderItem = (item) => {
let item1 = item;
var txt = item1.item;
console.log(txt);
var bgColor = item1.index % 2 == 0 ? 'red' : 'yellow';
return (
<TouchableOpacity
onPress={this.clickItem}
>
<View
style={{ flex: 1, alignItems: "center", justifyContent: "center",backgroundColor: bgColor, width: 80 }}>
<Text>{txt}</Text>
</View>
</TouchableOpacity>
)
}
I have a horizontal FlatList, where each time it reaches the end, it automatically adds new elements to the list, so it kind of is an infinite list. I want the app to scroll through the list by itself automatically, but during my testing, when I use timer to call FlatList's scrollToOffset() and make the FlatList auto scrolling, I can not click the item, I guess it has something to do with the time set for setInterval(func, time) because when I increase it to a high value it works (but of course the scrolling is not nice).
May I ask whats the correct way to implement such function?
Any help would be much appreciated!
Timer function:
FlatList and its Items: