Async load in React Native

Question

If I have a navigator with two views:

  _renderScene(route, navigator) {
    if (route.id === 1) {
      return <PageOne navigator={navigator}
                         setIndex={this.setIndex} />
    } else if (route.id === 2) {
      return <PageTwo navigator={navigator}
                      index={this.state.index} />
    }
  }

And when I'm on PageOne, I want to begin to preload PageTwo. Is there an easy way to handle this asynchronous loading so the page is ready when the user clicks to navigate?

Imagine page one is a scrollview, and page two is a list of images, so you want to start loading the list of images for view2 as soon as you scroll to a tab. That way when you select the tab it will begin loading the associated view.

The real confusion for me is how to begin loading a page in the background?

vgrafe · Accepted Answer · 2016-09-05 17:59:20Z

1

I would initially create both PageOne and PageTwo in the constructor of this component, then pass the relevant one in the render.

Something like:

_initComponent() { //to call on constructor, or right after component mounted, or when props changed. make sure this does only run once in the component lifetime.
    this.page1 = <PageOne navigator={navigator}
                         setIndex={this.setIndex} />
    this.page2 = <PageTwo navigator={navigator}
                      index={this.state.index} />
}

_renderScene(route, navigator) {
    if (route.id === 1) {
      return this.page1
    } else if (route.id === 2) {
      return this.page2
    }
  }

answered Sep 5, 2016 at 17:59

vgrafe

1,3601 gold badge12 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rob Over a year ago

so you would only have it load the two pages when the app is opened?

Collectives™ on Stack Overflow

Async load in React Native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related