scrollToLocation in componentDidMount prevents SectionList rendering

[hughbe]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Scanning folders for symlinks in /Users/hugh/Documents/GitHub/Oxford-Union/App/node_modules (31ms)

Environment:
  OS: macOS High Sierra 10.13.6
  Node: 8.9.4
  Yarn: Not Found
  npm: 6.4.1
  Watchman: Not Found
  Xcode: Xcode 10.0 Build version 10A255
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.5.2 => 16.5.2
  react-native: https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz => 0.55.4

Description

I have a SectionList that contains a chronological list of events on a specific date. I am trying to set the initial scroll position to the current date. This is done by calling this.scrollView.scrollToLocation from a function called in componentDidMount.

In EventsPage.js

    scrollToCurrentDate = async () => {
        const { firstLoad, events } = this.state;
        if (!firstLoad) {
            return;
        }

        this.setState({firstLoad: false});

        // Get the section closest to today's date.
        var lastSectionIndex = -1;
        for (var i = 0; i < events.length; i++) {
            const section = events[i];
            if (new Date(section.date) > new Date()) {
                break;
            }

            lastSectionIndex = i;
        }

        if (lastSectionIndex === -1) {
            return;
        }

        const lastSection = events[lastSectionIndex];
        const hasCurrent = lastSection !== events[events.length - 1] && lastSection.date < new Date();
        if (!hasCurrent) {
            return;
        }

        this.scrollView.scrollToLocation({sectionIndex: lastSectionIndex, itemIndex: 0, animated: false});
    }

However, on first load, I get a blank screen - rendering has failed!

Expected:

Actual:

Workaround

Add this.scrollView.flashScrollIndicators(); after loading the screen!

Reproducible Demo

Please comment below and I'll allow access to the private reproducible example on github.

Setup

1. Clone https://github.com/hughbe/oxford-union/tree/react-native-repro, follow the Setup instructions
2. npm install -g expo-cli
3. npm install
4. npm start

Steps to reproduce

1. Open the app and observe that the screen is ALL WHITE.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[orta]

I think this might be covered by the docs: https://facebook.github.io/react-native/docs/sectionlist#methods-1

Note: Cannot scroll to locations outside the render window without specifying the getItemLayout or onScrollToIndexFailed prop.

Is it possible those haven't been set?