React-native-tab-view: What's correct way to do expensive calculation in "onIndexChange"? (Video demo inside)

[1c7]

First, I already did my research(Google/Stackoverflow/Document)

I tried many ways

• tried async function
• tried setTimetout

and some other methods, all fail.
(I am not a React/React Native expert)

My code looks like this

<TabViewAnimated
  ...(other props, not important)
  onIndexChange={this._handleIndexChange} // HERE
/>

(it have 3 scene)

Normally, onIndexChange should look like this:

_handleIndexChange(index){
  this.setState({ index });
}

(and this work perfectly of course)

But what I want is ：

when switch to scene 2 and 3 (not scene 1) it send 1 HTTP request.
now the code looks like this:

  _handleIndexChange(index){
    this.setState({ index });
    if (index == 1 || index == 2) { // index start with 0, so scene 2 and 3 actually need to use number 1 and 2
        if (is_login) {
            get_user_info(); // it send http request
        }
      }
  }

（here just some pseudo-code to demonstrate what I mean ,
is_login and get_user_info() I didn't provide detail here, they are not important）

Expect

Tab Switch still smooth,
like this: https://www.youtube.com/watch?v=iMAT05gJTHE&feature=youtu.be

Actually

Tab Switch feel laggy,

and sometimes just stop working (the App didn't crash or freeze, swipe gesture still work, just bottom tab indicator not responsive anymore)
like this: https://www.youtube.com/watch?v=-SXvKnwsstU&feature=youtu.be

Appreciate any help, Thanks! :smile:

[satya164]

You shouldn't do expensive calculation in onIndexChange. If you want to do something when tab is being switched, you'll need to delay it till the animation is complete. You can do that with InteractionManager.runAfterInteractions

[1c7]

@satya164 Thank you very much! would try!

[1c7]

@satya164 Hi, is it possible to provide code example on how to use react-native-tab-view + InteractionManager.runAfterInteractions?

after read the InteractionManager.runAfterInteractions document I still quite confused how to use it with react-native-tab-view

Thanks!

[satya164]

  _handleIndexChange(index){
    this.setState({ index });
    InteractionManager.runAfterInteractions(() => {
      if (this.state.index == 1 || this.state.index == 2) { // index start with 0, so scene 2 and 3 actually need to use number 1 and 2
        if (is_login) {
          get_user_info(); // it send http request
        }
      }
    });
  }

[1c7]

@satya164 Thank you very much!