Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scrollToLocation in componentDidMount prevents SectionList rendering #21846

Closed
3 tasks done
hughbe opened this issue Oct 18, 2018 · 2 comments
Closed
3 tasks done

scrollToLocation in componentDidMount prevents SectionList rendering #21846

hughbe opened this issue Oct 18, 2018 · 2 comments
Labels

Comments

@hughbe
Copy link

hughbe commented Oct 18, 2018

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:
image

Actual:
unadjustednonraw_thumb_afc

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
Copy link

stale bot commented Jan 20, 2019

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.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 20, 2019
@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 24, 2019
@hramos hramos removed the Bug Report label Feb 6, 2019
@orta
Copy link
Contributor

orta commented Mar 19, 2019

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?

@facebook facebook locked as resolved and limited conversation to collaborators Mar 19, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 19, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

5 participants