need to press flatlist child for 2/3 second to actually travel to link

Question

What is happening :

I have a flatlist rendering a component with onPress inside. It is doing the job but i need to press the flatlist for about two or three second so that the onPress fire which is ruining the user experience.

I have tryed :

• replacing onPress with onPressOut which fire instantly everytime you come near the button (result in button press by accident)

• moving onPress in the renderItem of the flatlist (not in the component called)

the flatlist :

travelToOperation = (papi) => { this.props.link.navigate('Operation', { papi: papi }); }

<FlatList
      style={styles.collaboratorList}
      data={latestOperation.stack}
      keyExtractor={(item) => item.NUMERO}
      maxToRenderPerBatch={1}
      renderItem={({ item }) => <LastOperation data={item} 
       operationDetail={this.travelToOperation} />
      }
 />

lastOperation component :

<TouchableWithoutFeedback onPress={() => this.props.operationDetail(this.props.data)}> <View>//somestuff </View> </TouchableWithoutFeedback>

What i want :

Just the basic result of onPress (as in all the other onPress i do in the app) which is a basic click

Thanks for any suggestions, i'm pretty new to react-native so i can assume it's some basic stuff...

Answer 1

You have this problem because of property

maxToRenderPerBatch={1}

As documentation says CONS from this property is blocking others process.

Pros: Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).

Cons: More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.

You must remove this prop to get UI render asynchronous.

If this help you please like it.