Flatlist item onPress not fired during timer's setInterval function

[malonguwa]

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);

```



 

[react-native-bot]

@facebook-github-bot no-template

[facebook-github-bot]

Hey @malonguwa, thanks for posting this! It looks like your issue is missing some required information. Can you please add all the details specified in the Issue Template? This is necessary for people to be able to understand and reproduce your issue. I am going to close this, but please feel free to open a new issue with the additional information provided. Thanks!

_{How to Contribute • What to Expect from Maintainers}