I am using FlatList to implement a carousel, and I try to use timer to increase the FlatList's offset.X, and makes it auto scrolling. But my FlatList item's TouchableOpacity onPress function never fire during the timer setInterval function which increasing the FlatList's offset.X every seconds. The Item's onPress works fine without start the timer up.
May I ask is there anything wrong for my implement? How should I implement the carousel with FlatList auto scrolling and the Item can be clicked during the scrolling?
This is the code for my FlatList and ListItem:
<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;
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>
)
}
Here is my Timer function in componentDidMount:
```
this.timer = setInterval(() => {
this.flatListRef.scrollToOffset({ offset: this.scrollX+5});
}, 100);
```
I am using FlatList to implement a carousel, and I try to use timer to increase the FlatList's offset.X, and makes it auto scrolling. But my FlatList item's TouchableOpacity onPress function never fire during the timer setInterval function which increasing the FlatList's offset.X every seconds. The Item's onPress works fine without start the timer up.
May I ask is there anything wrong for my implement? How should I implement the carousel with FlatList auto scrolling and the Item can be clicked during the scrolling?
This is the code for my FlatList and ListItem: