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

See original GitHub issue

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 (onPress={this.clickItem} never get called), 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>
    )
  }

Issue Analytics

State:
Created 6 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

LuisPChavezcommented, Dec 29, 2017

Hey @malonguwa I was having trouble with the same thing and I found a workaround but its not the prettiest. In your onPress write a fat arrow function instead of the name of the function you want to execute. For example it should look like this:

onPress{() => {console.log(“sdf”)}} instead of

logIfPressed() { console.log(“sdf”) }

onPress{this.logIfPressed}

Of course this is messy but its the only workaround I found. Good luck!

0reactions

malonguwacommented, Nov 15, 2017

@bd-arc Thanks for your time and effort! Really appreciate it! I think I make it work 😃

After I dump the RN’s own touchable component and implement my own touch event handler. I also set scrollToOffset animated prop to false and disabled timer in onResponderGrant.

        this._gestureHandlers = {
            onStartShouldSetResponder: () => true,  //Allow register response to touch event
            onMoveShouldSetResponder: ()=> true,  //Allow register response to move (scroll) event

            onResponderGrant: ()=> {
                console.log("parent onResponseGrant");
                clearInterval(this.timer);
            }, //when the touch event start (the moment your finger touched the screen)
            onResponderMove: ()=> {
                console.log("parent onResponderMove");
            },  //when the move event start (in here when we scroll the FlatList)

            onResponderRelease: ()=> {
                this.clickItem()
            }, //when we release the touch event (we can think this is the final callBack for the event)

            // onResponderTerminationRequest: () => true
        }

I will try to implement the infinite auto scroll at the next step, cos in my case, I request a 2000 long array from server, and my idea is use another processedArray to hold the 20 or more fixed number of items from serverArray, and once I scroll to a certain position and then I will process the processedArray by taken different range of element from serverArray.

processedArray: 1,2,3,4,5,6,7,8,9,10 and pass it to FlaistList’s datasource using this.setState ({data: processedArray})
scroll to the right when contentOffsetX > 300 then,
processedArray: 3,4,5,6,7,8,9,10,11,12 and pass it to FlaistList’s datasource using this.setState ({data: processedArray})

May I ask is this correct logic to implement infinite auto scroll ? cos I am increasing the FlatList’s contentOffsetX, and it will become to a really huge number if keep auto scrolling… is there any way I can do something about this ?

Thanks very much !!

Please refer to https://snack.expo.io/@lma/timerwithcarousel for the demo