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

1
votes

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...

3
react-nativereact-native-flatlistonpress
Is this on a real device or in emulator simulator? It might be bad performance in the emulator/simulator and perhaps running the app on a real device will solve the issue. - Johannes Nyman
No if i click then wait it does nothing. If i want to trigger the onPress i need to keep my finger on the button (as i said 2/3s) and then release. onPress trigger when i release (as it is supposed to) - Nakholz
Yes i'm using a real device. To check if it is a latency issue i tryed to compile the app in production mode. More than that when i use onPressOut it fires immediately so it's possible to do so i'm just doing something wrong but can't put my finger on it ! - Nakholz

3 Answers

1
votes

What worked : replacing Touchable from react-native with

import { TouchableOpacity } from 'react-native-gesture-handler';
0
votes

Is the behavior the same using "TouchableHighlight", "TouchableOpacity" instead of "TouchableWithoutFeedback"? BTW you get the best user experience using "https://kmagiera.github.io/react-native-gesture-handler". Why do you use "TouchableWithoutFeedback"?

0
votes

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.