Flatlist does not show refresh activity programmably after a user refresh

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS High Sierra 10.13.3 Node: 6.11.3 Yarn: 0.26.1 npm: 5.8.0 Watchman: 4.9.0 Xcode: Xcode 9.2 Build version 9C40b Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed) react: 16.3.1 => 16.3.1 react-native: 0.55.3 => 0.55.3

Target Platform: iOS (11.2)

Steps to Reproduce

(Write your steps here:)

1. Create a react-native project from the react-native init cmd and change the app.js as the link below:
2. Click the “Click to Refresh” button and wait for several seconds and then click the “Click to Stop” button, the refresh activity shows. I call this as a “programmable refresh”.
3. Slide down the “aaaaaaaaaa” “bbbbbbbb” list to let the flatlist display refresh activity, click the “Click to Stop” button to stop refreshing. I call this as a “user refresh”
4. After the “user refresh”, click the “Click to Refresh” to start a programmable refresh again.

Expected Behavior

The refresh activity shows, just as in the step 2’s result.

(Write what you thought would happen.)

Actual Behavior

The refresh activity does not show, but there is a very slight movement of the flatlist

(Write what happened. Add screenshots!)

Reproducible Demo

https://snack.expo.io/SJjZfR8rG

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Button,
    FlatList,
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
    constructor(){
        super();
        this.state = {refreshing : false};
    }

  render() {
    return (
      <View style={styles.container}>
          <FlatList
              data={[{key: 'aaaaaaaaaa'}, {key: 'bbbbbbbbbbbbbb'}]}
              renderItem={({item}) => <Text style={{width: 200, fontSize:20}}>{item.key}</Text>}
              refreshing ={this.state.refreshing}
              onRefresh ={this.onRefresh}
          />
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
          <Button
              title = {'Click to Refresh'}
              onPress = {this.onRefresh}
          ></Button>
          <Button
              title = {'Click to Stop'}
              onPress = {this.onStop}
          ></Button>
      </View>
    );
  }

  onRefresh = ()=>{
      this.setState({refreshing : true});
  }
    onStop = ()=>{
            this.setState({refreshing : false});
    }

}

const styles = StyleSheet.create({
  container: {
      flexDirection : 'column',
      padding: 50,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

(Paste the link to an example project and exact instructions to reproduce the issue.) 1: click “Click to Refresh” 2: click “Click to Stop” 3: slide down to refresh 4: click “Click to Stop” 5: click “Click to Refresh” again

[flyingxu]

@shahchaitanya Thanks, and my workaround is more direct: in node_modules\react-native\React\Views\RCTRefreshControl.m I change it to:

CGPoint offset = {scrollView.contentOffset.x, scrollView.contentOffset.y - 60}; //self.frame.size.height

It seems dangerous at the first sight, but here in my app it runs beautifully

[shahchaitanya]

@flyingxu Here is my work around.

• Initialize a local state called isScrolled to false.
• Set isScrolled state to true while calling onRefresh method of FlatList.
• Check isScrolled value when you call programmable refresh function.
  • If isScrolled is true then Scroll FlatList to -60. Using scrollToOffset method.
  • Set isScrolled to false.