react-native

mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00

Files

T

Mike c4950610e4 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

2020-12-16 10:14:02 -08:00

AccessibilityInfo

Deploy Flow v0.136.0

2020-10-18 20:30:55 -07:00

ActivityIndicator

replace defaultProps usage in functional components

2020-11-13 17:07:11 -08:00

Clipboard

Migrate large amount of modules to flow strict and strict-local

2020-07-22 09:46:16 -07:00

DatePicker

Support excluding multiple platforms.