CODEWITHSUNDEEP
react-nativenavigator
Rob
Rob

Reputation: 3459

Async load in React Native

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?

Upvotes: 1

Views: 792

Answers (1)

vgrafe
vgrafe

Reputation: 1350

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
    }
  }

Upvotes: 1

Related Questions