[FlatList] render issues using `scrollToIndex` on `componentDidMount`

[conrad-vanl]

Description

Running into an inconsistent bug when trying to use scrollToIndex on componentDidMount. Essentially, if the index I'm scrolling to is outside of the initialNumToRender, it doesn't get rendered until I start manually scrolling. You can see the behavior in this gif:

(apologies, just realized it is nearly 40mb in size....)

I have tracked the error down to the onScroll handler being called with inaccurate data:

Which sets the visibleLength and contentLength properties to zero.

This appears that it could be a problem with ScrollView itself, but I'm not sure. As soon as I start manually scrolling, the onScroll handler fires with the correct properties, and the view content renders.

Reproduction Steps and Sample Code

I couldn't get sketch.expo to work, but this example reproduces the issue for me on a fresh React-Native project: https://gist.github.com/conrad-vanl/41e2abb244d0b6e1bd952bd4ff4b3cd7

Essentially:

const style = {
  justifyContent: 'center',
  alignItems: 'center',
  height: 100,
  margin: 25,
  borderWidth: 1,
  borderColor: 'black',
};

class ScrollToExample extends Component {
  componentDidMount() {
    this.list.scrollToIndex({ index: this.props.scrollToIndex || 0 });
  }

  getItemLayout = (data, index) => (
    { length: 150, offset: 150 * index, index }
  );

  render() {
    return (
      <FlatList
        onScroll={(e) => { console.log('onScroll', e.nativeEvent); }}
        style={{ flex: 1 }}
        ref={(ref) => { this.list = ref; }}
        keyExtractor={item => item}
        getItemLayout={this.getItemLayout}
        renderItem={({ item }) => (
          <View style={style}><Text>{item}</Text></View>
        )}
        {...this.props}
      />
    );
  }
}

export default function() {
  return (
    <ScrollToExample
      data={longList}
      scrollToIndex={50}
    />
  );
}

And I also have the repo that produced the above GIF as well: https://github.com/conrad-vanl/rn-flat-list-tests

Solution

None yet. Finally confident that I'm reproducing the issue consistently enough. I believe it might be an issue with ScrollView but I'm not familiar enough (yet) with the intricacies here, so figured I'd post the issue while I continue to track issue origin.

Additional Information

• React Native version: 0.43.0-rc.4
• Platform: iOS; unconfirmed on Android
• Development Operating System: MacOS
• Dev tools: Xcode 8.2.1

[joshjhargreaves]

👍 (plus 1) from me. I'd agree, the issue does seems to lie with trying to scroll to an index/contentOffset outside the initial render window.

Given the 'initialNumToRender' renders the items starting in 0th index in the provided array of items. As a user of the component, for example, would it make any sense to be abled to specify the 'initialNumToRender' as well as the starting index of the items to render and either the component can manage the appropriate starting contentOffset or this can be done externally? @sahrens mentioned that the initialNumToRender was a pull to refresh optimisation, so I'm not sure.

@conrad-vanl : interesting find with the onScroll event.

[joshjhargreaves]

@conrad-vanl: the reason your example wasn't working in sketch is that FlatList is in pre-release in 0.43 and AFAIK sketch is currently bundling 0.42.

[conrad-vanl]

would it make any sense to be abled to specify the 'initialNumToRender' as well as the starting index of the items to render and either the component can manage the appropriate starting contentOffset or this can be done externally?

Not sure. The bug here definitely has to do with the bad values being sent in the onScroll event though.

[joshjhargreaves]

The behavior I'm seeing is blank content loaded initially.
Scrolling backwards the content is blank until reaching the initially rendered pages. Scrolling forwards again, the content is rendered as expected.

[conrad-vanl]

@joshyhargreaves I came across that issue as well. For me, it had to do with the InteractionManager.runAfterInteractions method that is used by FlatList VirtualizedList. Essentially, I had some Animations that weren't being properly "stopped" or torn down...which was causing the exact same behavior you mention (blank items until I reach the items that initially rendered).

Potentially related to #8624

[joshjhargreaves]

@conrad-vanl funnily enough, it looks like runAfterInteractions isn't being called for myself (in relation to the link you posted).

Just out of interest, if you call scrollToIndex with a setTimeout with some arbitrary period of 2s, say, does the problem still occur for you?

[conrad-vanl]

it looks like runAfterInteractions isn't being called for myself (in relation to the link you posted).

@joshyhargreaves no, but VirtualizedList uses it under the hood. Cell updates in FlatList are batched and run after interactions....if the InteractionManager gets hung up (like in #8624) it'll create the issue you describe.

Will have to check on your other Q

[joshjhargreaves]

@conrad-vanl thanks for clarifying, much appreciated.

[sahrens]

Yes I think it makes sense to add some initialScrollIndex or something, might add that soon.

Are you providing getItemLayout?

There should be logic to promote the cell rendering priority to bypass runAfterInteractions if they are close enough to or inside the viewport - perhaps that logic is broken? Or you are just doing other heavy JS computation that's blocking it up?

[sahrens]

Oh sorry, looks like you are providing getItemLayout. I'll take a look.

[conrad-vanl]

@sahrens the runAfterInteractions bit I believe should be a separate issue, but yes, there was other JS computation that was blocking (specifically a looping Animation that wasn't being properly stopped). The only weird part was that once you scroll to the top to the rows that were rendered initially, the list snapped back into working it would start rendering cells as you scrolled down.

Again, that's a different issue that was fixed (for me, atleast) by making sure runAfterInteractions is properly firing. This issue is purely about trying to use scrollToIndex on initial mount not working, I believe based on the onScroll handler not reporting correct values (console.log onScroll to see what I mean, like my code example above).

[joshjhargreaves]

Yep, does look like a couple of seperate issues!

@sahrens it looks like I've got a separate problem with runAfterInteractions being locked up which I'll have to get to the route of why. However, from the looks of it (or at least from what I can see), it looks like when using scrollToIndex (or the scrollViewcontentOffset prop) to adjust the viewPort/contentOffset programmatically the cell rendering priority is not promoted to bypass runAfterInteractions until the initialNumToRender items are back in view.

[joshjhargreaves]

@conrad-vanl: thanks for the heads up about InteractionManager. Turns out we had a looping loading spinner animation that was blocking the Interaction Manager; fixed by specifying isInteraction to be false when configuring the animations.

@sahrens fixing the InteractionManager block actually fixes the issue with blank content, and cells are now rendering, given runAfterInteractions is now being called :). These cells at the arbitrary offset are not rendered with the same priority as initialNumToRender, as we'd expect perhaps.

So I think you're right, as a result of these items being rendered with a low priority not high I think`initialScrollIndex' would make a lot of sense :).

I'd be interested to see what the logic would might look like, so will have a look out of interest!

Thanks a lot.

[joshjhargreaves]

@conrad-vanl I'm actually seeing the same issue as you, although intermittently.