1

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

Nakholz
  • 43
  • 6
  • 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 Jun 11 '19 at 11:09
  • 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 Jun 11 '19 at 11:57
  • 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 Jun 11 '19 at 12:02

3 Answers3

2

What worked : replacing Touchable from react-native with

import { TouchableOpacity } from 'react-native-gesture-handler';
Nakholz
  • 43
  • 6
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.

Community
  • 1
  • 1
Wellinton Monge
  • 26
  • 2
  • 1
    Thanks for you're answer. This was indeed the issue and i solved it without even understand why it did not worked. I was using maxToRenderPerBatch to optimize the rendering of my flatlist as it is pretty long and therefore very long to render. Recently i changed this: ```import { TouchableOpacity } from 'react-native';``` to this : ```import { TouchableOpacity } from 'react-native-gesture-handler';``` and it solved the issue as the new one must fix this con. Thanks for the explanation! – Nakholz Oct 09 '19 at 14:28
0

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"?

axlider
  • 49
  • 1
  • Yes it is the same behavior (apart from the obvious click animation as it is supposed to be). Btw the click animation is done at the time i wish it would travel (without delay even when i don't do a long press). I did not knew the gesture handler i'll have a look at it – Nakholz Jun 12 '19 at 14:14
  • i check react native gesture handler and as i use expo the installation is uselessly complicated (i would need to use special subclasses of ReactRootView for react native navigation and gesture handler) – Nakholz Jun 12 '19 at 14:19
  • if the behavior is the same with TouchableHighlight/TouchableOpacity then i guess you have a performance problem with FlatList. Have a look how many times the render function of your FlatList is called. – axlider Jun 13 '19 at 05:47