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

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

[ludovicjamet]

I got this problem to, I found a little hack to avoid this issue until it’s fixed. Just add a sleep() like function before scrollToIndex like

componentDidMount() {
  let wait = new Promise((resolve) => setTimeout(resolve, 500));  // Smaller number should work
  wait.then( () => {
    this.refs.flatlist.scrollToIndex({index: 4, animated: true});
  });
}

[Kiarash-Z]

Hi mine fixed by giving style={{ backgroundColor: 'white' }} to flat list