Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Please Help] Click Event on FlatList items not working during setInterval() #16758

Closed
malonguwa opened this issue Nov 9, 2017 · 2 comments
Closed
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@malonguwa
Copy link

malonguwa commented Nov 9, 2017

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

@react-native-bot
Copy link
Collaborator

@facebook-github-bot no-template

@facebook-github-bot
Copy link
Contributor

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 ContributeWhat to Expect from Maintainers

@facebook-github-bot facebook-github-bot added the Ran Commands One of our bots successfully processed a command. label Nov 9, 2017
@facebook facebook locked as resolved and limited conversation to collaborators Nov 9, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Nov 9, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

3 participants