FlatList item onPress not work the first time after refreshed

[kientux]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.5
      CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
      Memory: 25.63 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.2 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.3.1 => 16.3.1
      react-native: 0.56.0 => 0.56.0
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-scripts: 1.14.0

Description

FlatList has item with TouchableHighlight, and a RefreshControl attached.
onPress method of TouchableHighlight is not working the first time after onRefresh called.

If I scroll FlatList a bit after refreshed, then item onPress works fine.
// UPDATE: Android does not have this bug.

Reproducible Demo

Fresh project created by react-native init

import React, { Component } from "react";
import { Text, View, FlatList, TouchableOpacity, RefreshControl } from "react-native";

type Props = {};
export default class App extends Component<Props> {
  constructor() {
    super();
    this.state = { refreshing: true, items: [] };
  }

  componentDidMount() {
    this.refresh();
  }

  genItems = () => [0, 1, 2, 3, 4, 5];

  refresh = () => {
    this.setState({ refreshing: true, items: [] });
    setTimeout(() => this.setState({ refreshing: false, items: this.genItems() }), 1500);
  };

  renderItem = ({ item }) => {
    const text = `${item}`;
    return (
      <TouchableOpacity onPress={() => alert("pressed!")}>
        <Text style={{ width: "100%", height: 48, backgroundColor: "white" }}>
          {text}
        </Text>
        <View style={{ width: "100%", height: 1, backgroundColor: "gray" }} />
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={{ flex: 1, padding: 48 }}>
        <FlatList style={{ flex: 1, backgroundColor: "#aaa", borderColor: "gray", borderWidth: 1 }}
          renderItem={this.renderItem}
          data={this.state.items}
          keyExtractor={item => `${item}`}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this.refresh}
            />
          }
        />
      </View>
    );
  }
}

[elicwhite]

Fascinating. Does it work without a refresh control? What about a touchablewithoutfeedback instead of a touchablehighlight?

[kientux]

• If I remove refreshControl then auto refresh with a setTimeout then it works fine. Touches registered everytime.
• It does NOT work with TouchableHighlight, TouchableOpacity or TouchableWithoutFeedback.

[kientux]

Update that Android doesn't has this bug.

[elicwhite]

Does this repro with v0.56.0?

[kientux]

Yes it still does.

// Updated first post with latest info from react-native info.

[vkhasanshin]

Same issue!

[elicwhite]

This reproes with ScrollView, not just FlatList.

• It requires clearing the items and then rendering them. Just triggering a state update with the same items isn't enough.
• It requires a refresh control and triggering onRefresh that way. If you do a setInterval in the componentDidMount which calls refresh(), that doesn't repro.

Someone will need to dig into the ScrollView implementation and see if something funky is happening with the refresh control. It could also be somewhere in the ScrollableMixin or something like that.

This is the example I used:

class App extends React.Component<{}> {
  constructor() {
    super();
    this.state = {refreshing: true, items: []};
  }

  componentDidMount() {
    this.refresh();
  }

  refresh = () => {
    this.setState({
      refreshing: true,
      items: [],
    });

    setTimeout(
      () =>
        this.setState({
          refreshing: false,
          items: [0, 1, 2, 3, 4, 5],
        }),
      1500,
    );
  };

  renderItem = ({item}) => {
    return (
      <TouchableOpacity onPress={() => alert('pressed!')} key={`${item}`}>
        <Text style={{width: '100%', height: 48, backgroundColor: 'white'}}>
          {item}
        </Text>
        <View style={{width: '100%', height: 1, backgroundColor: 'gray'}} />
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={{flex: 1, padding: 48}}>
        <ScrollView
          style={{
            flex: 1,
            backgroundColor: '#aaa',
            borderColor: 'gray',
            borderWidth: 1,
          }}
          keyExtractor={item => `${item}`}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this.refresh}
            />
          }>
          {this.state.items.map(item => this.renderItem({item}))}
        </ScrollView>
      </View>
    );
  }
}

[apsears]

Are there any workarounds for this? Invoke a fake scroll or touch event? Any more hints for how to go about fixing?

[AlainGauthier]

setState does not re-render nor update FlatList on iOS event with the extraData workaround any solution?

[rayhk6]

I used a setTimeout to solve the issue
<RefreshControl refreshing={this.state.refresh} onRefresh={() => setTimeout(() => { this.refeshAction() }, 200) } title="Test />