FlatList onRefresh not called on pull up.

[dmr07]

Is this a bug report?

Yes

Have you read the Bugs section of the Contributing to React Native Guide?

Yes

Environment

1. react-native -v: 0.4.5
2. node -v: 7.4.0
3. npm -v: 5.0.3
4. yarn --version (if you use Yarn): 0.24.5

Then, specify:

1. Target Platform (e.g. iOS, Android): iOS
2. Development Operating System (e.g. macOS Sierra, Windows 10): macOs Sierra
3. Build tools (Xcode or Android Studio version, iOS or Android SDK version, if relevant): XCode 8.3.3

Steps to Reproduce

1. Implement React-Native FlatList in a module.
2. Render a component in renderItems prop
3. nest FlatList inside <ScrollView> element
4. Pull up on device to attempt to refresh

Expected Behavior

Call onRefresh function on pull up.

Actual Behavior

onRefresh function is not called.

Reproducible Demo

Snack Link: https://snack.expo.io/HJYx3Kx4W

...
  constructor(props) {
    super(props);
    this.state = {
      stories: [],
      isFetching: false,
    };
  }
  componentDidMount() { this.fetchData() }
  onRefresh() {
    this.setState({ isFetching: true }, function() { this.fetchData() });
  }
  fetchData() {
    var that = this;
    axios.get('http://192.168.0.13:3000/api/story/get/by/geo')
      .then((res) => {
        that.setState({ stories: res.data, isFetching: false });
        that.props.dispatch(StoryActions.setStories(res.data))
      })
  }
  render() {
    return (
      <ScrollView>
        <FlatList
          onRefresh={() => this.onRefresh()}
          refreshing={this.state.isFetching}
          data={this.state.stories}
          keyExtractor={(item, index) => item.id}
          renderItem={({item}) => (<StoryFeed story={item} id={item.id} /> )}
          />
      </ScrollView>
    )
  }

[hramos]

Can you set this up as a Snack? Should be pretty straightforward, no need to make a network request in the refresh call either.

[dmr07]

@hramos Here's a link: https://snack.expo.io/HJYx3Kx4W

Issue is that FlatList onRefresh does not work when it is nested inside ScrollView. In the Snack, if you change the ScrollView to View, then it works okay.

[hramos]

Gotcha, can you update your description at the top to make that clarification?

[dmr07]

updated.

[hramos]

@sahrens is this intended to work? I'm not sure how prevalent the use of a FlatList within a ScrollView is.

[dmr07]

@hramos @sahrens I'm running into a couple situations where having ScrollView support would be helpful. For example, if I need to detect a scroll event in order to hide the header, according to the FlatList docs this is not possible. Furthermore, if a content filter bar is to be placed above a FlatList, it would be rendered fixed above the scrollable content and take up screen space, an issue that would not otherwise occur when using ScrollView.

UPDATE: Just tried attaching onScroll to FlatList. It works; would be nice to see this documented when you guys have a chance. Regarding the header bar, there's a prop that I missed the first time around. I see now that the intent of FlatList is a super ScrollView, and I suppose nesting would be bad design.

[dmr07]

I'm closing this issue as the original problem was caused by bad design / inadequate understanding of FlatList. Better documentation would be helpful though.

[ghoshabhi]

@dmr07 : Could you post your solution/changes here? I too have a situation where I have a fixed header with filter options and a FlatList (which needs pull-to-refresh) within a scroll view.

[ghoshabhi]

Note: I too fixed the problem by using <View style={{ flex: 1 }}> instead of ScrollView