From c4950610e40f2019c828bc99e29769cd4089c217 Mon Sep 17 00:00:00 2001
From: Mike <yum650350@gmail.com>
Date: Wed, 16 Dec 2020 10:11:31 -0800
Subject: [PATCH] fix: First press not working after pull to refresh (#30291)

Summary:
According to https://github.com/facebook/react-native/issues/20011, the first onPress will not work after pull to refresh.

Dive into the code, found out that is because the state `isTouching` in `Libraries/Components/ScrollResponder.js` is not updated after the pull to refresh.

Update the `isTouching` state in `scrollResponderHandleResponderRelease` to fix this.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Fixed] - First press not working after pull to refresh

Pull Request resolved: https://github.com/facebook/react-native/pull/30291

Test Plan:
### Before
- The first onPress fail
![ezgif-4-c6aa5383e898](https://user-images.githubusercontent.com/48589760/97789482-cd4c4100-1bfb-11eb-8a6b-649e8a966b99.gif)
### After
- The first onPress success
![ezgif-4-195f9f6c302e](https://user-images.githubusercontent.com/48589760/97789488-da693000-1bfb-11eb-9a87-f005e61b8ad0.gif)

Eli:
I tested this myself internally using this code sample:

```
'use strict';

import PlaygroundRoute from 'PlaygroundRoute';
import type {SurfaceProps} from 'Surface';
import TetraText from 'TetraText';
import TetraView from 'TetraView';
import {TouchableOpacity, Text, View, ScrollView, RefreshControl, StyleSheet} from 'react-native';
import * as React from 'react';

type Props = SurfaceProps<PlaygroundRoute>;

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>
    );
  }
}

export default function Playground(props: Props): React.Node {
  return (
    <App />
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
    paddingTop: 30,
  },
});
```

{F351458967}

Reviewed By: appden

Differential Revision: D25574927

Pulled By: TheSavior

fbshipit-source-id: 7abf8a2f947d94150419e51d46a19e792441c981
---
 Libraries/Components/ScrollResponder.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Libraries/Components/ScrollResponder.js b/Libraries/Components/ScrollResponder.js
index c6b0794e2f4..55571c86e08 100644
--- a/Libraries/Components/ScrollResponder.js
+++ b/Libraries/Components/ScrollResponder.js
@@ -330,6 +330,7 @@ const ScrollResponderMixin = {
    * Invoke this from an `onResponderRelease` event.
    */
   scrollResponderHandleResponderRelease: function(e: PressEvent) {
+    this.state.isTouching = e.nativeEvent.touches.length !== 0;
     this.props.onResponderRelease && this.props.onResponderRelease(e);
 
     if (typeof e.target === 'number') {