React-native-tab-view: Slow when transition by state index change

[FakhruddinAbdi]

Current behaviour

There's some delay when manually slide to the next tab using state index and renderScene function.
It has a extremely bad user experience

Expected behaviour

It should immediately do the transition.

Code sample

return (
  <TabViewAnimated
    style={styles.container}
    navigationState={this.state}
    renderScene={this._renderScene}
    swipeEnabled={false}
    animationEnabled={false}
    onIndexChange={this._handleIndexChange}
    initialLayout={initialLayout}
  />

 .....
_renderScene = ({ route }) => {
const { cat, subCat } = this.state;
const { navigation } = this.props;

switch (route.key) {
  case 'category':
    return (
      <View>
       { this.getCategories() }
      </View>
    );
  case 'subCategory':
    return (
      <View>
        { this.getSubCategories() }
      </View>
    );
  case 'posts':
    return (
      <View>
        <Posts cats={{category: cat, subCat}} navigation={navigation} />
      </View>
    )
}

}

What have you tried

Your Environment

OS: macOS Sierra 10.12.6
Node: 6.6.0
Yarn: Not Found
npm: 4.6.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 2.2 AI-145.3537739

[satya164]

https://github.com/react-native-community/react-native-tab-view#avoid-unnecessary-re-renders

[FakhruddinAbdi]

I tried this solution already , It doesn't solve the issue @satya164.

[satya164]

You're creating new object every render: cats={{category: cat, subCat}}. It triggers a re-render every render. You need to optimize your components with pure components properly.

[FakhruddinAbdi]

Thanks .. I just removed the posts tabs ( just to test it ) and it fixed the issue.