TouchableOpacity can be slow to respond to touch while scrolling

[Jxcook]

This issue has more than one way to reproduce, but this is the way I was able to force the issue out.

What is the current behavior?

Rendering many views and elements with TouchableOpacity can cause a 250ms-500ms lag to the initial touch of a scroll. This causes the scrolling experience to look detached from my finger and scroll a random distance. This only happens for IPhone devices in the Safari mobile browser and it does not seem to reproduce in the simulator.

What is the expected behaviour?

Should be smooth and consistently responsive, similar to the feel of using TouchableWithoutFeedback in place of TouchableOpacity. I use this to compare often when trying to reproduce the issue.

Steps to reproduce

I have spent time trying to simplify the reproduction of this issue, but the most reliable method of reproducing this is to embed views and TouchableOpacity elements something like the below example repeated 30-40 times.. The real cause I am still not certain because I have seen it happen under other types of conditions but this is the way I can force it to happen.

    <View>
      <Text>This is my first line of text for this repro</Text>
      <Text>This is my second line to repro this problem </Text>
    </View>
    <TouchableOpacity>
        <View>
          <Text>This text seems to make the issue slightly worse, but images don't seem as impactful</Text>
          <img src={logo} className="App-logo" alt="logo" />
        </View>
    </TouchableOpacity>

For comparison, you can replace TouchableOpacity with TouchableWithoutFeedback and see that there is definitely a difference in the scrolling experience.

Environment (include versions)

OS: IOS
Device: IPhone
Browser: Safari
React Native for Web (version): 0.0.51
React (version): 15.3.2

[necolas]

Please can you try updating to react@15.4 and react-native-web@0.0.68

[jameslive]

Thank you for the suggestion, I tried this and it did work better. However, I need to perform some additional testing to make sure. I will update as I get that done.

[jameslive]

Ok, this has been confirmed to fix the issue. Thanks!

[necolas]

Thanks for confirming

[gary-lo]

Wondering what cause this issue and which commit fixed it?

[ntharim]

@necolas This is still happening on 0.0.77. To reproduce:

<ScrollView>
  {Array.from(Array(100)).map((_, i) => (
    <TouchableOpacity>
      <View
        style={{
          backgroundColor: i % 2 ? 'red' : 'blue',
        }}
      >
        <Text>Random text</Text>
        <Text>Random text</Text>
        <Text>Random text</Text>
      </View>
    </TouchableOpacity>
  ))}
</ScrollView>

The lag is worst with TouchableOpacity, a bit better with TouchableHighlight, while TouchableWithoutFeedback works totally fine.

However, if you remove the Texts above and set a height on View like this:

      <View
        style={{
          height: 100,
          backgroundColor: i % 2 ? 'red' : 'blue',
        }}
      />

Then all 3 Touchables work fine. So I'm guessing it's Text that's causing this issue when used with TouchableHighlight/TouchableOpacity, since TouchableWithoutFeedback works fine in all cases.

Environment (include versions)

OS: iOS 10
Device: iPad Pro
Browser: Safari
React Native for Web (version): 0.0.77
React (version): 15.4.2

@jameslive @gary-domain Can you guys confirm this?

[necolas]

This happens in desktop Safari and probably relates to a major flexbox performance issue that has affected Safari for over 2 years. Thankfully, WebKit has been patched and hopefully it will make it into the next version of Safari.

Adding the style display: block somewhere in the tree breaks the flexbox nesting and restores some of the lost performance. We use that work around to improve render performance in Safari for mobile.twitter.com:

<ScrollView>
  {Array.from(Array(100)).map((_, i) => (
    <TouchableOpacity key={i}>
      <View style={{ display: 'block' }}>
        <View style={{ backgroundColor: i % 2 ? 'red' : 'blue' }}>
          <Text>Random text</Text>
          <Text>Random text</Text>
          <Text>Random text</Text>
        </View>
      </View>
    </TouchableOpacity>
  ))}
</ScrollView>

Environment:

OS: OS X 10.11
Device: MacBook Pro
Browser: Safari 10
React DOM (version): 15.4.2
React (version): 15.4.2

[ntharim]

Thank @necolas. That indeed fixes the issue.

[chinaxiaoyy]

change the TouchableOpacity to Text ,this.will flxed

[mjgul]

Use Pressable.